Android单Fragment实现3图滑块并高亮中间滑块的方法

一、布局实现 #

首先在Fragment的布局文件中使用ViewPager2，通过关闭裁剪padding的方式让左右两侧显示部分图片，实现3张图片同时可见的效果：

<!-- fragment_dashboard.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/image_slider"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipToPadding="false"
        android:paddingHorizontal="60dp"/>

</LinearLayout>

然后创建滑块item的布局：

<!-- item_slider_image.xml -->
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slider_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"/>

二、适配器实现 #

编写RecyclerView.Adapter子类，封装图片数据并实现高亮/非高亮状态的切换逻辑：

class ImageSliderAdapter(private val imageList: List<Int>) : RecyclerView.Adapter<ImageSliderAdapter.SliderViewHolder>() {

    inner class SliderViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.slider_image)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SliderViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_slider_image, parent, false)
        return SliderViewHolder(view)
    }

    override fun onBindViewHolder(holder: SliderViewHolder, position: Int) {
        holder.imageView.setImageResource(imageList[position])
        // 初始默认中间项高亮
        highlightImage(holder.imageView, position == 1)
    }

    override fun getItemCount(): Int = imageList.size

    // 高亮控制：缩放+全透明度+无滤镜；非高亮：缩小+半透明+灰度滤镜
    fun highlightImage(imageView: ImageView, isHighlighted: Boolean) {
        if (isHighlighted) {
            imageView.scaleX = 1.2f
            imageView.scaleY = 1.2f
            imageView.alpha = 1.0f
            imageView.setColorFilter(null)
        } else {
            imageView.scaleX = 0.9f
            imageView.scaleY = 0.9f
            imageView.alpha = 0.6f
            imageView.setColorFilter(Color.GRAY, PorterDuff.Mode.SRC_ATOP)
        }
    }
}

三、Fragment逻辑处理 #

在Fragment中初始化ViewPager2，绑定适配器，并监听页面切换事件来更新高亮状态：

class DashboardFragment : Fragment() {

    private lateinit var viewPager2: ViewPager2
    private lateinit var sliderAdapter: ImageSliderAdapter
    // 替换为你的实际图片资源ID
    private val imageList = listOf(R.drawable.img1, R.drawable.img2, R.drawable.img3)

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_dashboard, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        viewPager2 = view.findViewById(R.id.image_slider)
        sliderAdapter = ImageSliderAdapter(imageList)
        viewPager2.adapter = sliderAdapter

        // 监听页面切换，更新当前选中项的高亮状态
        viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                val recyclerView = viewPager2.getChildAt(0) as RecyclerView
                for (i in 0 until recyclerView.childCount) {
                    val child = recyclerView.getChildAt(i)
                    val holder = recyclerView.getChildViewHolder(child) as ImageSliderAdapter.SliderViewHolder
                    sliderAdapter.highlightImage(holder.imageView, holder.bindingAdapterPosition == position)
                }
            }
        })

        // 添加页面切换动画，滑动过程中实时更新视觉状态
        viewPager2.setPageTransformer(object : ViewPager2.PageTransformer {
            override fun transformPage(page: View, position: Float) {
                val imageView = page.findViewById<ImageView>(R.id.slider_image)
                sliderAdapter.highlightImage(imageView, position == 0f)
            }
        })

        // 默认选中中间项（索引1）
        viewPager2.setCurrentItem(1, false)
    }
}

关键说明 #

• android:clipToPadding="false"是实现3图同时可见的核心配置，配合左右padding让边缘图片部分显示
• 高亮效果通过缩放比例、透明度、颜色滤镜的组合实现，视觉区分度明显
• ViewPager2自带滑动手势，无需额外处理触摸事件，适配性更好
• 页面切换监听和PageTransformer结合，确保滑动过程中高亮状态实时更新，过渡自然

内容的提问来源于stack exchange，提问作者Prashant Singatalur