折叠标题栏设置属性解析

来源:互联网 发布:德语助手软件注册码 编辑:程序博客网 时间:2024/06/03 17:25

准备工作:引入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

原创粉丝点击