使用ViewPager2实现画廊视图,一屏幕显示3个item,中间大,两边小。
在布局xml里面将ViewPager2以及父view设置android:clipChildren="false",使ViewPager的子view可以超出ViewPager的范围
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="424px"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clipChildren="false">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="424px"
app:layout_constraintTop_toTopOf="parent"
android:layout_gravity="center"
android:clipChildren="false"
android:overScrollMode="never"
android:layoutDirection="rtl"/>
</androidx.constraintlayout.widget.ConstraintLayout>
然后实现一个PagerTransformer
class ViewPageTransform : ViewPager2.PageTransformer {
override fun transformPage(page: View, position: Float) {
//以圆心进行缩放
page.pivotX = page.width / 2.0f
page.pivotY = page.height.toFloat() //高度缩放以底部为轴心
val scale: Float = 1 - 0.12f * abs(position) // 缩放比例0.88
page.scaleX = scale
page.scaleY = scale
}
}
实现效果。但是替换了adapter的数据源之后,使用adapter.notifyDataSetChanged()会导致item变形,滑动一下就能恢复。
这是ViewPager2的bug,更新数据之后不要使用adater.nofityDataSetChanged(),
重新设置adapter可以解决问题
viewPager2.adapter = adapter
参考文章