【吸顶效果 CoordinatorLayout AppBarLayout CollapsingToolbarLayout NestedScrollView】

总结

怎样实现吸顶，用白话说：

• 外层用CooridnateLayout，里面放NestScrollView、CoordinateLayout、AppBarLayout
  • CooridnateLayout协调子View的Layout，注意Gravity的使用，防止View间有空隙
• 滑动组件放在NestScrollView、CoordinateLayout里
  • NestScrollView添加behavior
  • 实战遇到问题：n层布局后是 一个RecyclerView，那用CoordinateLayout，用NestScrollView遇到问题（可以话，但是没有上拉、下拉刷新了）
• AppBarLayout里放随 滑动组件 一起动的View
  • 直接子View，跟着一起滑动 （吸顶，不滑到消失）
  • CollapsingToolbarLayout的子View （滑到消失）

GitHub Demo 地址

CoordinatorLayout

是一个超级FrameLayout，协调各个子布局

应用场景

1. 设置对View的Action产生相应的behavior（行为）
2. 设置View 的依赖关系（设置 layout_anchor），以此产生联动效果
   • 做动画时用
   • 可跨层级调用

API

• Behaviors
  • 抽屉滑动效果
  • 钉主的Button
• setAnchorId
  • 任意的子View，例如实现一个View相对于另一个View的悬浮效果了
• LayoutParams.insetEdge
  • 值为Gravity的枚举，设置如何嵌套在CoordinatorLayout中
• LayoutParams.dodgeInsetEdges
  • 值为Gravity的枚举，相同的值会一起移动

behavior接口例子

 
 //是否依赖
     public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull V child,
                @NonNull View dependency) {
// 联动效果
     public boolean onDependentViewChanged(CoordinatorLayout parent, YourView child, View dependency) {

// 自定义behavior
public class CustomBehavior extends CoordinatorLayout.Behavior<CircleImageView> {

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
        return dependency instanceof Toolbar;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
        int[] dependencyLocation = new int[2];
        int[] childLocation = new int[2];

        dependency.getLocationInWindow(dependencyLocation);
        child.getLocationInWindow(childLocation);

        float diff = childLocation[1] - dependencyLocation[1];
        if(diff > 0) {
            float scale = diff/(float)childLocation[1];
            Log.d(TAG, "scale == " + scale);
            child.setScaleX(1+scale);
            child.setScaleY(1+scale);
        }
        return false;
    }
 

AppBarLayout

• orientation为vertical的LinearLayout
• 用于实现Material Design中 TitleBar的滑动效果
  • AppBarLayout.LayoutParams.setScrollFlags(int)
  • app:layout_scrollFlags.

应用情景

• 一般为CoordinatorLayout的 直接子布局（否则部分属性不能用）
• 一般有个 兄弟View（如NestScrollView），来判断何时滑动
• 用于包含ToolBar
• 为子View提供期望的scroll 行为（子View通过 app:layout_scrollFlags 设置）
  • scroll 是否可以scroll出屏幕
  • enterAlways
    • 和scroll一起用： 向上滑 收起；向下滑，可见
    • 情景：用于 快速返回顶部 那种icon
  • enterAlwaysCollapsed
    • 配合 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" android:minHeight="20dp"
    • collpase不可见，滑动超过 minHeight，才漏出来
  • exitUntilCollapsed
    • view will collapse during an upward scrolling motion until the minHeight threshold is met,
    • View在 向上滑动超过 minHeight阈值时 不可见
  • snap （拍下去，收起的意思）滑到最后 部分可见时，是否要归到最近的边缘。防止出现 半显示半不显示的状态
    • （配合scroll使用， app:layout_scrollFlags="snap|scroll")

API

AppBarLayout extends LinearLayout implements CoordinatorLayout.AttachedBehavior
	- Behavior getBehavior(); 

CollapsingToolbarLayout

collapse坍缩 expand展开， 跟随滑动可有 expand变为collapse； scrim 亚麻布，遮盖物

• Toolbar 的一个包装类，实现collapsing app bar效果（就是隐藏部分View）
• 设计为AppBarLayout的直接子View
• FrameLayout
• 相关教程
• 测试的设置 layout_scrollFlags 无效

属性

• layout_collapseMode
  • pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。
    • 测试的对于普通View没啥区别
  • parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，
    实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
    • layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。

特性

• Collapsing title （collapse相对小于 expand时的title字体）
  • setTitle(CharSequence)
• Content scrim
• Status bar scrim
  • setStatusBarScrim(Drawable)
  • LOLLIPOP版本有用
• Parallax scrolling children （视差，折叠效果）
  • parallax fashion
• Pinned position children
  • 在collapsing （坍缩）时，View固定在某个globally 坐标上
  • CollapsingToolbarLayout.LayoutParams.COLLAPSE_MODE_PIN.

情景

下拉在minHeight（50dp）时，才漏出被collapse的View

 <com.google.android.material.appbar.CollapsingToolbarLayout
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                android:minHeight="50dp"

总结

• CoordinatorLayout 作为超级FrameLayout 统筹全局
  • 处理子View的联动，自定义behavior（view1滑动，view2跟着放大了）
  • 子View之间跨层级跟踪，设置layout_anchor (view1滑动，button1跟着滑动）
• AppBarLayout作为vertical的LinearLayout
  • 侧重于滑动，对子View产生的影响
  • 子View一般是相应滑动，又不会消失（collapse 坍缩）
• CollapsingToolbarLayout
  • 作为AppBarLayout的直接子View
  • 侧重于 因滑动而消失的View（Parallax折叠： 大背景图、超长折叠文字）

注意

• ScrollView不要随便加Gravity，会导致ScrollView和AppLayout之间空隙。Behavior 使ScrollView 在 AppLayout的下面。