步骤:
1.引入依赖
dependencies {
// For the latest version number of ViewPager2, please refer to the official page.
// Link: https://developer.android.com/jetpack/androidx/releases/viewpager2
implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha04'
}
2.主布局引入viewpager与TabLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tuesday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday" />
</com.google.android.material.tabs.TabLayout>
<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/pager"/>
</LinearLayout>
3.定义RecyclerView Adapter和单元布局
class viewpagerAdpter(var list:List<person>) : RecyclerView.Adapter<viewpagerAdpter.Holder>() {
class Holder(var itemView: View) : RecyclerView.ViewHolder(itemView) {
var imag=itemView.findViewById<ImageView>(R.id.image)
var nick=itemView.findViewById<TextView>(R.id.name)
var des=itemView.findViewById<TextView>(R.id.description)
fun binddata(postion:Int,list:List<person>){
imag.setImageResource(list[position].img)
nick.setText(list[position].name)
des.setText(list[position].description)
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): viewpagerAdpter.Holder {
return Holder(LayoutInflater.from(parent.context).inflate(R.layout.item,parent,false))
}
override fun onBindViewHolder(holder: viewpagerAdpter.Holder, position: Int) {
holder.binddata(position,list)
}
override fun getItemCount(): Int {
return list.size
}
}
item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/image"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/name"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/description"/>
</LinearLayout>
4.使用ViewPager2 绑定RecyclerView Adapter并与TabLayout集成
class MainActivity : AppCompatActivity() {
var list=ArrayList<person>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initdata()
var pager = findViewById<ViewPager2>(R.id.pager)
var tab = findViewById<TabLayout>(R.id.tab)
pager.adapter = viewpagerAdpter(list)
TabLayoutMediator(
tab,
pager,
object : TabLayoutMediator.TabConfigurationStrategy {
override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
tab.text=list[position].name
// tab.icon=getDrawable(R.drawable.ic_launcher)
}
}).attach() //一定别忘了attach()!!!
}
private fun initdata() {
list.add(person("鸣人",R.drawable.mingren,R.string.ming))
list.add(person("佐助",R.drawable.zuozhu,R.string.zuo))
list.add(person("小樱",R.drawable.xiaoying,R.string.ying))
}
}