Material Design之CoordinatorLayou

2018-02-10  本文已影响29人  谢尔顿

引言

CoordinatorLayout是design包中的一个控件，它具有实现子控件之间交互的作用，一般不单独使用，经常结合design包中的其他控件使用，下面会进行一些实例的讲解。

参考文章：

1.结合Snackbar使用

效果图：


<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gjj.gd.materialdesign.activity.ZhiHuActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_gravity="end|bottom"
        />

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


    @OnClick({R.id.fab})
    public void onViewClicked(View view) {
        Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG).setAction("cancel", new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        }).show();
    }

从上面例子中我们发现，当我们将CoordinatorLayout、FloatingActionButton与Snackbar结合起来简单使用时，会看到当Snackbar出现时，FloatingActionButton被顶上去，没有被Snackbar遮挡住。

2.结合AppBarLayout使用

效果图：


结合AppBarLayout使用

列表向上滑动，粉色部分也跟着向上滑动；列表向下滑动并且未滑动到起始位置时，粉色就会向下展开到一定高度，待列表完全向下滑动到起始位置，粉色部分才会完全打开。我们看看布局文件。

布局文件：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gjj.gd.materialdesign_v7.coordinatorlayout.CombineAppBarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/colorPrimary"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

对于AppBarLayout的直接子view，我们可以通过给子view设置layout_scrollFlags属性可以让子View具有滑动行为，该属性的值有五种情况：

接下来我们看看这几种组合的效果：


在上面效果的基础上我们去掉enterAlways后，列表向上滑动，粉色部分也跟着向上滑动；列表向下滑动并且滑动到起始位置时，粉色才跟着向下展开。

列表向上滑动，粉色部分也跟着向上滑动，但是由于exitUntilCollapsed的作用只能滑动到一定高度，并不能完全收缩；列表向下滑动并且滑动到起始位置时，粉色才会向下展开。

我们可能会发现，每种情况前面都加了scroll，因为这是粉色部分发生滚动的必要条件，如果没有设置scroll，那么我们将看不到任何效果，可以自己试一试。

我们可能会想他们到底是怎么实现滑动交互的呢，其实我们实现滑动交互的条件必须是CoordinatorLayout的子view必须实现NestedScrollingChild接口（RecyclerView就实现了NestedScrollingChild接口，我们也可以用NestedScrollView），而且CoordinatorLayout也实现了NestedScrollingParent 接口，这样才能实现滑动交互。

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent {}

public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild {}

public class NestedScrollView extends FrameLayout implements NestedScrollingParent,
        NestedScrollingChild, ScrollingView {}

关于滚动机制的具体原理，可以查看这篇文章源码看CoordinatorLayout.Behavior原理。

3.与CollapsingToolbarLayout 结合使用

效果图：


布局文件：

<?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:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        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="@color/colorPrimary"
            app:expandedTitleMarginEnd="30dp"
            app:expandedTitleMarginStart="40dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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


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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

上面的布局中我们需要关注以下几处陌生的属性：

上一篇 下一篇

猜你喜欢

热点阅读