Android Studio ViewPager2 底部圆点指示器应用设计

介绍

ViewPager2 是 AndroidX 中的一个视图容器，用于在 Android 应用程序中实现滑动页面。底部圆点指示器是一种常见的页面指示器，用于显示当前所在页面的位置。本文将介绍如何在 Android Studio 中使用 ViewPager2 和底部圆点指示器来设计一个交互友好的应用程序。

步骤

第一步：导入依赖

首先，在项目的 build.gradle 文件中，添加以下依赖：

dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

第二步：布局文件

在布局文件中，添加一个 ViewPager2 和一个 LinearLayout 作为底部圆点指示器的容器。例如：

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<LinearLayout
    android:id="@+id/dotsLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="8dp" />

第三步：适配器和数据源

创建一个适配器类，继承自 ViewPager2 的 RecyclerView.Adapter，用于为 ViewPager2 提供数据和视图。同时，定义一个数据源，用于存储页面的内容。

class ViewPagerAdapter(private val items: List<String>) : RecyclerView.Adapter<ViewPagerAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = items[position]
        holder.itemView.textView.text = item
    }

    override fun getItemCount(): Int {
        return items.size
    }
}

val items = listOf("Page 1", "Page 2", "Page 3")

第四步：设置 ViewPager2 和底部圆点指示器

在 Activity 中，为 ViewPager2 设置适配器和数据源，并创建底部圆点指示器。

val viewPager: ViewPager2 = findViewById(R.id.viewPager)
val dotsLayout: LinearLayout = findViewById(R.id.dotsLayout)

val adapter = ViewPagerAdapter(items)
viewPager.adapter = adapter

createDotsIndicator()

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        selectDot(position)
    }
})

private fun createDotsIndicator() {
    val dots = arrayOfNulls<ImageView>(adapter.itemCount)

    for (i in dots.indices) {
        dots[i] = ImageView(this)
        dots[i].setImageDrawable(ContextCompat.getDrawable(applicationContext, R.drawable.dot_unselected))
        
        val params = LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.WRAP_CONTENT,
            LinearLayout.LayoutParams.WRAP_CONTENT
        )
        params.setMargins(8, 0, 8, 0)
        dotsLayout.addView(dots[i], params)
    }
    
    selectDot(0)
}

private fun selectDot(position: Int) {
    val childCount = dotsLayout.childCount
    
    for (i in 0 until childCount) {
        val dot = dotsLayout.getChildAt(i) as ImageView
        
        if (i == position) {
            dot.setImageDrawable(ContextCompat.getDrawable(applicationContext, R.drawable.dot_selected))
        } else {
            dot.setImageDrawable(ContextCompat.getDrawable(applicationContext, R.drawable.dot_unselected))
        }
    }
}

第五步：美化标题

使用 Markdown 进行美化标题，你可以使用 "#" 符号来生成标题，并使用以下示例进行格式化：

# Android Studio ViewPager2 底部圆点指示器应用设计

结论

通过使用 Android Studio 的 ViewPager2 和底部圆点指示器，我们可以轻松地实现一个滑动页面，并提供友好的交互体验。希望本文能够帮助你设计出更好的 Android 应用程序。

参考资料：

本文来自极简博客，作者：柠檬微凉，转载请注明原文链接：Android Studio ViewPager2 底部圆点指示器应用设计