CoordinatorLayout的基本用法

2017-09-06 本文已影响26人海晨忆

CoordinatorLayout是MD中的一个专门用来做滚动特效的一个控件。继承自ViewGroup，并且它被设计成一个top-level的根布局，它本身只是一个ViewGroup，实现了NestedScrollingParent接口。
这里额外需要注意的是:

由于CoordinatorLayout只实现了NestedScrollingParent，所以当CoordinatorLayout嵌套（作为一个子View）的时候会得不到你想要的效果，需要自己写一个CoordinatorLayout去实现NestedScrollingChild接口。
没有实现NestedScrollingChild接口的子View如：ListView，ScrollView在5.0以下版本跟CoordinatorLayout是配合不了的需要使用RecyclerView，NestedScrollView才行。

CoordinatorLayout这个控件很强大，能对其子元素实现多种不同的功能，一个常见的用法就是：给它的一个子元素A设置一个layout_scrollFlags的属性，然后给另外一个子元素B设置一个layout_behavior=”@string/appbar_scrolling_view_behavior”的属性，这个子元素B一般是一个可以滑动的控件，比如RecyclerView、NestedScrollView等，那么当子元素B滑动的时候，子元素A就会根据其layout_scrollFlags的属性值而做出不同的改变，所以我们要为CollapsingToolbarLayout设置layout_scrollFlags属性。

layout_scrollFlags有哪几个属性可以选择：

scroll:所有想要滑动的控件都要设置这个标志位。如果不设置这个标志位，那么View会固定不动。
enterAlways:设置了该标志位后，若View已经滑出屏幕，此时手指向下滑，View会立刻出现，这是另一种使用场景。
enterAlwaysCollapsed:设置了minHeight，同时设置了该标志位的话，view会以最小高度进度屏幕，当滑动控件滑动到顶部的时候才会拓展为完整的高度。
exitUntilCollapsed:向上滑动时收缩当前View。但view可以被固定在顶部。

layout_collapseMode标志位进而产生不同的行为。其实这里也只有两种标志位，分别是：

pin：有该标志位的View在页面滚动的过程中会一直停留在顶部，比如Toolbar可以被固定在顶部
parallax：有该标志位的View表示能和页面同时滚动。与该标志位相关联的一个属性是：layout_collapseParallaxMultiplier，该属性是视差因子，表示该View与页面的滚动速度存在差值，造成一种相对滚动的效果。
Snackbar+FAB的效果图，如下：

Snackbar+FAB.gif

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        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.v7.widget.RecyclerView
            android:id="@+id/rvToDoList"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="16dp"
            android:src="@mipmap/ic_launcher"
            app:layout_anchor="@id/rvToDoList"
            app:layout_anchorGravity="bottom|right|end"/>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

很简单就是一个CoordinatorLayout里面包裹recyclerView和FloatingActionButton。
app:layout_anchor:意思是FAB浮动按钮显示在哪个布局区域。且设置当前锚点的位置
app:layout_anchorGravity:意思FAB浮动按钮在这个布局区域的具体位置。两个属性共同作用才是的FAB 浮动按钮也能折叠消失，出现。

java代码如下：

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fab);
        CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
        FloatingActionButton floatingActionButton =(FloatingActionButton) findViewById(R.id.fab);
        final Snackbar snackbar = Snackbar.make(coordinatorLayout, "这里是Snackbar", Snackbar.LENGTH_LONG)
                .setAction("这里是Snackbar的action", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(FabActivity.this, "你点击了Snackbar", Toast.LENGTH_SHORT).show();
                    }
                })
                .addCallback(new BaseTransientBottomBar.BaseCallback<Snackbar>() {
                    @Override
                    public void onDismissed(Snackbar transientBottomBar, int event) {
                        super.onDismissed(transientBottomBar, event);
                        Toast.makeText(FabActivity.this, "Snackbar消失了", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onShown(Snackbar transientBottomBar) {
                        super.onShown(transientBottomBar);
                        Toast.makeText(FabActivity.this, "Snackbar显示了", Toast.LENGTH_SHORT).show();
                    }
                });
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(snackbar.isShown()){
                    snackbar.dismiss();
                }else{
                    snackbar.show();
                }
            }
        });

    }

这里一眼看上去，对于不知道Snackbar控件的人来说，感觉好复杂，看不懂。这里我简单的说一下Snackbar。简单的用的话，我们只用知道他与Toast类似，不管是用法，还是用途，都类似。不知道的童鞋，想了解的，可以跳转没时间解释了，快使用Snackbar!——Android Snackbar花式使用指南。这篇文章说的很清楚。看完之后，回过头来看这个，超级简单。就是一个Snackbar的显示，跟他的显示，隐藏的回调。

Toolbar效果图如下：

toolbar.gif

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <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:fitsSystemWindows="true">
        <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.support.design.widget.AppBarLayout>

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

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

布局文件很简单，就是CoordinatorLayout+AppBarLayout+RecyclerView，这里的FAB要不要无所谓。然后AppBarLayout里面包裹一个toolbar。对于AppBarLayout不了解的童鞋，可以去看一下玩转AppBarLayout，更酷炫的顶部栏。这篇文章里面说的很清楚。至于，我这里的java代码没啥好贴的，就是给RecyclerView填充数据，给toolbar设置标题。其他没有啥了。

tablayout联用的效果图，如下：

tablayout.gif

布局文件如下：

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

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFF">

            <LinearLayout
                android:id="@+id/ll"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/header"
                    android:layout_width="match_parent"
                    android:layout_height="260dp"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/guide" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#00FFFFFF"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:text="哈哈哈哈哈"/>
            </LinearLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#FBDD9C"
                app:tabGravity="fill"
                app:tabIndicatorColor="#5f00"
                app:tabIndicatorHeight="4dp"
                app:tabMode="fixed"
                app:tabSelectedTextColor="#FFFFFF"
                app:tabTextColor="#FFFFFF" />
        </android.support.design.widget.AppBarLayout>
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview_tablayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v7.widget.RecyclerView>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

布局文件很简单，就是CoordinatorLayout+AppBarLayout+RecyclerView，跟上一个不同的是AppBarLayout里面包裹的内容不是Toolbar，而是一个LinearLayout+TabLayout，LinearLayout设置了：

app:layout_scrollFlags="scroll|exitUntilCollapsed"

至于java代码，就是给RecyclerView、TabLayout填充数据，其他没有什么东西了。

CollapsingToolbarLayout连用的效果图，如下

CollapsingToolbarLayout.gif

CollapsingToolbarLayout常见的xml属性如下：

contentScrim：当Toolbar收缩到一定程度时的所展现的主体颜色。即Toolbar的颜色。
title:当titleEnable设置为true的时候，在toolbar展开的时候，显示大标题，toolbar收缩时，显示为toolbar上面的小标题。
scrimAnimationDuration：该属性控制toolbar收缩时，颜色变化的动画持续时间。即颜色变为contentScrim所指定的颜色进行的动画所需要的时间。
expandedTitleGravity：指定toolbar展开时，title所在的位置。类似的还有expandedTitleMargin、collapsedTitleGravity这些属性。
collapsedTitleTextAppearance：指定toolbar收缩时，标题字体的样式，类似的还有expandedTitleTextAppearance。

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
    <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:background="@android:color/background_light"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbarlayout"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsinglayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

                <ImageView
                    android:id="@+id/main.backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:adjustViewBounds="true"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseParallaxMultiplier="0.7"
                    android:src="@mipmap/guide"
                    app:layout_collapseMode="parallax"/>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="96dp"
                    android:minHeight="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    android:gravity="top"
                    app:titleMarginTop="15dp"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            </android.support.design.widget.CollapsingToolbarLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="?attr/colorPrimary"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabIndicatorHeight="4dp"
                app:tabSelectedTextColor="#000"
                app:tabTextColor="#fff"/>
        </android.support.design.widget.AppBarLayout>

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

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

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

</LinearLayout>

布局文件很简单，就是CoordinatorLayout包括AppBarLayout+RecyclerView+FAB。然后就是AppBarLayout包括CollapsingToolbarLayout+TabLayout。再就是CollapsingToolbarLayout包括ImageView+Toolbar。就是这样。至于java代码，就是给recyclerView、tablayout填充数据，设置标题。
demo下载

到此结束。

CoordinatorLayout的基本用法

猜你喜欢

热点阅读