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

所属分类: 软件编程 / Android 阅读数: 85
收藏 0 赞 0 分享

本文实例为大家分享了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))
  }


}

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

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

更多精彩内容其他人还在看

Android网络编程之获取网络上的Json数据实例

这篇文章主要介绍了Android网络编程之获取网络上的Json数据实例,本文用完整的代码实例讲解了在Android中读取网络中Json数据的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中的windowSoftInputMode属性详解

这篇文章主要介绍了Android中的windowSoftInputMode属性详解,本文对windowSoftInputMode的9个属性做了详细总结,需要的朋友可以参考下
收藏 0 赞 0 分享

Android网络编程之UDP通信模型实例

这篇文章主要介绍了Android网络编程之UDP通信模型实例,本文给出了服务端代码和客户端代码,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中使用ListView实现漂亮的表格效果

这篇文章主要介绍了Android中使用ListView实现漂亮的表格效果,本文用详细的代码实例创建了一个股票行情表格,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中刷新界面的二种方法

这篇文章主要介绍了Android中刷新界面的二种方法,本文使用Handler、postInvalidate两种方法实现界面刷新,需要的朋友可以参考下
收藏 0 赞 0 分享

Android SDK三种更新失败及其解决方法

这篇文章主要介绍了Android SDK三种更新失败及其解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(一)

Android3.0(API level 11)开始,Android设备不再需要专门的菜单键。随着这种变化,Android app应该取消对传统6项菜单的依赖。取而代之的是提供anction bar来提供基本的用户功能
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(二)

这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu)
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(三)

今天继续昨天没有讲完的Menu的学习,主要是Popup Menu的学习,需要的朋友可以参考下
收藏 0 赞 0 分享

Android显示网络图片实例

这篇文章主要介绍了Android显示网络图片的方法,以实例形式展示了Android程序显示网络图片的方法,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多