上一篇介绍了CoordinatorLayout与Behavior的使用,这一篇我们继续介绍AppBarLayout。
AppbarLayout实质上是一个垂直方向的LinearLayout,在LinearLayout的基础上添加了Material Design的概念和特性,即滑动手势。它可以在某个可滑动的View(如:ScrollView ,ListView ,RecyclerView 等)滑动手势发生改变时,定制内部的子View 该做的动作,而子View通过setScrollFlags(int),来设置响应滑动手势的方式。
注意:AppbarLayout 必须是CoordinatorLayout 的直接子View。
AppbarLayout 响应滑动 的5种动作
layout_scrollFlags有5种动作,分别是
- scroll
- enterAlways
- enterAlwaysCollapsed
- exitUntilCollapsed
- snap
1、scroll
子View(这里指Toolbar)将会随着可滚动View(如:ScrollView)一起滚动,就好像子View 是属于ScrollView的一部分一样。
效果图:
代码:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="@android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="bottom"
app:title="AppbarLayout-scroll"
app:titleTextColor="@android:color/white"
app:layout_scrollFlags="scroll">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/vertical_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
2、enterAlways
当ScrollView 向下滑动时,子View(这里指Toolbar) 将直接向下滑动,而不管ScrollView 是否在滑动。注意:要与scroll 搭配使用,否者是不能滑动的。
效果图:
代码:
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="bottom"
app:title="AppbarLayout-enterAlways"
app:titleTextColor="@android:color/white"
app:layout_scrollFlags="scroll|enterAlways">
3、enterAlwaysCollapsed
当ScrollView 向下滑动的时候,子View下滑至折叠的高度(即minHeight),当ScrollView 到达滑动范围的结束值的时候,子View剩下的部分开始滑动。
效果图:
代码:
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="50dp"
android:gravity="bottom"
app:title="AppbarLayout-enterAlwaysCollapsed"
app:titleTextColor="@android:color/white"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
4、exitUntilCollapsed
当ScrollView 向上滑动时,子View先响应滑动事件,滑动至折叠高度(即minHeight)就固定不动了,再把滑动事件交给 scrollview 继续滑动。
效果图:
代码:
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="50dp"
android:gravity="bottom"
app:title="AppbarLayout-exitUntilCollapsed"
app:titleTextColor="@android:color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
5、snap
在滚动停止时,如果子view只是部分可见,它将自动滑动至最近边界,结果就是要么全部可见,要么不可见。
效果图:
代码:
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="50dp"
android:gravity="bottom"
app:title="AppbarLayout-snap"
app:titleTextColor="@android:color/white"
app:layout_scrollFlags="scroll|snap">
AppbarLayout常用方法
- addOnOffsetChangedListener 当AppbarLayout 的偏移发生改变的时候回调,也就是子View滑动。
- removeOnOffsetChangedListener 移除监听
- getTotalScrollRange 返回AppbarLayout 所有子View的滑动范围
- setExpanded (boolean expanded, boolean animate) 设置AppbarLayout 是展开状态还是折叠状态,animate 参数控制切换到新的状态时是否需要动画
- setExpanded (boolean expanded) 设置AppbarLayout 是展开状态还是折叠状态,默认有动画。
与CollapsingToolbarLayout配合使用
CollapsingToolbarLayout 是对Toolbar的包装并且实现了折叠效果,注意必须作为 AppbarLayout 的直接子View。
效果图:
代码:
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
app:contentScrim="@mipmap/kyo"
app:statusBarScrim="@color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/iori"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="bottom"
app:title="Collapsing title"
app:titleTextColor="@android:color/white"
app:layout_scrollFlags="scroll|snap"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
说明:
1、 Collapsing title(折叠标题)
布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。注意,Toolbar 和CollapsingToolbarLayout 同时设置了title时,显示CollapsingToolbarLayout 的title,如果要显示Toolbar 的title,需要将CollapsingToolbarLayout的title置空。
2、Content scrim(内容纱布)
当CollapsingToolbarLayout滑动到一个确定的阀值时将显示或者隐藏内容纱布,可以通过setContentScrim(Drawable)来设置纱布的图片。纱布可以是图片也可以是颜色色值。
3、Status bar scrim(状态栏纱布)
当CollapsingToolbarLayout滑动到一个确定的阀值时,状态栏显示或隐藏纱布,可以通过setStatusBarScrim(Drawable)来设置纱布图片或颜色。这个属性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支持API19及以上版本,位于setContentView语句前面)一起使用,使顶部视图展开时图片能够延伸到状态栏位置显示。
4、layout_collapseMode 折叠模式,设置其他控件滚动时自身的交互行为,有两种取值:parallax,折叠视差效果,比如上述效果图中的图片;pin,固定别针效果,比如上图中的Toolbar;
5、layout_collapseParallaxMultiplier
不折叠视差系数,配合parallax模式使用,取值有点类似alpha(不透明度),在0.0 ~ 1.0之间,默认值为0.5。当设置为1.0,滚动列表时图片不会折叠移动;