android appbarlayout,折叠状态栏例子(AppBarLayout+CollapsingToolbarLayout)

效果1:

直接先上效果

cl_1.gif

看了效果再上代码

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/app_bar"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/ctl_test"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:contentScrim="@color/colorPrimary"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

android:layout_width="match_parent"

android:layout_height="250dp"

android:scaleType="fitXY"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="?actionBarSize"

app:layout_collapseMode="pin"

app:title="不是默认" />

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="@string/text"

android:textSize="40sp" />

为什么字体颜色和xml中设置的不一样,因为在Activity中设置了一点点,如果不用改变的,Activity中也不用写

ctl_test.setExpandedTitleColor(ContextCompat.getColor(this , R.color.white))

ctl_test.setCollapsedTitleTextColor(ContextCompat.getColor(this , R.color.red))

标题颜色一定要设置在CollapsingToolbarLayout上,不然没用,设置这个标题也要设置在CollapsingToolbarLayout上,这样才有效果,xml中的只是默认设置

再说一说xml中比较重要的几个参数

CollapsingToolbarLayout:

1:app:layout_scrollFlags

此属性里面必须至少启用scroll这个flag，这样这个View才会滚动出屏幕，否则它将一直固定在顶部。

scroll：所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的View将会被固定在屏幕顶部。

enterAlways：当滑动组件向下滚动时，标题栏会直接往下滚动。

enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩 大到完整高度。

exitUntilCollapsed：当标题栏向上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应滑动组件的内部滑动事件。

2:app:layout_collapseMode：子布局折叠模式

pin：固定模式，在折叠的时候最后固定在顶端

parallax：视差模式，在折叠的时候会有个视差折叠的效果

3:app:contentScrim：指定CollapsingToolbarLayout折叠后的Toolbar颜色

CollapsingToolbarLayout中,必须有Toolbar,再在Toolbar中放东西比较好,我是这么试出来的

效果2

照样先上效果

cl_v2.gif

在上代码

android:id="@+id/ctl_test"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/white"

app:contentScrim="@color/colorPrimary"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

android:layout_width="match_parent"

android:layout_height="290dp"

android:scaleType="fitXY"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="?actionBarSize"

android:layout_gravity="bottom"

app:layout_collapseMode="pin">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:singleLine="true"

android:text="测试 测试 测试 测试 测试 测试 测试 测试 测试"

android:textColor="@color/red"

android:textSize="@dimen/txt_16" />

其他地方跟上面代码一样,我就不上了,也没有写Activity代码,就xml的运行起来的样式,这种能满足类似于顶部是banner,中间那块textview那块基本是tablayout,下面是列表的那种,根据自己需求来做

TabLayout隐藏下划线

app:tabIndicatorColor="@null"

就先写这两个吧,后面再补充