Andorid - Material Design之CoordinatorLayout

96
Allens_Jiang
2018.01.03 10:48* 字数 418
老婆保佑,代码无BUG

前言

这是MD 系列的最后一篇文章,文末,会将代码上传,有兴趣的小伙伴可以一起参考

目录

    1. 与FloatingActionButton联动
    1. 与AppBarLayout
    • layout_scrollFlags属性讲解
    1. CollapsingToolbarLayout
    • NestedScrollView

效果

1. 与FloatingActionButton联动

在之前的FloatingActionButton一文中,有详细介绍Andorid - Material Design之FloatingActionButton


2. 与AppBarLayout

(图1 )一旦向上滚动这个view就可见
<?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"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/addTool_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ThemeOverlay.AppCompat.Dark" />

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

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

说明

 app:layout_behavior="@string/appbar_scrolling_view_behavior"

当加上这个behavior时候,RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变

app:layout_scrollFlags="scroll|enterAlways"

首先必须要有scroll,这样其他属性才有作用,然后就对所有的属性做个说明

属性 说明
scroll 必须要有,保证其他的属性正常
enterAlways 一旦向上滚动这个view就可见,如上图1
enterAlwaysCollapsed 需要定义最小高度minHeight同时使用,enterAlwaysenterAlwaysCollapsed,view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完,如下图2
exitUntilCollapsed 当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。 如下图3
(1)enterAlwaysCollapsed
(图2)
    <android.support.v7.widget.Toolbar
            android:id="@+id/addTool_toolbar"
            android:layout_width="match_parent"
            android:minHeight="15dp"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark" />

排版问题,这里只放上 不同的地方,其他和上面一样,这里需要注意的地方,看GIF中,我下拉的时候,会有一个最小高度,等最小高度出来,我需要再次下拉一下,然后在会继续出来

下拉--> 显示最小高度-->下拉-->显示全部toolbar
(2)exitUntilCollapsed
图3
        <android.support.v7.widget.Toolbar
            android:id="@+id/addTool_toolbar"
            android:layout_width="match_parent"
            android:minHeight="15dp"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark" />

当下拉到我们设定的最小高度的时候,会将最小高度消失,直接消失全部的toolbar,这里会有一个最小高度一直在,注意了,还有就是scroll,必须放在所有的属性前面

下拉--> 当达到最小高度-->显示全部toolbar

3. CollapsingToolbarLayout

Untitled4.gif
<?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="wrap_content">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:scaleType="fitXY"
                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:layout_collapseMode="pin" />

        </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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/tvScroll"/>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Title");

说明

imgView的这个属性必须加上

 app:layout_collapseMode="parallax"

看GIF图中,当我恢复到toolbar高度的时候,是不是粉红色,就是这个属性

   app:contentScrim="@color/colorAccent" //粉红色
  1. NestedScrollView

就把他理解成ScrollView ,这是专门为了给Meterial Design用的,为了兼容其他的控件


源码地址

点击进入GitHub

最后

全部系列

Andorid - Material Design之Snackbar

Andorid - Material Design之TextInputLayout

Andorid - Material Design之FloatingActionButton

Andorid - Material Design之TabLayout

Andorid - Material Design之NavigationView和DrawerLayout

Andorid - Material Design之CoordinatorLayout

Android
Web note ad 1