仿微信朋友圈 Toolbar 效果

Step1 简单介绍 CoordinatorLayout

• 作用：协调子 View
• 使用核心: Behavior
• 布局属性类似 FrameLayout

Behavior

两个概念：

Child：CoordinatorLayout 的子 View
Dependency：Child 依赖的 View

简单使用：

device-2018-08-30-233559.gif

定义 Behavior

class SimpleBehavior(context: Context, attrs: AttributeSet) : CoordinatorLayout.Behavior(context, attrs) {
    private val screenWidth: Int = context.resources?.displayMetrics?.widthPixels!!
    override fun layoutDependsOn(parent: CoordinatorLayout, child: Button, dependency: View): Boolean {
        //判断是否依赖的View
        return dependency is WithFingerTextView
    }
    // 当依赖的 View 位置 宽高发生变化时，执行这个方法
    override fun onDependentViewChanged(parent: CoordinatorLayout, child: Button, dependency: View): Boolean {
        val x = screenWidth - dependency.x - child.width
        // 更新 Child
        setPosition(child, x.toInt(), dependency.y.toInt())
        return true
    }
    private fun setPosition(v: View, x: Int, y: Int) {
        val layoutParams: CoordinatorLayout.LayoutParams = v.layoutParams as CoordinatorLayout.LayoutParams
        layoutParams.leftMargin = x
        layoutParams.topMargin = y
        v.layoutParams = layoutParams   
    }
}

布局中使用

Step2 结合 AppBarLayout CollaspsingLayout Toolbar

Toolbar 结合 AppBarLayout 才好玩

使用略过

AppBarLayout

• 继承自 LinearLayout，垂直方向布局
• 当某个可滚动的View滚动时，可定制它内部的子 View 实现何种动作

AppBarLayout 子 View 的动作

给子 View 设置 layout_scrollFlags 属性:

• scroll：子 View 跟随滚动事件一起移动，类似将 View 嵌入 ScrollView
• scroll | enterAlways：当 ScollView 向下滚动时，View 直接向下滚动。ScrollView 向上滚动时，View 也跟着上滚
• scroll | exitUnitCollaspsed：ScrollView 向上滚动时，View 先夺去滚动事件，滚到自己的最小高度，然后 ScrollView 接着滚动。ScrollView 向下滚动时，当 ScrollView 滚动到顶部时，View 开始滚动到默认高度。
• scroll | enterAlawys | enterAllwaysCollapsed：

通过 appbar_scrolling_view_behavior 将 NestedScrollView 和 AppBarLayout 关联。

Step3 CollaspsingToolbarLayout

针对 Toolbar

• 折叠 Title：当布局全部显示时 title 最大，随着上划逐步减小
  • setTitle
• 内容纱布：根据滚动的位置到达某个阈(yu)值，决定是否为 View 覆盖纱布
  • setContentScim
• 状态栏纱布：根据滚动的位置到达某个阈(yu)值，决定是否为状态栏覆盖纱布(5.0以上)
• 视差滚动子View：让子View的滚动速度比其他正常滚动的慢
  • layout_collapseModel:parallax
• 子 View 固定：Pin 模式
  • layout_collapseModel: pin

4 朋友圈 Toolbar 效果

collapsingToolbarLayout.title = " "
collapsingToolbarLayout.expandedTitleMarginStart = 0
appBarLayout.addOnOffsetChangedListener { appBarLayout, verticalOffset ->
    if (Math.abs(verticalOffset) >= appBarLayout.totalScrollRange) {
        collapsingToolbarLayout.title = "朋友圈"
    } else {
        collapsingToolbarLayout.title = " "
    }
}