Android Support Design库之AppBarLayout

AppBarLayout跟它的名字一样，把容器内的组件全部作为AppBar，就像下面将一个ToolBar和TabLayout包裹在一起。

1.在build.gradle中添加依赖库的支持

compile 'com.android.support:design:23.2.0'compile 'com.android.support:cardview-v7:23.4.0'

2.在布局中使用AppBarLayout并将Toolbar包裹

<?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.zsy.appbarlayout.MainActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.v7.widget.Toolbar            android:id="@+id/bar"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/bar_color"            android:minHeight="?attr/actionBarSize"            app:layout_scrollFlags="scroll|enterAlways"            app:popupTheme="@style/ToolbarPopupTheme"            app:theme="@style/ToolBarTheme" />        <android.support.design.widget.TabLayout            android:id="@+id/tab_layout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/bar_color"            app:tabIndicatorColor="#fff"            app:tabSelectedTextColor="#fff"            app:tabTextAppearance="?android:attr/textAppearanceMedium"            app:tabTextColor="#d7d4d4" />    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/recy"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior" />    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout_two"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="bottom"        android:background="#fff"        app:layout_behavior="com.zsy.appbarlayout.BottomBehavior"        app:tabIndicatorColor="#00000000"        app:tabSelectedTextColor="#3b5abe"        app:tabTextColor="#484747" /></android.support.design.widget.CoordinatorLayout>

3.使用CoordinatorLayout与自定义Behavior实现将底部导航栏滚出屏幕

public class BottomBehavior extends CoordinatorLayout.Behavior<View> {    public BottomBehavior(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {        //这个方法是说明这个子控件是依赖AppBarLayout的        return dependency instanceof AppBarLayout;    }    @Override    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {        float translationY = Math.abs(dependency.getTop());//获取跟随布局的顶部位置        child.setTranslationY(translationY);        return true;    }}

4.来看下实现的效果

5.一个可以滚动的组件，例如RecyclerView、ListView（这里需要注意的是，貌似只支持RecyclerView、ListView，如果你用一个ScrollView，是没有效果的）。如果：

1、给这个可滚动组件设置了layout_behavior
2、给另一个控件设置了layout_scrollFlags那么，当设置了layout_behavior的控件滑动时，就会触发设置了layout_scrollFlags的控件发生状态的改变。

6.layout_scrollFlags具有以下几个属性

• scroll: 所有想滚动出屏幕的view都需要设置这个flag没有设置这个flag的view将被固定在屏幕顶部。
• enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。

• enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，
  只有当滚动视图到达顶部时才扩大到完整高度。

• 需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用，而前面两种模式基本是需要一起使用的，
  也就是说，这些flag的使用场景，基本已经固定了

7.滑动列表的时候将ToolBar和底部滚出屏幕，来增大用户交互内容大小使的操作更加方便。如果对RecyclerView和TabLayout还不太熟悉的可以阅读这两篇RecyclerView，TabLayout。

项目地址:https://github.com/azhong1011/AppBarLayout