Android修行手册 - TabLayout全解析 - 和ViewPager联动

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣！！！

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）

欢迎关注公众号【空名先生】获取更多资源和交流！

👉前提

这是小空坚持写的Android新手向系列，欢迎品尝。

新手（√√√）

大佬（√）

👉实践过程

我们接着昨天的讲哈

😜和ViewPager联动

总共分为三步：

1. 为TabLayout添加tab
2. 给ViewPager设置adapter
3. 设置TabLayout和ViewPager联动

fragment_tab_item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragmentTabItem">
 
    <ImageView
        android:id="@+id/idFragmentTabItemImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
 
    <TextView
        android:id="@+id/idFragmentTabItemTxt"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/hello_blank_fragment"
        android:textSize="24sp" />
</FrameLayout>

FragmentTabItem.kt

private const val ARG_PARAM1 = "name"
private const val ARG_PARAM2 = "img"
 
class FragmentTabItem : Fragment() {
    // TODO: Rename and change types of parameters
    private var name: String? = null
    private var img: Int? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            name = it.getString(ARG_PARAM1)
            img = it.getInt(ARG_PARAM2)
        }
    }
 
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_tab_item, container, false)
    }
 
    override fun onStart() {
        super.onStart()
        idFragmentTabItemTxt.text = name
        //代码写的不严格 传递图片不是这么搞的。只是简单做个TabLayout的示例 不要纠结这哈
        idFragmentTabItemImg.setImageResource(img!!)
    }
    companion object {
        @JvmStatic
        fun newInstance(name: String,img:Int) =
            FragmentTabItem().apply {
                arguments = Bundle().apply {
                    putString(ARG_PARAM1, name)
                    putInt(ARG_PARAM2, img)
                }
            }
    }
}

activity_tab_layout.xml

<?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"
    android:orientation="vertical"
    tools:context=".TabLayoutActivity">
 
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/idTabLayoutFive"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:tabInlineLabel="true"
        app:tabRippleColor="@color/color_00ff00"
        app:tabUnboundedRipple="true"></com.google.android.material.tabs.TabLayout>
 
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/idViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

TabLayoutActivity.kt

class TabLayoutActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tab_layout)
        idTabLayoutFour.addTab(idTabLayoutFour.newTab().setText("这是"))
        idTabLayoutFive.addTab(idTabLayoutFive.newTab().setText("这是"), 0)
        idTabLayoutFive.addTab(idTabLayoutFive.newTab().setText("进行").setIcon(R.mipmap.icon_xin_no), 1)
        idTabLayoutFive.addTab(idTabLayoutFive.newTab().setText("动态"), true)
        idTabLayoutFive.addTab(idTabLayoutFive.newTab().setText("添加").setIcon(R.mipmap.icon_xin_no), 2)
        val tabFragmentList: MutableList<FragmentTabItem> = ArrayList()
        tabFragmentList.add(FragmentTabItem.newInstance("名字一",R.mipmap.study_one))
        tabFragmentList.add(FragmentTabItem.newInstance("名字二",R.mipmap.study_two))
        tabFragmentList.add(FragmentTabItem.newInstance("名字三",R.mipmap.study_three))
        tabFragmentList.add(FragmentTabItem.newInstance("名字四",R.mipmap.study_four))
        tabFragmentList.add(FragmentTabItem.newInstance("名字五",R.mipmap.study_five))
        val tabName = arrayOf("名字一", "名字二", "名字三", "名字四", "名字五")
        idViewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager,BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
            override fun getCount(): Int {
                return tabFragmentList.size
            }
            override fun getItem(position: Int): Fragment {
                return tabFragmentList[position]
            }
            override fun getPageTitle(position: Int): CharSequence? {
                //如果想要icon则可以继承TabLayout自定义一个  重写setTabsFromPagerAdapter方法
                return tabName[position]
            }
        }
        idTabLayoutFive.setupWithViewPager(idViewPager,true)
    }
}

细心的同学发现了，代码中进行了addTab里面的文本和真实展示的效果文本不一样啊。没错，在tabLayout.setupWithViewPager的时候，TabLayout中先将所有tabs remove了，然后取的PagerAdapter中的getPageTitle返回值添加的tab。

而且icon也没有了，如果你想要的话就可以继承TabLayout自定义一个  重写setTabsFromPagerAdapter方法。

👉其他

📢作者：小空和小芝中的小空

📢转载说明-务必注明来源：芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。