Top absorption is the method adopted by many applications in the market at present, such as JINGdong, Xianyu, Meituan, Meituan Takeout, Ele. me, Lianjia, shell Zhaofang and other home pages. If careful, other mainstream apps can also find the realization of this effect. I’d like to start with a sketch
Here is an example of ele. me:
Take a look at the idle fish:
Finally, the shell hunters (similar to the Homelands) :
No contrast, no harm, is it silky compared to mainstream apps?
Before the company’s project also has this demand, online for a long time to find this effect, the basic is to customize RecyclerView, and then to deal with sliding events, but the realization is not very ideal. Later, WHEN I did other projects, I used CoordinatorLayout, and I found that it could also achieve top absorption. I had to shout, “Google dad is so nice!”
Now to start the body, I always thought that CoordinatorLayout nesting is very complicated, so I don’t really want to use it, but the result is… How sweet!
Let’s take a look at the layout structure:
<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>
Copy the codeThe parent layout is CoordinatorLayout, and then two sub-layouts are respectively AppBarLayout and LinearLayoutCompat. The CollapsingToolbarLayout is nested below AppBarLayout. And then I simply put AppCompatImageView, LinearLayoutCompat TabLayout and ViewPage2
Here’s the full layout:
<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>
Copy the codePaste the business code below:
class MultiplexFragment : DataBindingFragment<FragmentMultiplexBinding, MultiplexViewModel>() { companion object { fun newInstance(): MultiplexFragment {return MultiplexFragment ()}} private val strArray = arrayOf (" concern ", "recommended", "video" and "live", "image", "jokes", Override fun initView(view: view, savedInstanceState: Bundle?) { mViewData? .apply { Glide.with(getThis()) The load (" https://wx2.sinaimg.cn/mw690/002Po4pSly1grt79wku06j61jk0rskjl02.jpg ") into (ivImage) / / this usage when fragments will not have a memory leak Although many fragments But every time is using 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()}} // Set the contents of the current page to null // br.xxxxviewModel is the corresponding XML file xxxxViewModel generated by kotlin-kapt by default override fun getDataBindingConfig(): DataBindingConfig? { return DataBindingConfig(layoutId = R.layout.fragment_multiplex,variableId = BR.MultiplexViewModel, vmClass = MultiplexViewModel::class.java) } }Copy the codeThe above is to achieve the top effect of all the code, anxious to use the children’s shoes can be directly taken in the past, not anxious can then look down, we should not only know, but also know why.
When I first learned about CoordinatorLayout, because of its folding effect, it was just an accident to use it for the top. One of the important properties in this transition is app:layout_collapseMode=”pin”, and there’s another property app:layout_collapseMode=”parallax” and we’ll change the property in the demo to parallax to see what the collapse looks like:
You can see that parallax hides the image with a fold, and pin hides the image with a scroll up.
For more information about CoordinatorLayout attributes, see: CoordinatorLayout Learning
Github address of Demo:
Android Jetpack best practices! Combined with MVVM rapid development, help developers understand Jetpack in depth!