吸顶是目前市场上很多应用都会采用的方式，例如京东、闲鱼、美团、美团外卖、饿了么、链家、贝壳找房等首页都有，如果细心的话，其他主流App也都能找到这种效果的实现。先奉上一个效果图
示例.gif
接下来是饿了么的示例：
饿了么.gif
再看下闲鱼的：
闲鱼.gif
最后是贝壳找房的（跟链家相似）:
贝壳找房.gif
没有对比就没有伤害，是不是比起主流应用也很丝滑？
之前公司项目也有这方面的需求，网上找了很久这种效果，基本都是自定义RecyclerView，然后去处理滑动事件，但是实现出来都不是很理想。后来做其他项目，用了一下CoordinatorLayout，无意间发现也可以实现吸顶，不得不高呼一声，谷歌爸爸真好！
下面开始正文，我一直认为CoordinatorLayout的布局嵌套特别复杂，所以不是很想用，不过做出来的效果...真香！
先看一下页面布局结构：
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
``````````
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.appcompat.widget.LinearLayoutCompat
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
````````
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
整个父布局是CoordinatorLayout，然后下面分了两个子布局，分别是AppBarLayout和LinearLayoutCompat，AppBarLayout下面嵌套的是CollapsingToolbarLayout，再下面我简单放了个AppCompatImageView，LinearLayoutCompat下面是TabLayout和ViewPage2
下面是完整的布局内容:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/iv_image"
app:layout_collapseMode="pin"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_200"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.appcompat.widget.LinearLayoutCompat
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
app:tabMode="scrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
下面贴上业务代码：
class MultiplexFragment : DataBindingFragment<FragmentMultiplexBinding, MultiplexViewModel>() {
companion object {
fun newInstance(): MultiplexFragment {
return MultiplexFragment()
}
}
private val strArray = arrayOf("关注", "推荐", "视频", "直播", "图片", "段子", "精华", "热门")
override fun initView(view: View, savedInstanceState: Bundle?) {
mViewData?.apply {
Glide.with(getThis())
.load("https://wx2.sinaimg.cn/mw690/002Po4pSly1grt79wku06j61jk0rskjl02.jpg").into(ivImage)
// 这种用法当fragment不会有内存泄露 虽然fragment很多 但是每次都是用的RecyclerFragment.newInstance()
viewPager2.adapter = object :FragmentStateAdapter(getThis()){
override fun getItemCount(): Int = strArray.size
override fun createFragment(position: Int): Fragment {
return RecyclerFragment.newInstance()
}
}
TabLayoutMediator(tabLayout,viewPager2){tab,position->
tab.text = strArray[position]
}.attach()
}
}
//配置当前页面的内容 各项参数都可为空
//BR.xxxxViewModel是kotlin-kapt插件默认生成的 对应xml文件里的xxxxViewModel
override fun getDataBindingConfig(): DataBindingConfig? {
return DataBindingConfig(layoutId = R.layout.fragment_multiplex,variableId = BR.MultiplexViewModel,
vmClass = MultiplexViewModel::class.java)
}
}
以上就是实现吸顶效果的所有代码了，急着用的童鞋可以直接拿过去交差了，不急的可以接着往下看，我们不仅要知其然，还要知其所以然。
刚开始了解CoordinatorLayout，是因为它的折叠效果，用它来做吸顶不过是意外发现。这其中转变的一个重要属性就是app:layout_collapseMode="pin"，它还有另一个属性app:layout_collapseMode="parallax"我们将demo中的属性改为parallax就可以看到折叠效果：
折叠.gif
可以看到parallax属性会将图片以折叠的效果隐藏，pin属性会将图片以向上滚动的效果隐藏。
关于CoordinatorLayout的更多属性可参考：
CoordinatorLayout 学习
demo的github地址：
