android 卡片堆叠轮播

您可以使用 ViewPager2 和 CardView 组合来实现 Android 卡片堆叠轮播效果。

首先，您需要在布局文件中创建一个 ViewPager2 组件和一个 CardView 组件。然后，您可以使用 CardView 的属性来设置每张卡片的样式和大小。接下来，您需要创建一个 PagerAdapter 类来管理 ViewPager2 的内容。在 PagerAdapter 中，您可以重写 onCreateViewHolder() 方法来创建每张卡片的视图，并重写 onBindViewHolder() 方法来为每张卡片填充数据。

最后，您可以使用 ViewPager2 的 setOrientation() 方法来设置堆叠方向，并使用 setPageTransformer() 方法来添加一个自定义的 PageTransformer 来实现卡片堆叠效果。

下面是一个示例代码，用于实现 Android 卡片堆叠轮播效果：

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingLeft="48dp"
    android:paddingRight="48dp"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.cardview.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="240dp"
    android:layout_height="360dp"
    android:layout_marginTop="16dp"
    android:layout_gravity="center_horizontal"
    app:cardElevation="8dp"
    app:cardCornerRadius="16dp"
    app:cardUseCompatPadding="true"
    app:layout_constraintTop_toBottomOf="@id/viewPager2" />

class MyPagerAdapter(private val items: List<MyData>) : RecyclerView.Adapter<MyViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_card, parent, false)
        return MyViewHolder(view)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val item = items[position]
        holder.titleTextView.text = item.title
        holder.subtitleTextView.text = item.subtitle
        holder.imageView.setImageResource(item.imageResId)
    }

    override fun getItemCount(): Int = items.size
}

class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val titleTextView = itemView.findViewById<TextView>(R.id.titleTextView)
    val subtitleTextView = itemView.findViewById<TextView>(R.id.subtitleTextView)
    val imageView = itemView.findViewById<ImageView>(R.id.imageView)
}

val viewPager2 = findViewById<ViewPager2>(R.id.viewPager2)
val cardView = findViewById<CardView>(R.id.cardView)

val items = listOf(
    MyData("Title 1", "Subtitle 1", R.drawable.image1),
    MyData("Title 2", "Subtitle 2", R.drawable.image2),
    MyData("Title 3", "Subtitle 3", R.drawable.image3),
    MyData("Title 4", "Subtitle 4", R.drawable.image4),
    MyData("Title 5", "Subtitle 5", R.drawable.image5),
)

val adapter = MyPagerAdapter(items)
viewPager2.adapter = adapter
viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL)
viewPager2.setPageTransformer(CardStackTransformer())

class CardStackTransformer : ViewPager2.PageTransformer {
    override fun transformPage(page: View, position: Float) {
        val scaleFactor = 0.85f
        val elevationFactor = 8f

        when {
            position < -1 -> {
                page.alpha = 0f
            }
            position <= 0 -> {
                page.alpha = 1f
                page.scaleX = scaleFactor
                page.scaleY = scaleFactor
                page.translationY = position * page.height
                page.elevation = elevationFactor * abs(position)
            }
            position <= 1 -> {
                page.alpha = 1f
                page.scaleX = scaleFactor
                page.scaleY = scaleFactor
                page.translationY = -position * page.height
                page.elevation = elevationFactor * abs(position)
            }
            else -> {
                page.alpha = 0f
            }
        }
    }
}

在这个示例代码中，我们创建了一个 MyPagerAdapter 类来管理 ViewPager2 的内容。在 onCreateViewHolder() 方法中，我们使用 LayoutInflater 来创建每张卡片的视图。在 onBindViewHolder() 方法中，我们为每张卡片填充数据。

我们还创建了一个 MyViewHolder 类来保存每个视图中的视图元素。在 CardStackTransformer 类中，我们使用 setPageTransformer() 方法来添加一个自定义的 PageTransformer 来实现卡片堆叠效果。在 transformPage() 方法中，我们根据每个视图的位置来设置它们的缩放比例、位移、高度和阴影。