折叠标题栏设置属性解析

准备工作:引入design库,活动主题设置为NoActionBar,设置xml中toolbar到setSupportActionBar


先上折叠标题栏代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginStart="100dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>

</android.support.design.widget.CoordinatorLayout>


根布局必须是CoodinatorLayout,这个布局具备处理各个子组件交互的能力。根布局下有一个AppBar(必须作为coodinatorlayout直接子元素才可正常工作)和一个可滑动的view(这是是recyclerview)。

AppBarLayout包含一个CollapsingToolbarLayout,从字面意思可以看出,这是专门处理可折叠标题栏的,其包含一个展开后显示的view以及折叠后显示的toolbar。


接下来就是设置属性了,首先给recyclerview设置layout_behavior(coordinatorlayout中的一个核心属性,用以建立各个组件之间的依赖关系),这个值表示滑动将传递给appbarlayout。

然后设置collapsingtoolbarlayout,contentScrim表示收起后显示的背景颜色(这里也就是toolbar的背景颜色),布局根据这个颜色封装了一个渐变效果。

expandedTitleMarginStart(以及其他margin)表示展开时标题的margin。

最重要的就是layout_scrollFlags,这个属性并非collapsingtoolbarlayout专属,表示对滑动的处理。

layout_scrollFlags 的取值可以为以下几种。


  • scroll
    设成这个值的效果就好比本 View 和 Scrolling view 是“一体”的,如果只设置这个值的话滑动会很呆滞,就好像标题栏变成了列表的第一项。其他的滚动行为生效,必须同时指定 Scroll 和相应的标记。


  • exitUntilCollapsed
    当本 View 离开屏幕时,会被“折叠”直到达到其最小高度。而只有列表完全到达顶部之后本view才可以向下滑动展开。


  • enterAlways
    当 Scrolling view 向下滚动时,本 View 会一起跟着从屏幕顶端向下滚动显示。相比于简单的scroll效果好了一些,只要scrolling view往下滑本view就会显示出来。


  • enterAlwaysCollapsed
    从名字上就可以看出,这是在 enterAlways 的基础上,加上了“折叠”的效果。当我们开始向下滚动 Scrolling View 时,本 View 会一起跟着滚动直到达到其“折叠高度”(即最小高度)。然后当 Scrolling View 滚动至顶部内容完全显示后,再向下滚动 Scrolling View,本 View 会继续滚动到完全显示出来。 也就是两段滑动。


  • snap
    在一次滚动结束时,本 View 很可能只处于“部分显示”的状态,加上这个标记能够达到“要么完全隐藏,要么完全显示”的效果。这个完全隐藏是指留出toolbar高度或者完全不显示。



最后要为imageview和toolbar设置layout_collapseMode。有两个值,parallax表示视差滑动,也就是imageview折叠的过程中图片会比原滑动移动的慢一点。配合着一个视差参数使用。pin表示一直显示在顶部,也就是折叠后显示在顶部。





明白了折叠标题栏,那么随滑动移入移出的标题栏就很简单了,不需要使用collapsingtoolbarlayout,直接把toolbar设置为appbar子项,处理滑动属性设置成scroll|enterAlways就可以了。想要避免不完全显示的话就加一个snap

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值