Material Design之AppBarLayout

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Common_it/article/details/80748627

AppBarLayout是一个垂直的LinearLayout，他的子布局需要提供他们想要的滚动行为。而要实现这些行为的前提是AppBarLayout必须要在CoordinatorLayout的包裹下，在其他的ViewGroup包裹中是不起作用的！

scroll属性

• 效果图
  
  
  • 代码

<?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/activity_coordinator_layout"
    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">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:gravity="center_vertical"
            android:paddingLeft="10dp"
            android:text="AppBarLayout"
            android:textColor="@color/colorWhite"
            android:textSize="17sp"
            app:layout_scrollFlags="scroll" />
    </android.support.design.widget.AppBarLayout>


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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="内容1"
                android:textSize="15sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#d7d7d7" />

                    . . . 省略好多的TextView . . .

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

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

snap属性

• 效果图
  
• 代码

<?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:id="@+id/activity_coordinator_layout"
    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">

        <TextView
            android:paddingLeft="10dp"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:gravity="center_vertical"
            android:text="AppBarLayout"
            android:textColor="@color/colorWhite"
            android:textSize="17sp"
            app:layout_scrollFlags="scroll|snap" />
    </android.support.design.widget.AppBarLayout>


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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="内容1"
                android:textSize="15sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#d7d7d7" />
                    . . . 省略好多的TextView . . .
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

enterAlways属性

• 效果图
  
• 代码

<?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:id="@+id/activity_coordinator_layout"
    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">

        <TextView
            android:paddingLeft="10dp"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:gravity="center_vertical"
            android:text="AppBarLayout"
            android:textColor="@color/colorWhite"
            android:textSize="17sp"
            app:layout_scrollFlags="scroll|enterAlways" />
    </android.support.design.widget.AppBarLayout>


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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="内容1"
                android:textSize="15sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#d7d7d7" />
                    . . . 省略好多的TextView . . .
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

enterAlwaysCollapsed属性

• 效果图
  
• 代码

<?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:id="@+id/activity_coordinator_layout"
    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">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?android:attr/actionBarSize"
            android:orientation="vertical"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:text="AppBarLayout"
                android:textColor="@color/colorWhite"
                android:textSize="17sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:gravity="center_vertical"
                android:text="我任性，我先出来"
                android:textColor="@color/colorWhite"
                android:textSize="15sp" />
        </LinearLayout>
    </android.support.design.widget.AppBarLayout>


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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="内容1"
                android:textSize="15sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#d7d7d7" />
                    . . . 省略好多的TextView . . .
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

exitUntilCollapsed属性

• 效果图
  
• 代码

<?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/activity_coordinator_layout"
    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">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?android:attr/actionBarSize"
            android:orientation="vertical"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:text="AppBarLayout"
                android:textColor="@color/colorWhite"
                android:textSize="17sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:gravity="center_vertical"
                android:text="我不能消失"
                android:textColor="@color/colorWhite"
                android:textSize="15sp" />
        </LinearLayout>
    </android.support.design.widget.AppBarLayout>


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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="内容1"
                android:textSize="15sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#d7d7d7" />

                        . . . 省略好多的TextView . . .

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

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

属性说明

属性名称	说明
scroll	可以让声明这个属性的控件和绑定的滑动控件进行互动
enterAlways	当绑定的滑动控件向下滑动的时候，会先滑动声明这个属性的控件在进行滑动
enterAlwaysCollapsed	当绑定的滑动控件向下滑动的时候，会先滑动声明这个属性的控件的一个最小高度， 在进行绑定控件的滑动，直到全部显示
exitUntilCollapsed	当绑定的滑动控件向上滑动的时候，会先滑动声明这个属性的控件，直到滑动到剩余 控件的最小高度在进行绑定控件的滑动
snap	当声明这个属性的控件滑动过的距离小于这个控件的高度一半的时候，手指离开屏幕， 这个控件会回复原样；反之，滑动过的距离大于这个控件高度一半的时候，手指离开屏 幕，这个控件会进入和原来相反的状态

注意事项

1. 使用AppBarLayout就必须要用CoordinatorLayout，否则将不会有效果;
2. 只有设置了scroll属性，才会有滑动的效果，其他属性只是来修饰这个滑动的效果;
3. 使用enterAlwaysCollapsed和exitUntilCollapsed的时候需要设置控件的android:minHeight=""属性
4. 使用enterAlwaysCollapsed需要配合enterAlways使用（必须）;
5. exitUntilCollapsed也可以和enterAlways配合使用（不是必须）；
6. 要在你的滑动控件上设置app:layout_behavior="@string/appbar_scrolling_view_behavior"属性进行绑定