viewpager2与TabLayout联动

步骤:
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))
    }
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值