效果图

仿简书个人主页.gif

整体布局

FrameLayout+CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager

整体布局.png

关键代码

监听AppBarLayout滑动事件，StatusBar和Toolbar颜色随着其滑动而不断改变。

app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
    val ratio = Math.abs(verticalOffset) * 1.0f / appBarLayout.totalScrollRange
    view_status_height.setBackgroundColor(ColorUtils.blendARGB(Color.TRANSPARENT, Color.WHITE, ratio))      
    view_toolbar_bg.setBackgroundColor(ColorUtils.blendARGB(Color.TRANSPARENT, Color.WHITE, ratio))
    iv_toolbar_back.isSelected = ratio >= 0.5
    iv_toolbar_nav.isSelected=ratio >= 0.5
    iv_toolbar_search.isSelected = ratio >= 0.5
    toolbar_title.visibility = if (ratio >= 0.5) View.VISIBLE else View.INVISIBLE
    ImmersionBar.with(this@JSUserInfoActivity).statusBarDarkFont(ratio >= 0.5).init()
})

GitHub

https://github.com/kongpf8848/AndroidWorld