如何在Android中用ViewPager2实现指定样式的轮播组件？

方案一：自定义Drawable+自定义View实现目标样式 #

从你提供的示例图来看，核心是选中状态为圆角长条形、未选中为小圆点的指示器效果，可通过以下步骤实现：

1. 创建两种状态的Drawable文件

   • 未选中的小圆点（dot_unselected.xml）：

     <shape xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="oval">
         <size android:width="8dp" android:height="8dp"/>
         <solid android:color="#CCCCCC"/>
     </shape>
     

   • 选中的圆角长条形（dot_selected.xml）：

     <shape xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
         <size android:width="24dp" android:height="8dp"/>
         <corners android:radius="4dp"/>
         <solid android:color="#FF4081"/>
     </shape>
     

2. 编写状态选择器（dot_selector.xml）

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/dot_selected" android:state_selected="true"/>
       <item android:drawable="@drawable/dot_unselected"/>
   </selector>
   

3. 自定义Indicator容器（继承LinearLayout）

   class CustomPagerIndicator @JvmOverloads constructor(
       context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
   ) : LinearLayout(context, attrs, defStyleAttr) {
   
       private var dotCount = 0
       private var currentPosition = 0
       private val dotSize = resources.getDimensionPixelSize(R.dimen.dot_size)
       private val dotSpacing = resources.getDimensionPixelSize(R.dimen.dot_spacing)
   
       fun bindViewPager2(viewPager2: ViewPager2) {
           dotCount = viewPager2.adapter?.itemCount ?: 0
           currentPosition = viewPager2.currentItem
           createIndicatorDots()
           // 监听ViewPager页面切换
           viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
               override fun onPageSelected(position: Int) {
                   super.onPageSelected(position)
                   updateSelectedDot(position)
               }
           })
       }
   
       private fun createIndicatorDots() {
           removeAllViews()
           for (i in 0 until dotCount) {
               val dot = ImageView(context)
               dot.setImageResource(R.drawable.dot_selector)
               dot.isSelected = (i == currentPosition)
               val params = LayoutParams(dotSize, dotSize)
               params.setMargins(dotSpacing / 2, 0, dotSpacing / 2, 0)
               addView(dot, params)
           }
       }
   
       private fun updateSelectedDot(position: Int) {
           getChildAt(currentPosition)?.isSelected = false
           getChildAt(position)?.isSelected = true
           currentPosition = position
       }
   }
   

4. 在布局中组合ViewPager2和自定义指示器

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">
   
       <androidx.viewpager2.widget.ViewPager2
           android:id="@+id/viewPager"
           android:layout_width="match_parent"
           android:layout_height="200dp"/>
   
       <com.yourpackage.CustomPagerIndicator
           android:id="@+id/indicator"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:orientation="horizontal"
           android:layout_marginTop="16dp"/>
   </LinearLayout>
   

5. 在代码中绑定关联

   val viewPager = findViewById<ViewPager2>(R.id.viewPager)
   val indicator = findViewById<CustomPagerIndicator>(R.id.indicator)
   viewPager.adapter = YourPagerAdapter() // 替换成你的PagerAdapter
   indicator.bindViewPager2(viewPager)
   

方案二：用第三方库快速实现 #

如果不想自定义，可使用成熟的第三方库简化开发，比如com.tbuonomo:dotsindicator，通过配置属性就能实现类似效果：

<com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:dotsColor="#CCCCCC"
    app:dotsSize="8dp"
    app:dotsSpacing="16dp"
    app:selectedDotColor="#FF4081"
    app:selectedDotWidth="24dp"/>

代码中绑定ViewPager2：

val indicator = findViewById<WormDotsIndicator>(R.id.indicator)
indicator.setViewPager2(viewPager)

内容的提问来源于stack exchange，提问作者Chathura Karunanayaka