ViewPager2画廊视图变形问题

本文介绍如何使用 ViewPager2 实现一个画廊视图,使得在一屏内可以同时展示三个不同大小的 item,中间的 item 较大,两侧的较小。文中详细解释了布局配置、自定义 PagerTransformer 的过程,并指出替换数据源后刷新页面可能导致的 bug 以及解决方法。
摘要由CSDN通过智能技术生成

使用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

参考文章

https://blog.csdn.net/starry_eve/article/details/99824450

要实现一个ViewPager2画廊,首先需要在布局文件中添加一个ViewPager2,然后创建一个适配器来提供数据和视图。以下是一些代码片段,可以帮助你开始创建一个基本的ViewPager2画廊: 1. 添加ViewPager2到布局文件中: ```xml <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 创建一个适配器来提供数据和视图: ```kotlin class GalleryAdapter(private val images: List<Int>) : RecyclerView.Adapter<GalleryAdapter.ViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { val view = LayoutInflater.from(parent.context).inflate(R.layout.item_gallery, parent, false) return ViewHolder(view) } override fun onBindViewHolder(holder: ViewHolder, position: Int) { holder.bind(images[position]) } override fun getItemCount(): Int = images.size inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { private val imageView: ImageView = itemView.findViewById(R.id.image_view) fun bind(imageResId: Int) { imageView.setImageResource(imageResId) } } } ``` 3. 设置ViewPager2的适配器: ```kotlin val images = listOf(R.drawable.image1, R.drawable.image2, R.drawable.image3) val galleryAdapter = GalleryAdapter(images) viewPager.adapter = galleryAdapter ``` 4. 设置ViewPager2的滑动方向和页面间距: ```kotlin viewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL viewPager.offscreenPageLimit = 3 viewPager.setPageTransformer { page, position -> val offset = resources.getDimensionPixelOffset(R.dimen.page_margin) when { position < -1 -> { page.translationX = -(2 * offset) } position <= 1 -> { val scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f)) page.scaleX = scaleFactor page.scaleY = scaleFactor } else -> { page.translationX = (2 * offset) } } } ``` 5. 创建一个布局文件来显示图像: ```xml <ImageView android:id="@+id/image_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" /> ``` 以上是一个基本的ViewPager2画廊的实现。您可以根据自己的需求进行更改和调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值