一、Toolbar + TabLayout + Viewpager2

效果图：
iShot2020-08-1923.23.21.gif
xml 文件：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto">
  7.     <com.google.android.material.appbar.AppBarLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         >
  12.         <androidx.appcompat.widget.Toolbar
  13.             android:id="@+id/tb_tabvp_tb"
  14.             android:layout_width="match_parent"
  15.             android:layout_height="wrap_content"
  16.             app:layout_scrollFlags="scroll|enterAlways|snap"
  17.             app:title="测试tablayout相关"
  18.             app:titleTextColor="@color/white"
  19.             app:navigationIcon="@mipmap/ic_navigation_back_white">
  22.         </androidx.appcompat.widget.Toolbar>
  24.         <com.google.android.material.tabs.TabLayout
  25.             android:id="@+id/tl_tabvp_tab"
  26.             android:layout_width="match_parent"
  27.             android:layout_height="45dp"
  28.            app:tabGravity="fill"
  29.             android:background="@color/white"/>
  31.     </com.google.android.material.appbar.AppBarLayout>
  33.     <androidx.viewpager2.widget.ViewPager2
  34.         android:id="@+id/vp_tabvp_vp"
  35.         android:layout_width="match_parent"
  36.         android:layout_height="match_parent"
  37.         app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
  39. </androidx.coordinatorlayout.widget.CoordinatorLayout>

activity:

  1. class ToolbarTabVpActivity: AppCompatActivity() {
  2.     val tabs = arrayOf("关注", "推荐", "最新")
  3.     override fun onCreate(savedInstanceState: Bundle?) {
  4.         super.onCreate(savedInstanceState)
  5.         setContentView(R.layout.activity_tabvp)
  7.         tb_tabvp_tb.setNavigationOnClickListener {
  8.             finish()
  9.         }
  11.         val fragments = arrayListOf<Fragment>()
  12.         for ( i in 0..2) {
  13.             val instance = TabFragment.instance(i)
  14.             fragments.add(instance)
  15.         }
  16.         //fragments.add(TabFragment.instance(0))
  17.         val adapter = TabAdapter(this,fragments)
  18.         vp_tabvp_vp.adapter = adapter
  20.         //将TabLayout和ViewPager2关联起来
  21.         val metiaor: TabLayoutMediator = TabLayoutMediator(tl_tabvp_tab,vp_tabvp_vp,
  22.             TabLayoutMediator.TabConfigurationStrategy { tab, position ->
  23.                 tab.text = tabs[position]
  24.             })
  25.         metiaor.attach()
  27.         //tablayout change
  28.         tl_tabvp_tab.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{
  29.             override fun onTabReselected(tab: TabLayout.Tab?) {
  31.             }
  33.             override fun onTabUnselected(tab: TabLayout.Tab?) {
  35.             }
  37.             override fun onTabSelected(tab: TabLayout.Tab?) {
  39.             }
  41.         })
  44.     }
  45. }

fragment:

  1. class TabFragment : Fragment() {
  3.     companion object{
  4.         fun instance(type: Int): TabFragment {
  5.             val bundle = Bundle()
  6.             bundle.putInt("type",type)
  7.             val viewPagerFragment = TabFragment()
  8.             viewPagerFragment.arguments = bundle
  9.             return viewPagerFragment
  10.         }
  11.     }
  13.     override fun onCreateView(
  14.         inflater: LayoutInflater,
  15.         container: ViewGroup?,
  16.         savedInstanceState: Bundle?
  17.     ): View? {
  18.         return inflater.inflate(R.layout.fg_tabvp,container, false)
  19.     }
  21.     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  22.         super.onViewCreated(view, savedInstanceState)
  23.         val type = arguments?.getInt("type")
  24.         LogUtils.e("--------$type")
  25.     }
  26. }

fragment 简单布局：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.core.widget.NestedScrollView
  3.     xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  6.     <TextView
  7.         android:layout_width="match_parent"
  8.         android:layout_height="wrap_content"
  9.         android:text="@string/large_text"
  10.         android:layout_margin="@dimen/m10"/>
  11. </androidx.core.widget.NestedScrollView>

adapter:

  1. class TabAdapter(fragmentActivity: FragmentActivity,
  2.                  private val fragments: List<Fragment>): FragmentStateAdapter(fragmentActivity) {
  3.     override fun getItemCount(): Int = fragments.size
  5.     override fun createFragment(position: Int): Fragment = fragments[position]
  6. }

二、CollaspingToolbarLayout + TabLayout + Viewpager2

效果图：
iShot2020-08-1923.50.18.gif
布局文件：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto">
  7.     <com.google.android.material.appbar.AppBarLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content">
  11.         <com.google.android.material.appbar.CollapsingToolbarLayout
  12.             android:id="@+id/ctl_collasping_tab_collapsing"
  13.             android:layout_width="match_parent"
  14.             android:layout_height="220dp"
  15.             app:contentScrim="@color/blue_74D3FF"
  16.             app:title="测试标题"
  17.             app:layout_scrollFlags="scroll|exitUntilCollapsed">
  18.             <ImageView
  19.                 android:layout_width="match_parent"
  20.                 android:layout_height="match_parent"
  21.                 android:fitsSystemWindows="true"
  22.                 android:scaleType="centerCrop"
  23.                 android:src="@mipmap/wuhuang"
  24.                 app:layout_collapseMode="parallax" />
  26.             <androidx.appcompat.widget.Toolbar
  27.                 android:id="@+id/tb_collasping_tab_tb"
  28.                 android:layout_width="match_parent"
  29.                 android:layout_height="?attr/actionBarSize"
  30.                 app:layout_collapseMode="pin"
  31.                 app:navigationIcon="@mipmap/ic_navigation_back_white"
  32.                 app:titleTextColor="@color/white"
  33.                 />
  35.         </com.google.android.material.appbar.CollapsingToolbarLayout>
  36.         <com.google.android.material.tabs.TabLayout
  37.             android:id="@+id/tl_collasping_tab_tab"
  38.             android:layout_width="match_parent"
  39.             android:layout_height="45dp"
  40.             android:background="@color/white"/>
  42.     </com.google.android.material.appbar.AppBarLayout>
  44.     <androidx.viewpager2.widget.ViewPager2
  45.         android:id="@+id/vp_collasping_tab_vp"
  46.         android:layout_width="match_parent"
  47.         android:layout_height="match_parent"
  48.         app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
  51. </androidx.coordinatorlayout.widget.CoordinatorLayout>

activity:

  1. class CollaspingTabActivity: AppCompatActivity() {
  2.     val tabs = arrayOf("关注", "推荐", "最新")
  3.     override fun onCreate(savedInstanceState: Bundle?) {
  4.         super.onCreate(savedInstanceState)
  5.         setContentView(R.layout.activity_collasping_tab)
  7.         tb_collasping_tab_tb.setNavigationOnClickListener { finish() }
  9.         val fragments = arrayListOf<Fragment>()
  10.         for ( i in 0..2) {
  11.             val instance = TabFragment.instance(i)
  12.             fragments.add(instance)
  13.         }
  14.         //fragments.add(TabFragment.instance(0))
  15.         val adapter = TabAdapter(this,fragments)
  16.         vp_collasping_tab_vp.adapter = adapter
  18.         //将TabLayout和ViewPager2关联起来
  19.         val metiaor: TabLayoutMediator = TabLayoutMediator(tl_collasping_tab_tab,vp_collasping_tab_vp,
  20.             TabLayoutMediator.TabConfigurationStrategy { tab, position ->
  21.                 tab.text = tabs[position]
  22.             })
  23.         metiaor.attach()
  24. //设置标题相关
  25.         ctl_collasping_tab_collapsing.run {
  26.             setExpandedTitleColor(ContextCompat.getColor(this@CollaspingTabActivity,R.color.transparent))
  27.             setCollapsedTitleTextColor(ContextCompat.getColor(this@CollaspingTabActivity,R.color.white))
  28.         }
  29.     }
  30. }

fragment, adapter 和上面都一样

三、地址和参考

demo