CoordinatorLayout 使用

作者: yuzhiyi_宇 | 来源:发表于2019-02-01 18:56 被阅读0次

CoordinatorLayout 是 Design Support Library 引入的一个功能强大的布局，本质上是一个增强型的 FrameLayout，布局方式默认是一层一层叠上去的，它可以使得不同视图组件直接相互作用，并协调动画效果。CoordinatorLayout 是基于定义在 Behaviors 中的规则集的，可以定义 CoordinatorLayout 内部的视图组件是如何相互作用并发生变化的。

配合 FAB Snackbar 使用

之前的 FloatingActionButton 和 Snackbar，为了实现 Snackbar 出现时 FAB 自动上移，Snackbar 消失时 FAB 自动往下移动，就需要将 CoordinatorLayout 作为 FAB 的父容器，相关使用方法，传送门 FloatActionButton 使用。

实现 Toolbar 隐藏效果

实现 Toolbar 隐藏效果。app:layout_scrollFlags="scroll|enterAlways" 属性设置滚动事件，至少启用 scroll 这个 flag，这个 Toolbar 才会滚出屏幕，否则它将一直固定在顶部。

xml 布局代码

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:background="@color/colorAccent"
            app:title="标题"
            app:titleTextColor="@android:color/white"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text1"
                android:textColor="@color/colorAccent"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text2"
                android:textColor="@color/colorAccent"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text3"
                android:textColor="@color/colorAccent"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text4"
                android:textColor="@color/colorAccent"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text5"
                android:textColor="@color/colorAccent"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

效果

Toolbar.gif

结合 CollapsingToobarLayout 实现 Toolbar折叠效果

CollapsingToolbarLayout，其作用是提供一个可以折叠的Toolbar。CollapsingToolbarLayout 继承自 FrameLayout。CollapsingToolbarLayout 设置 layout_scrollFlag 属性，可以控制包含在 CollapsingToolbarLayout 中的控件。比如mageView、Toolbar 在响应 layout_behavior 事件时做出相应的 scrollFlags 滚动事件。

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleGravity="right|bottom"
            app:collapsedTitleGravity="center"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                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:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                app:title="标题"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text1"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text2"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text3"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text4"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text5"
                android:textColor="@color/colorAccent" />

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout 属性	作用
app:contentScrim	用来设置 CollapsingToolbarLayout 收缩后最顶部的颜色
app:expandedTitleGravity	表示将此 CollapsingToolbarLayout 完全展开后，title 所处的位置，默认值是 left \| bottom
app:collapsedTitleGravity	表示当头部的 ImageView 消失后，title 回归到 Toolbar 的位置，默认值是 left。
app:layout_collapseMode	pin：固定模式，在折叠的时候最后固定在顶端；parallax：视差模式，在折叠的时候会有个视差折叠的效果

效果

CollapsingToobarLayout.gif

Behavior

CoordinatorLayout 中最经典的设计就是 Behavior，@string/appbar_scrolling_view_behavior 其对应着的就是 AppBarLayout.ScrollingViewBehavior。我们可以自定义 Behavior 来实现自己的组件和滑动交互。

自定义 Behavior 可以分为两种方法:

定义的 View 监听 CoordinatorLayout 里的滑动状态，需要注意onStartNestedScroll() 和 onNestedPreScroll 方法；
定义的View监听另一个 View 的状态变化,例如View的大小、位置和显示状态等，需要注意 layoutDependsOn 和 onDependentViewChanged 方法。

定义一个底部提示条，向上滚动的时候其就消失,向下滚动时就出现。

第一种方法代码：

public class FooterBehavior extends CoordinatorLayout.Behavior<View> {

    private int directionChange;
    public FooterBehavior(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
    }

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

    @Override
    public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull View child, @NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
        if (dy > 0 && directionChange < 0 || dy < 0 && directionChange > 0) {
            child.animate().cancel();
            directionChange = 0;
        }
        directionChange += dy;
        if (directionChange > child.getHeight() && child.getVisibility() == View.VISIBLE) {
            hide(child);
        } else if (directionChange < 0 && child.getVisibility() == View.INVISIBLE) {
            show(child);
        }
    }

    private void hide(final View view) {
        ViewPropertyAnimator viewPropertyAnimator = view.animate()
                .translationY(view.getHeight())
                .setInterpolator(new FastOutLinearInInterpolator())
                .setDuration(200);
        viewPropertyAnimator.setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                view.setVisibility(View.INVISIBLE);
            }
        });
        viewPropertyAnimator.start();
    }

    private void show(final View view) {
        ViewPropertyAnimator viewPropertyAnimator = view.animate()
                .translationY(0)
                .setInterpolator(new FastOutLinearInInterpolator())
                .setDuration(200);
        viewPropertyAnimator.setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                view.setVisibility(View.VISIBLE);
            }
        });
        viewPropertyAnimator.start();
    }
}

onStartNestedScroll()方法的返回值表明这次滑动我们要不要关心，这里我们关心的是Y轴方向上的。
onNestedPreScroll()方法则用于处理滑动，这个参数child就是我们定义的LinearLayout；dy 则是我们水平滑动的距离，向上滑动为正值，向下滑动则为负值。

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleGravity="right|bottom"
            app:collapsedTitleGravity="center"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                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:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                app:title="标题"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text1"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text2"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text3"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text4"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="text5"
                android:textColor="@color/colorAccent" />

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorAccent"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="15dp"
        app:layout_behavior=".design.FooterBehavior"> 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="自定义 Behavior"
            android:textColor="@android:color/white"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

LinearLayout 布局中添加了 app:layout_behavior=".design.FooterBehavior"。 .design.FooterBehavior 是我们自定义 Behavior 的路径，其中省略了根路径，也可以完整路径。

效果

Behavior.gif

第二种方法代码：

public class FooterBehavior2 extends CoordinatorLayout.Behavior<View> {

    public FooterBehavior2(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
    }

    @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 translatinY = Math.abs(dependency.getY());
        child.setTranslationY(translatinY);
        return true;
    }
}

xml 代码部分
只需要把 LinearLayout 的 app:layout_behavior 改成 .design.FooterBehavior2。

效果

Behavior2.gif

BottomSheetBehavior

BottomSheetBehavior 是 Android Support Library23.2 中引入的，它可以轻松实现底部动作条功能。

xml 布局代码

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="打开" />

    <LinearLayout
        android:id="@+id/design_bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:orientation="vertical"
        app:behavior_hideable="true"
        app:behavior_peekHeight="300dp"
        app:elevation="6dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:src="@mipmap/ic_launcher" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

java 代码

    private void initBottomSheetBehavior() {
        final BottomSheetBehavior bottomSheetBehavior= BottomSheetBehavior.from(findViewById(R.id.design_bottom_sheet));
        //设置默认先隐藏
        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
        findViewById(R.id.bt).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //根据状态不同显示隐藏
                if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                } else if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                }
            }
        });
        //设置监听事件
        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                //拖动
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                //状态变化
            }
        });
    }

效果

BottomSheetBehavior.gif

CoordinatorLayout 使用

配合 FAB Snackbar 使用

实现 Toolbar 隐藏效果

结合 CollapsingToobarLayout 实现 Toolbar折叠效果

Behavior

BottomSheetBehavior

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android 新技术学习