CoordinatorLayout使用总结

作者: 午时已到咯 | 来源:发表于2016-11-30 12:03 被阅读2439次

CoordinatorLayout 实现了多种Material Design中提到的滚动效果

概况

CoordinatorLayout协调布局之间的动画。

[x] AppBarLayout必须是CoordinatorLayout的直接子View。不使用actionbar而是使用toolbar，注意更改theme为noactionbar。
[x] 定义AppBarLayout与滚动视图之间的联系。在RecyclerView或者任意支持嵌套滚动的view添加app:layout_behavior。一个特殊的字符串资源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用来通知AppBarLayout这个特殊的view何时发生了滚动事件，这个behavior需要设置在触发事件（滚动）的view之上。

1、自定义的Behavior

CoordinatorLayout中的一个抽象类。

public abstract static class Behavior<V extends View> {
      public Behavior() {
      }

      public Behavior(Context context, AttributeSet attrs) {
      }
}

注意：构造函数一定要重载(xml中根据)，泛型一般View即可

在自定义Behavior的时候，我们需要关心的两组四个方法，为什么分为两组呢？看一下下面两种情况：
1、某个view监听另一个view的状态变化，例如大小、位置、显示状态等
2、某个view监听CoordinatorLayout里的滑动状态
对于第一种情况，我们关心的是：
layoutDependsOn和onDependentViewChanged方法，
对于第二种情况，我们关心的是：
onStartNestedScroll和onNestedPreScroll方法。

1、layoutDependsOn决定了关心谁 onDependentViewChanged决定了怎样的做出变化

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof TextView;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        int offset=dependency.getTop()-child.getTop();
        ViewCompat.offsetTopAndBottom(child,offset);
        return true;
    }

效果：让一个textview跟随另一个textview 移动
2、

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes& ViewCompat.SCROLL_AXIS_VERTICAL)!=0;
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
        int leftScrolled=target.getScrollY();
        Log.e(TAG,"滑动距离"+leftScrolled);
        child.setScrollY(leftScrolled);
    }

    @Override
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY, boolean consumed) {
        ((NestedScrollView)child).fling((int) velocityY);
        return true;
    }

onStartNestedScroll 中表示垂直滑动 fling表示手指停下时继续滚动
效果：让一个scrollvew 跟随另一个scrollview 移动

2、悬浮式toolbar

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_coordinate"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/main_appbar"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:background="#f00"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_recycler"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        ></android.support.v7.widget.RecyclerView>

</android.support.design.widget.CoordinatorLayout>

效果：

悬浮toolbar.gif

app:layout_scrollFlags属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。可以使用的其他flag有：
enterAlways: 一旦向上滚动这个view就可见。
enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

其中的 > app:layout_behavior="@string/appbar_scrolling_view_behavior"是可以没有的(那为啥还要加上？)

延伸一下利用自定义的behavior再加一个底部栏：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_coordinate"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/main_appbar"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:background="#f00"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_recycler"
        ></android.support.v7.widget.RecyclerView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/main_bottom"
        android:orientation="horizontal"
        android:background="#fff"
        android:layout_gravity="bottom"
        app:layout_behavior="com.linewow.xhyy.coordinatordemo3.FooterBehaviorDependAppBar"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/main_bottom_tv"
            android:text="这是我的底部栏"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

其中behavior：

public class FooterBehaviorDependAppBar extends CoordinatorLayout.Behavior<View> {
    private String TAG="FooterBehaviorDependAppBar";
    public FooterBehaviorDependAppBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
         return dependency instanceof AppBarLayout;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.abs(dependency.getTop());
        child.setTranslationY(translationY);
        return true;
    }
}

效果：

device-2016-11-24-123059.gif

3、CollapsingToolbarLayout和Toolbar

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/appbar_coor"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="260dp"
        >
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main_coor2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:collapsedTitleGravity="center"
            app:expandedTitleGravity="center|bottom"
            app:expandedTitleMarginBottom="-200dp"
          >

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetStart="0dp"
                app:layout_scrollFlags="scroll|enterAlways">
            </android.support.v7.widget.Toolbar>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:text="123"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/ic_launcher"
                    android:layout_centerInParent="true"
                    />
            </RelativeLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:background="#f00"
        android:id="@+id/main_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout的设置使得toolbar出现拉伸的效果
CollapsingToolbarLayout：

 <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main_coor2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:collapsedTitleGravity="center"
            app:expandedTitleGravity="center|bottom"
            app:expandedTitleMarginBottom="-200dp"
          >
          ...

contentScrim:渐变成的颜色
collapsedTitleGravity：折叠时题目的gravity
expandedTitleGravity：伸展时的gravity

整个题目变化的动画的起止状态都是在这里设置的，和toolbar没有关系，但是toolbar会造成一些影响：

1、

           <android.support.v7.widget.Toolbar
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               >
               <RelativeLayout
                   android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   >
                   <TextView
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="toolbar的题目"/>
               </RelativeLayout>
           </android.support.v7.widget.Toolbar>

此时是没有题目显示的，整个CollapsingToolbarLayout只显示toolbar，因为toolbar的子view match_parent 题目是无法显示的所以是没有title的动画变化的

2、

app:contentInsetStart="0dp"

需要加上，否则CollapsingToolbarLayout中的折叠时的题目总会和左边有间距

3、

app:layout_collapseMode="pin"

默认时toolbar 随着collapse的压缩被挤出去了，如图所示toolbar的位置一直在假toolbar的位置上只不过没有显示而已。
如果加上app:layout_collapseMode="pin" toolbar不会有任何移动一直在最上方。由于toolbar是看不见的界面上没有任何区别，但是当更新collapse中的view时（view的位置恰好和toolbar重叠）此时collaps的title便会消失掉了！！！所以不要加pin或parallax。

title会消失的demo

所以有时为了产品需求，写一个空的toolbar 使得标题可以看到title动画变化同时在collapse中加入相应的icon。

device-2016-11-29-200026.gif

这里多注意title的参数设置，折叠和展开时的title显示是动画的起始位置

4、加入图像

视差图像时，app:layout_collapseMode="parallax"

 <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax" />

CoordinatorLayout使用总结

概况

1、自定义的Behavior

2、悬浮式toolbar

3、CollapsingToolbarLayout和Toolbar

4、加入图像

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android知识

Android