AndroidStudio-3.2.1(二十一)AppBarLayout的使用

上一篇介绍了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,滚动列表时图片不会折叠移动;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值