一、简介
- AppBarLayout 是 Design Support 库中提供的一个控件，它是一个垂直方向的 LinearLayout ，它的内部做了很多滚动事件的封装，并应用了一些 Material Design 的设计理念！
二、简单使用
- AppBarLayout 一般是配合 CoordinatorLayout 来使用，实现一些 Material Design 效果，CoordinatorLayout 是一个加强版的 FrameLayout，在 CoordinatorLayout 下添加控件会出现覆盖的情况，因为 FrameLayout 默认都是从屏幕的左上角开始添加控件，如果加上 AppBarLayout 的话，就会避免这种覆盖的情况，并实现一些 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
发现: RecyclerView 将 Toolbar 覆盖掉了，而且也很难看，这时候就需要 AppBarLayout 来协调这些个关系
2.3 CooldinatorLayout 和 AppBarLayout 配合使用
-
在布局文件中，将 Toolbar 包裹在 AppBarlayout 之内，并给 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 收到滚动事件的时候，它内部的子控件是可以指定如何去影响这些事件的，其实就是在 Toolbar 中添加一条属性：app:layout_scrollFlags ，一共有五个 Flag 可选，在这里常用的有三个
-
scroll 表示向上滚动时，toolbar 会跟着一起向上滚动并隐藏
-
enterAlways 表示向下滚动时，toolbar 会跟着一起向下滚动并重新显示
-
snap 表示当 toolbar 还没有完全隐藏或显示的时候，会根据当前滚动的距离，自动选择隐藏或者显示。
网友评论