一嗦明、簡介
- AppBarLayout 是 Design Support 庫中提供的一個控件，它是一個垂直方向的 LinearLayout ，它的內(nèi)部做了很多滾動事件的封裝旗闽，并應用了一些 Material Design 的設計理念匾鸥！
二蜡塌、簡單使用
- AppBarLayout 一般是配合 CoordinatorLayout 來使用，實現(xiàn)一些 Material Design 效果勿负，CoordinatorLayout 是一個加強版的 FrameLayout馏艾，在 CoordinatorLayout 下添加控件會出現(xiàn)覆蓋的情況，因為 FrameLayout 默認都是從屏幕的左上角開始添加控件奴愉，如果加上 AppBarLayout 的話琅摩，就會避免這種覆蓋的情況，并實現(xiàn)一些 Material Design 效果锭硼！
2.1 添加 Design Support 的依賴
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:design:25.3.1'
}
2.2 使用 CoodinatorLayout 而不使用 AppBarLayout 的情況
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--標題欄-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<!--自定義控件-->
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:text="FloatingActionButton"
android:textSize="20dp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<!--RecyclerView-->
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/toolbar"></android.support.v7.widget.RecyclerView>
<!--FloatingActionButton-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/floating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/floating_icon"
app:fabSize="normal"
app:pressedTranslationZ="10dp"
app:rippleColor="@color/colorAccent"
/>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
-
運行結果如下：
image
發(fā)現(xiàn): RecyclerView 將 Toolbar 覆蓋掉了房资，而且也很難看，這時候就需要 AppBarLayout 來協(xié)調(diào)這些個關系
2.3 CooldinatorLayout 和 AppBarLayout 配合使用
在布局文件中檀头，將 Toolbar 包裹在 AppBarlayout 之內(nèi)轰异，并給 RecyclerView 指定個布局行為
修改后的布局文件如下所示：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
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.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<!--自定義控件-->
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:text="FloatingActionButton"
android:textSize="20dp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- app:layout_behavior="@string/appbar_scrolling_view_behavior" 指定一個布局行為-->
<!--RecyclerView-->
<android.support.v7.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/toolbar"></android.support.v7.widget.RecyclerView>
<!--FloatingActionButton-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/floating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/floating_icon"
app:fabSize="normal"
app:pressedTranslationZ="10dp"
app:rippleColor="@color/colorAccent"
/>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
-
運行結果如下
image 顯示結果正常
2.4 添加 Material Design 效果
2.4.1 當 AppBarLayout 收到滾動事件的時候岖沛，它內(nèi)部的子控件是可以指定如何去影響這些事件的，其實就是在 Toolbar 中添加一條屬性：app:layout_scrollFlags 搭独，一共有五個 Flag 可選婴削，在這里常用的有三個
scroll 表示向上滾動時，toolbar 會跟著一起向上滾動并隱藏
enterAlways 表示向下滾動時牙肝，toolbar 會跟著一起向下滾動并重新顯示
snap 表示當 toolbar 還沒有完全隱藏或顯示的時候唉俗，會根據(jù)當前滾動的距離，自動選擇隱藏或者顯示配椭。
