Android原生ViewPager控件实现卡片翻动效果

本文实例为大家分享了Android控件ViewPager实现卡片翻动效果的具体代码,供大家参考,具体内容如下

先放一张效果图:

想要实现这样的效果其实并不是太难,需要对ViewPager的一些细节属性更深入的了解和认识,下面介绍下一个小demo的实现过程:

第一步、创建卡片viewpager适配器的itemview的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/bitmap"
  android:gravity="center">

  <ImageView
    android:id="@+id/home_viewpage_item_img"
    android:paddingBottom="@dimen/dp_82"
    android:paddingTop="@dimen/dp_82"
    android:paddingLeft="@dimen/dp_44"
    android:paddingRight="@dimen/dp_44"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/ic_launcher" />
</RelativeLayout>

第二步、创建适配器:

class CardAdapter(var context: Context) : PagerAdapter() {
  val horoscopestrImgs = intArrayOf(R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
      R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher)

  override fun isViewFromObject(view: View, `object`: Any): Boolean {
    return view === `object`
  }

  override fun getCount(): Int {
    return 12 * 30
  }

  override fun instantiateItem(container: ViewGroup, position: Int): Any {
    val view = LayoutInflater.from(context).inflate(R.layout.home_viewpage_item, null)

    view.home_viewpage_item_img.setImageResource(horoscopestrImgs.get(position%12))

    container.addView(view)
    return view
  }

  override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
    container.removeView(`object` as View)

  }
}

第三步、创建放viewpager控件的布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:background="#fff"
  android:layout_height="match_parent" >

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:overScrollMode="never"
    android:paddingBottom="@dimen/dp_240"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:paddingTop="@dimen/dp_60" />

</RelativeLayout>

第四步、创建viewpager滑动切换动画效果:

class CardTransformer(var context: Context) :ViewPager.PageTransformer{
  val TAG = "CardTransformer"
  private val MAX_SCALE = 1.0f
  private val MIN_SCALE = 0.85f//0.85f
  var animator:ObjectAnimator?=null

  override fun transformPage(page: View, position: Float) {
    //设置了内间距  有0.15的偏差
     var pos=position -0.15.toFloat()

    if ( pos <= 1) {
      val scaleFactor = MIN_SCALE + (1 - Math.abs(pos)) * (MAX_SCALE - MIN_SCALE)

      page.scaleX = scaleFactor //缩放效果
      if (pos > 0) {
        page.translationX = -scaleFactor * 2
      } else if (pos < 0 && pos > -1) {
        page.translationX = scaleFactor * 2
      }
      page.scaleY = scaleFactor

    } else {
      page.scaleX = MIN_SCALE
      page.scaleY = MIN_SCALE
    }

  }
}

第五步、开始调用实现卡片效果的关键代码:

class MainActivity : Activity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main7)

    //设置ViewPager中两页之间的距离
    // viewpager?.setPageMargin(80)

    //自定义ViewPager的页面切换动画
    viewpager?.setPageTransformer(false, CardTransformer(applicationContext))
    //设置viewpager预加载的页数
    viewpager?.offscreenPageLimit = 5
    viewpager?.currentItem = 12 * 15
    viewpager?.setAdapter(CardAdapter(this))
  }

}

到这里就基本实现了想要的卡片滑动切换和展示效果了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义ViewPager实现纵向滑动翻页效果

    抖音几乎已经成为了我们日常生活中使用比较频繁的App,无聊之时或工作之后可以刷一刷短视频来供我们娱乐与放松.看到抖音的视屏切换效果,觉得用ViewPager可以做出一样的效果.想一想之前用的ViewPager都是横向切换的,虽然很经常用,但是从来没实现过竖向的切换效果,说做就做吧. 我们先看一波效果图: 那么,要想实现这样的效果,当然是自定义ViewPager啦.问了一下度娘,看到有这样一种思路: 首先,把Touch事件的x,y坐标做一下交换,从原先的x坐标差值转变成y坐标的差值,正符合了我们手

  • android ViewPager实现滑动翻页效果实例代码

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; public class ReadViewPager extends ViewPager { public ReadV

  • Android ViewPager实现图片轮翻效果

    很多App都有这种效果,特别一些电商类的App,顶部每隔几秒钟会向右翻页显示下张图片,用来作推广或者内容展示用的.今天来简单地模仿一下,还自带一个自动跳动的小功能(底部有几个小点,图片移动的时候,点的状态也在变化),用定时器来实现不难. import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.os.Handler

  • Android CardView+ViewPager实现ViewPager翻页动画的方法

    Viewpager通俗一点讲就是一个允许左右翻转带数据的页面的布局管理器,经常用来连接Fragment,它很方便管理每个页面的生命周期,使用ViewPager管理Fragment是标准的适配器实现.最常用的实现一般有FragmentPagerAdapter和FragmentStatePagerAdapter.自行百度它的用法.今天我们要实现的是下面的效果: NO PICTURE TALK A JB 要实现图中的效果需要以下几个知识点: 1.clipChildren属性 2.一个页面显示多个Vie

  • Android ViewPager实现左右滑动翻页效果

    本文实例为大家分享了ViewPager实现左右滑动翻页效果展示的具体代码,供大家参考,具体内容如下 代码如下: package com.example.demo; import java.util.ArrayList; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import a

  • Android实现卡片翻转动画

    最近项目上用到了卡片的翻转效果,大致研究了下,也参考了网上的一些Demo,简单实现如下: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/card_main_container&

  • Android原生ViewPager控件实现卡片翻动效果

    本文实例为大家分享了Android控件ViewPager实现卡片翻动效果的具体代码,供大家参考,具体内容如下 先放一张效果图: 想要实现这样的效果其实并不是太难,需要对ViewPager的一些细节属性更深入的了解和认识,下面介绍下一个小demo的实现过程: 第一步.创建卡片viewpager适配器的itemview的布局文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:

  • Android原生侧滑控件DrawerLayout使用方法详解

    在android的v4包中有一个控件 Drawerlayout,主要实现了左拉和右拉菜单,类似于之前的"抽屉"功能,此控件使用简单,效果很柔和,操作起来体验非常好,下面是我实现的一个简单效果的部分截图: 左拉: 右拉: 怎么样?是不是在平时开发的应用中很常见?OK,那么接下来我直接上代码: activity_sliding.xml: <?xml version="1.0" encoding="utf-8"?> <android.

  • android使用ExpandableListView控件实现小说目录效果的例子

    今天给大家讲讲android的目录实现方法,就像大家看到的小说目录一样,android 提供了ExpandableListView控件可以实现二级列表展示效果,现在给大家讲讲这个控件的用法,下面是XML定义: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout     xmlns:android="http://schemas.android.com/apk/re

  • Android 底部导航控件实例代码

    一.先给大家展示下最终效果 通过以上可以看到,图一是简单的使用,图二.图三中为结合ViewPager共同使用,而且都可以随ViewPager的滑动渐变色,不同点是图二为选中非选中两张图片,图三的选中非选中是一张图片只是做了颜色变化. 二. 需求 我们希望做可以做成这样的,可以在xml布局中引入控件并绑定数据,在代码中设置监听回调,并且配置使用要非常简单! 三.需求分析 根据我们多年做不明确需求项目的经验,以上需求还算明确.那么我们可以采用在LinearLayout添加子View控件,这个子Vie

  • Android Navigation TabBar控件实现多彩标签栏

    先看看效果图: 源码下载:Android Navigation TabBar控件实现多彩标签栏 代码: MainActivity.java package com.bzu.gxs.meunguide; import android.app.Activity; import android.graphics.Color; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; im

  • Android自定义Gallery控件实现3D图片浏览器

    本篇文章主要介绍如何使用自定义的Gallery控件,实现3D效果的图片浏览器的效果. 话不多说,先看效果. 上面是一个自定义的Gallery控件,实现倒影和仿3D的效果,下面是一个图片查看器,点击上面的小图片,可以在下面查看大图片. 下面重点说一下,实现图片查看器的思路. 1.手机中图片路径的获取 首先,先不管图片如何展示,如果我们想实现图片查看器的功能,我们首先需要做的是获取到所有的图片的路径信息,只有这样,我们才能实现对图片的查看. 我们可以使用下面的代码实现 private List<St

  • Android中Spinner控件之键值对用法实例分析

    本文实例讲述了Android中Spinner控件之键值对用法.分享给大家供大家参考.具体如下: 一.字典表,用来存放键值对信息 package com.ljq.activity; import java.io.Serializable; @SuppressWarnings("serial") public class Dict implements Serializable { private Integer id; private String text; public Dict()

  • Android编程布局控件之AbsoluteLayout用法实例分析

    本文实例讲述了Android编程布局控件之AbsoluteLayout用法.分享给大家供大家参考,具体如下: AbsoluteLayout是绝对布局管理器,指的是指定组件的左上角绝对坐标来指定组件的布局 <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • 分享Android中ExpandableListView控件使用教程

    本文采用一个Demo来展示Android中ExpandableListView控件的使用,如如何在组/子ListView中绑定数据源.直接上代码如下: 程序结构图: layout目录下的 main.xml 文件源码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android

  • Android 代码写控件代替XML简单实例

    Android 代码写控件代替XML简单实例 简单的一个Button控件的练习. 实现代码: Button btn = new Button(HandlerToActivity.this); LinearLayout.LayoutParams params=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.gravity = Gravity.CENTER_HORIZONTAL; param

随机推荐