android:id="@+id/rv_my_test"
android:layout_width=“match_parent”
android:layout_height=“match_parent”
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
在这里,你得注意如下问题:
-
?attr/actionBarSize :表示 toolbar 的默认最小高度minHeight。
-
A
ppBarLayout 包 CollapsingToolbarLayout 包 Toolbar,这种层级关系不能乱 -
app:layout_scrollFlags=“scroll|exitUntilCollapsed” 应该设置在 CollapsingToolbarLayout 上,即离 AppBarLayout 最近的那个子布局上。
-
CollapsingToolbarLayout 和 Toolbar 的 android:layout_height 不能同时设置为 match_parent,要不然你会发现 title 无法显示,所以我将 CollapsingToolbarLayout 设置为 match_parent,Toolbar 设置为 ?attr/actionBarSize。
-
app:layout_collapseMode="" 是设置模式的 ,放在 CollapsingToolbarLayout 的子布局上,parallax 不固定 Toolbar,pin 固定 Toolbar。
-
Toolbar 在这种情况下 title 与 logo 是分排显示的,的注意。
补充:对于 Toolbar 的 logo 设置,我是用 java 代码实现的,下面只粘贴出有用部分代码片段:
//获取 Toolbar
tb_my_bar = findViewById(R.id.tb_my_bar);
tb_my_bar.setLogo(R.drawable.ic_launcher_foreground);
效果展示
app:layout_collapseMode="paralla“
app:layout_collapseMode="pin“
我们上面讲到过 CollapsingToolbarLayout 是一个 ViewGroup ,所以我们在里面放一张 ImageView 试试。
<?xml version="1.0" encoding="utf-8"?><androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=“http://schemas.android.com/apk/res/android”
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:orientation=“vertical”
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width=“match_parent”
android:layout_height=“200dp”>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags=“scroll|exitUntilCollapsed”>
<ImageView
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:src="@drawable/bg"
android:scaleType=“center”
app:layout_collapseMode=“parallax”/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/tb_my_bar"
android:layout_width=“match_parent”
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode=“pin”
android:background="?attr/colorPrimary"
app:title=“title”
app:titleTextColor="#000"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_my_test"
android:layout_width=“match_parent”
android:layout_height=“match_parent”
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
效果展示
还有其他动画效果 大家自行设置 app:layout_scrollFlags、app:layout_collapseMode 的值。
我来带大家再看几个属性:
一、去掉Toolbar的的 background 的效果
二、设置 CollapsingToolbarLayout 的 contentScrim 属性
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:minHeight="?attr/actionBarSize"
app:contentScrim="@color/colorPrimary" //别找了,就是这个属性
app:layout_scrollFlags=“scroll|exitUntilCollapsed”>
三、打造沉浸式状态栏
目前有很多APP比较喜欢采用沉浸式设计, 简单点说就是将状态栏和导航栏都设置成透明或半透明的.
我们来把状态栏statusBar设置成透明. 在style主题中的AppTheme里增加一条:
在布局里面, 将ImageView和所有它上面的父View都添加fitsSystemWindows属性.
<?xml version="1.0" encoding="utf-8"?><androidx.coordinatorlayout.widget.CoordinatorLayout
…
android:fitsSystemWindows=“true”>
<com.google.android.material.appbar.AppBarLayout
…
android:fitsSystemWindows=“true”>
<com.google.android.material.appbar.CollapsingToolbarLayout
…
android:fitsSystemWindows=“true”>
<ImageView
…
android:fitsSystemWindows=“true”/>
<androidx.appcompat.widget.Toolbar
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_my_test"
android:layout_width=“match_parent”
android:layout_height=“match_parent”
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
效果展示:
可以明显的发现这个 title 和 logo 上下错位了,更准确的说 title 不在 Toolbar里面。
经过我一天的研究发现 这是使用 AppBarLayout 、 CollapsingToolbarLayout 和 Toolbar
版本的问题。
错误引入
compile ‘com.android.support:design:25.3.1’
错误组件
age/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODg1Njcz,size_16,color_FFFFFF,t_70)
可以明显的发现这个 title 和 logo 上下错位了,更准确的说 title 不在 Toolbar里面。
经过我一天的研究发现 这是使用 AppBarLayout 、 CollapsingToolbarLayout 和 Toolbar
版本的问题。
错误引入
compile ‘com.android.support:design:25.3.1’
错误组件