android 上滑停留 折叠效果
1.首先看这个效果
<?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" android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <View android:layout_width="match_parent" android:layout_height="50dp" android:background="#5FF" app:layout_scrollFlags="scroll|enterAlwaysCollapsed" /> <View android:background="#FF00FF" android:layout_width="match_parent" android:layout_height="50dp"/> </com.google.android.material.appbar.AppBarLayout> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
需要了解的是
AppBarLayout
里面两个View,其中一个设置scrollFlags
,一个没有设置。没有设置的是不会折叠的。AppBarLayout
并没有设置Behavior
,而RecyclerView
却设置了的。效果就是在CoordinatorLayout
内部,理论上每个View必须携带一个Behavior
,而这里AppBarLayout
没有携带是因为它本身就有
2.再看这个效果
布局如下
<androidx.coordinatorlayout.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"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="300dp"> <com.google.android.material.appbar.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/demo" app:layout_collapseMode="parallax" /> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="50dp" android:background="#5FF" app:layout_collapseMode="pin" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
需要知道的地方
CollapsingToolbarLayout
CollapsingToolbarLayout
的几个Flag:
名称 | 值 | 作用 |
---|---|---|
COLLAPSE_MODE_OFF | 0 | 默认值,表示View不会有任何属性 |
COLLAPSE_MODE_PIN | 1 | 当CollapsingToolbarLayout 完全收缩之后,设置该Flag的View会保留在屏幕当中。 |
COLLAPSE_MODE_PARALLAX | 2 | 设置该Flag的View会跟内容滚动,可以通过setParallaxMultiplier 方法来设置视图差比率,其中0表示毫无视图差,完全跟内容滚动同步;1表示View完全不动。默认的视图差为0.5。 |