应用场景
- 引导界面、相册多图片预览
- 多Tab页面、App导航
- 广告播放展示
使用步骤
- 添加依赖
- xml布局中引用viewPager
- 声明数组,将图片存入
- 创建适配器,完成资源配置
- 为viewpager设置适配器
1.添加依赖
build.grandle
dependencies {
implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha02'
}
2. xml布局中引用viewPager
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pagers"
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="@+id/dots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="160dp">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/dot_selected"/>
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/dot_unselected"/>
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/dot_unselected"/>
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/dot_unselected"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
class MainActivity : AppCompatActivity() {
var pics: MutableList<Int> = ArrayList()
var dots: LinearLayout? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//3. 声明数组,将图片存入
pics.add(R.mipmap.bg1)
pics.add(R.mipmap.bg2)
pics.add(R.mipmap.bg3)
pics.add(R.mipmap.bg4)
//4. 创建适配器,完成资源配置
//实例化适配器(RecyclerView.Adapter)
val adapter: RecyclerView.Adapter<*> = object : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
//创建
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
//此时用的布局是ViewPager每一页中用来乘放图片的布局
//该布局不设置任何控件,因为会直接将图片作为根布局的背景
val v = LayoutInflater.from(this@MainActivity).inflate(R.layout.item, parent, false)
return ViewHolder(v)
}
//绑定(为ViewHolder里面的控件设置显示内容)
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
val h = holder as MainActivity.ViewHolder
h.container.setBackgroundResource(pics[position])
}
//数量
override fun getItemCount(): Int {
return pics.size
}
}
//5. 为viewpager设置适配器
val pagers = findViewById<ViewPager2>(R.id.pagers)
pagers.adapter = adapter
var myDots = dots
myDots = findViewById(R.id.dots)
pagers.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
for (i in 0 until myDots.childCount) {
(myDots.getChildAt(i) as ImageView).setBackgroundResource(R.drawable.dot_unselected)
}
(myDots.getChildAt(position) as ImageView).setBackgroundResource(R.drawable.dot_selected)
}
})
}
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var container: LinearLayout = itemView.findViewById(R.id.container)
}
}