在fragment_container.xml中
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:ignore="MissingConstraints">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout_book"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager_book"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
在activity_main中静态加载fragment
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:fitsSystemWindows="true"
tools:ignore="MissingConstraints">
<fragment class="com.example.englishstudy.ui.book.BookFragment"
android:id="@+id/dsk"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
在MainActivity文件中
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
再需要弄个适配器,设置TabItem的数目以及viewpager对应要加载的Fragment
class BookAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
override fun getItemCount(): Int {
return 4
}
override fun createFragment(position: Int): Fragment {
return when(position){
0 -> {
BookListFragment()
}
1 -> {
ListenFragment()
}
2 -> {
BookListFragment()
}
else ->{
BookListFragment()
}
}
}
}
最后在Fragment中完成具体的操作
利用 TabLayoutMediator 将TabLayout和ViewPager2之间的联动
利用addOnTabSelectedListener监听TabItem的点击
class BookFragment: Fragment() {
private var _binding: FragmentBookContainerBinding? = null
private val binding
get() = _binding!!
private val TAG = "BookFragment"
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
_binding = FragmentBookContainerBinding.inflate(layoutInflater,container,false)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.viewPagerBook.adapter = BookAdapter(this)
TabLayoutMediator(binding.tabLayoutBook,binding.viewPagerBook) { tab, position ->
when(position){
0 -> tab.text = "阿萨德"
1 -> tab.text = "请王尔德"
2 -> tab.text = "定金付货款"
else -> tab.text = "觉得很疯狂”"
}
}.attach()
binding.tabLayoutBook.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
// 点击
override fun onTabSelected(tab: TabLayout.Tab?) {
logD(TAG,"addOnTabSelectedListener111 ${tab!!.position}")
when(tab.position) {
0 -> tab_num = 0
1 -> tab_num = 1
2 -> tab_num = 2
3 -> tab_num = 3
}
}
// 释放点击
override fun onTabUnselected(tab: TabLayout.Tab?) {
logD(TAG,"addOnTabSelectedListener222 ${tab!!.position} ")
}
override fun onTabReselected(tab: TabLayout.Tab?) {
logD(TAG,"addOnTabSelectedListener333 ")
}
})
}
}
期间出现的问题:尝试在TabLayout下直接添加TabItem,出现 Error inflating class fragment 的错误,具体原因不明
解决方法:去掉TabItem中的 id 即可
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout_book"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.google.android.material.tabs.TabItem
android:id="@+id/tab_item0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<com.google.android.material.tabs.TabItem
android:id="@+id/tab_item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<com.google.android.material.tabs.TabItem
android:id="@+id/tab_item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</com.google.android.material.tabs.TabLayout>