Android卡片滑动切换动画,Android原生ViewPager控件实现卡片翻动效果

痛定思痛。 2022-10-17 13:52 430阅读 0赞

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

先放一张效果图：

![d27872b49556f228c58fa270e6fdc8a2.png][]

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

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

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"

android:background="@drawable/bitmap"

android:gravity="center">

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" />

第二步、创建适配器：

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控件的布局文件：

xmlns:tools="http://schemas.android.com/tools"

android:layout\_width="match\_parent"

android:background="\#fff"

android:layout\_height="match\_parent" >

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" />

第四步、创建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))

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

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

[d27872b49556f228c58fa270e6fdc8a2.png]: /images/20221014/7fc1b98b9c2f439d8227c6ddc28b75e4.png

Android卡片滑动切换动画,Android原生ViewPager控件实现卡片翻动效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关微信小程序实现卡片切换动画效果

相关 Android卡片滑动切换动画,Android原生ViewPager控件实现卡片翻动效果

相关 android----------用ViewPage实现滑动效果

相关 android: ViewPager滑动切换Activity

相关 Android ViewPager多页面滑动切换以及动画效果

相关 recyclerview 实现卡片滑动效果

相关 ViewPager滑动动画效果实现

相关 Android自定义LayoutManager实现表格，卡片显示效果

相关 Android开发：ViewPager实现屏幕滑动，及定义切换动画（实例）

相关 uni-app 通过 swiper 实现卡片滑动背景同步切换效果