一、介绍
Android AppbarLayout是Android设计库中的一个重要组件,它是Toolbar的父容器,能够方便地实现Material Design的UI风格,在App界面中提供流畅的界面切换和用户操作控制。本文就将从多个方面对AppbarLayout进行详细讲解和实战演示。
二、AppbarLayout的使用
在使用AppbarLayout之前需要引入design包,实现流畅的界面切换和操作控制不离不弃。下面是引入design包的方法:
dependencies { compile 'com.android.support:design:25.1.0' }
AppbarLayout常见的使用方法是作为CoordinatorLayout的子布局来实现。
<?xml version="1.0" encoding="utf-8"?>
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Demo" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
上述代码示例中,首先是引入了CoordinatorLayout和AppBarLayout,然后Toolbar作为AppBarLayout的子View添加进去,而NestedScrollView则是作为整个布局的内容。
三、AppbarLayout的关键概念
1. Scroll Flags
Scroll Flags是指AppBarLayout的滑动属性,用于控制其子View的滑动效果,常用的几个Flag包括:
- scroll:表示随着滚动事件而滚动,一般设置在AppBarLayout的子View所在的View上,用于动态控制其出现和隐藏。
- enterAlways:表示随意的进入,一般设置在Toolbar上,用于在下拉页面时使Toolbar始终保持显示状态。
- enterAlwaysCollapsed:表示进入时折叠,一般与enterAlways联用,用于控制Toolbar的折叠效果。
- exitUntilCollapsed:表示向上滑出直到折叠,同样与enterAlways联用,仅在enterAlwaysCollapsed设置过后才有意义。
2. Layout Behaviors
Layout Behaviors是指CardView等布局组件结合AppBarLayout实现动态效果。AppBarLayout本身作为布局容器,对其子View的布局位置进行了一定的限制,常用的布局行为包括:
- AppBarLayout.ScrollingViewBehavior:用于实现联动效果,当AppBarLayout处于展开状态时,NestedScrollView随着内容滑动。
- AppBarLayout.LayoutParams:用于控制子View的滑动效果,以及与布局行为组件的结合效果,例如CardView组件与AppBarLayout组件的展开、折叠或滑出。
四、AppbarLayout实战演示
1. AppbarLayout与NavigationView相结合实现Drawer效果
AppbarLayout在结合NavigationView使用时,可以实现Drawer效果,具体实现方法如下:
<?xml version="1.0" encoding="utf-8"?>
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Demo" />
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
上述代码示例中,使用CoordinatorLayout来充当滑动流畅的父元素,AppBarLayout与NavigationDrawer一同初始化。同时,Toolbar设置了enterAlways标志位,表示在任何时候都保持显示状态,并为它的MotionEvent提供了layout_scrollFlags滚动行为标志位,以便滚动时消失。
2. AppbarLayout的滑动事件监听
为了支持对AppBarLayout的滚动事件监听,我们需要实现AppBarLayout.OnOffsetChangedListener接口,并在onOffsetChanged函数中实现相应的判断逻辑。代码实现如下:
appBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
//当滑动到最顶端时
collapsingToolbarLayout.setTitle("Title");
} else if (verticalOffset == 0) {
//完全展开时
collapsingToolbarLayout.setTitle("");
} else {
collapsingToolbarLayout.setTitle("");
}
}
});
上述代码实现中,通过AppBarLayout的addOnOffsetChangedListener函数对滑动事件进行监听,当滑动到最顶端时通过collapsingToolbarLayout.setTitle函数进行标题的设置。
3. AppbarLayout实现下拉刷新
AppbarLayout可以和SwipeRefreshLayout实现下拉刷新的效果,具体实现方法如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="title">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:title="title" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="16dp"
android:scrollbars="vertical" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
上述代码中,使用了SwipeRefreshLayout实现了下拉刷新效果,同时在布局文件中使用CoordinatorLayout与AppBarLayout实现了界面控制效果,并使用CollapsingToolbarLayout轻松实现了AppBarLayout下拉时的折叠效果。
五、总结
本文详细介绍了Android AppbarLayout的使用方法、关键概念以及实战演示。通过演示代码示例,帮助开发者快速掌握AppBarLayout的使用方法,并能够实现流畅的界面切换和用户操作控制。如果您还没有使用AppBarLayout,那么赶紧开始对它进行尝试吧!