如何通过左右按钮控制ImageView实现左右滑动切换图片效果

以下两种方案均可实现需求，可根据实际图片数量选择，动画时长300ms可根据需求自行调整。

方案1：轻量实现（仅2张图，无需额外引入组件） #

• 首先布局中添加重叠的ImageView与左右按钮：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">
    <ImageView
        android:id="@+id/ivImage1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/img1"/>
    <ImageView
        android:id="@+id/ivImage2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:src="@drawable/img2"/>
</FrameLayout>
<Button
    android:id="@+id/btnLeft"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="左切"/>
<Button
    android:id="@+id/btnRight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="右切"/>

• 逻辑代码中添加滑动切换逻辑：

// 标记当前展示的是第1张图
private var isShowFirst = true

btnRight.setOnClickListener {
    if (isShowFirst) {
        // 图1向左滑出屏幕
        ivImage1.animate()
            .translationX(-ivImage1.width.toFloat())
            .setDuration(300)
            .start()
        // 图2从右侧滑入屏幕
        ivImage2.apply {
            visibility = View.VISIBLE
            translationX = ivImage2.width.toFloat()
            animate()
                .translationX(0f)
                .setDuration(300)
                .start()
        }
        isShowFirst = false
    }
}

btnLeft.setOnClickListener {
    if (!isShowFirst) {
        // 图2向右滑出屏幕
        ivImage2.animate()
            .translationX(ivImage2.width.toFloat())
            .setDuration(300)
            .withEndAction { ivImage2.visibility = View.GONE }
            .start()
        // 图1从左侧滑入屏幕
        ivImage1.animate()
            .translationX(0f)
            .setDuration(300)
            .start()
        isShowFirst = true
    }
}

方案2：多图扩展方案（使用ViewPager2，适配任意数量图片场景） #

• 首先引入ViewPager2依赖：

implementation "androidx.viewpager2:viewpager2:1.0.0"

• 布局中添加ViewPager2与左右按钮：

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>
<!-- 左右按钮布局同方案1 -->

• 给ViewPager2设置图片适配器：

// 自定义图片资源列表
val imgList = listOf(R.drawable.img1, R.drawable.img2, R.drawable.img3)
viewPager.adapter = object : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        val iv = ImageView(parent.context)
        iv.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        iv.scaleType = ImageView.ScaleType.CENTER_CROP
        return object : RecyclerView.ViewHolder(iv) {}
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        (holder.itemView as ImageView).setImageResource(imgList[position])
    }

    override fun getItemCount() = imgList.size
}

• 按钮点击控制翻页，默认自带的滑动动画已经符合需求无需额外配置：

btnRight.setOnClickListener {
    val currentPos = viewPager.currentItem
    if (currentPos < imgList.size -1) {
        viewPager.currentItem = currentPos + 1
    }
}

btnLeft.setOnClickListener {
    val currentPos = viewPager.currentItem
    if (currentPos > 0) {
        viewPager.currentItem = currentPos - 1
    }
}

内容的提问来源于stack exchange，提问作者Rafii Putra