目录
CoordinatorLayout(协调布局)常与AppBarLayout和CollapsingToolbarLayout配合使用,常用于创建隐藏工具栏。
一、CoordinatorLayout
CoordinatorLayout 是一个高级的FrameLayout,旨在处理子视图之间的协调交互。它的设计目的是为了实现复杂的 UI 动画和交互效果。CoordinatorLayout可以包含各种子视图,而这些子视图可以通过指定的Behavior进行协调。
Behavior:
Behavior 是 CoordinatorLayout 的子 View 之间交互的一个插件,它指定了 CoordinatorLayout 的直接子View(必须是直接的,间接的即使指定了也无效)在交互时的行为,如拖动、滑动、闪动或任何其它手势,并且是以非侵入式的方式实现这种交互。
指定 CoordinatorLayout 直接子 View 的 Behavior 通常有三种方式:通过代码绑定(LayoutParams 的 setBehavior())、通过 XML 绑定、通过注解自动绑定(在类上打 @CoordinatorLayout.DefaultBehavior(Behavior.class) 注解)。通常我们使用 XML 绑定的方式指定,如 app:layout_behavior=“@string/appbar_scrolling_view_behavior” 其实就是指定了对应 AppBarLayout.ScrollingViewBehavior 这个类的行为。
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 包含在CoordinatorLayout中的其他子视图,例如AppBarLayout -->
<androidx.recyclerview.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
... ... />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
在CoordinatorLayout中,可添加AppBarLayout、RecyclerView等控件组成头部和其他部分。
二、AppBarLayout
AppBarLayout 是 LinearLayout 的子类,用于制作折叠头部效果。必须在它的子 View 上设置 app:layout_scrollFlags 属性或者是在代码中调用 setScrollFlags()方法 设置这个属性。
子控件scrollFlags属性常见属性值:
- scroll :表示子视图将随着滚动而滚动。这是基本的滚动标志,用于启用子视图的滚动,如果子控件未设置该属性则无法滚动。
- enterAlways :表示在向下滚动时,子视图会立即进入,即使滚动距离很小。这通常用于隐藏工具栏,以提供更大的屏幕空间。
- enterAlwaysCollapsed :类似于enterAlways ,但在向下滚动时,子视图只是以最小高度进入。
- exitUntilCollapsed :表示在向上滚动时,子视图会折叠,直到达到最小高度后再进行滚动。这通常与 enterAlways 结合使用,以在向下滚动时展开,向上滚动时折叠。
- snap :表示当子视图的滚动范围未完全进入或退出时,会根据滚动距离自动选择是展开还是折叠。通常与 enterAlways 和 exitUntilCollapsed 结合使用。
- scrollEnterAlways :与 enterAlways 类似,但在向上滚动时,子视图会重新展开。
- scrollEnterAlwaysCollapsed :类似于 enterAlwaysCollapsed ,但在向上滚动时,子视图会重新以最小高度展开。
<androidx.coordinatorlayout.widget.CoordinatorLayout
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">
<!-- 包含在AppBarLayout中的其他子视图,例如CollapsingToolbarLayout-->
</com.google.android.material.appbar.AppBarLayout>
<!-- 包含在CoordinatorLayout中的其他子视图,例如AppBarLayout -->
<androidx.recyclerview.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
... ... />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
监听器
除了以上属性,还可以给 AppBarLayout 设置监听器 AppBarLayout.OnOffsetChangedListener ,根据 AppBarLayout 内部的位移变化设置不同的 UI 效果。比如在完全折叠的情况下才显示标题,否则就隐藏标题:
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
// verticalOffset 取值范围[0,-appBarLayout.getTotalScrollRange()]
// 展开时取 0
// 折叠时取 -appBarLayout.getTotalScrollRange()
if(verticalOffset==0-appBarLayout.getTotalScrollRange()){
//全折叠
collapsingToolbarLayout.setTitle("hello");
}
else {
collapsingToolbarLayout.setTitle("");
}
}
});
在AppBarLayout中,可添加CollapsingToolbarLayout 等可折叠控件或不可折叠控件。
三、CollapsingToolbarLayout
CollapsingToolbarLayout 是用于实现可折叠式工具栏效果的容器。它通常包裹在 AppBarLayout 中,并允许你创建一个具有折叠和展开效果的工具栏。CollapsingToolbarLayout 可以包含标题、副标题和其他视图,并在滚动时实现相应的折叠效果。
当CollapsingToolbarLayout中添加了ToolBar控件,折叠后高度与ToolBar一致且minHeight属性失效;未添加ToolBar控件时,折叠高度与minHeight属性值一致,如未设置minHeight属性则折叠高度为0。
可使用app:contentScrim属性设置折叠后用于覆盖在折叠部分上的颜色。
可使用app:titleEnable属性设置是否启用CollapsingToolbarLayout标题。未使用app:title属性设置标题时,若包含ToolBar控件则标题使用ToolBar的标题。
可使用app:expandedTitleGravity属性设置扩展状态下标题的对齐方式。
CollapsingToolbarLayout 的子布局有3种折叠模式,通过 app:layout_collapseMode属性 设置:
- off :默认属性,布局将正常显示,无折叠行为。
- pin :CollapsingToolbarLayout 折叠后,此布局将固定在顶部。
- parallax :CollapsingToolbarLayout 折叠时,此布局也会有视差折叠效果。如果设置了此值,还可以使用 app:layout_collapseParallaxMultiplier属性 设置视差滚动因子,即折叠的时候上部先被遮挡(0)还是下部先被遮挡(1),值为 0~1,默认为0.5。
<androidx.coordinatorlayout.widget.CoordinatorLayout
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">
<!-- 包含在AppBarLayout中的其他子视图,例如CollapsingToolbarLayout-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
android:minHeight="10dp"
app:contentScrim="@color/~"
app:title="hello"
app:titleEnable="true"
app:expandedTitleGravity="center" >
<!-- 包含在CollapsingToolbarLayout中的其他子视图,例如Toolbar -->
<ImageView
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
... ... />
<androidx.appcompat.widget.Toolbar
... .../>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- 包含在CoordinatorLayout中的其他子视图,例如AppBarLayout -->
<androidx.recyclerview.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
... ... />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
在CollapsingToolbarLayout中,可添加ToolBar等控件,用于实现一个可折叠工具栏。
tag:隐藏工具栏,折叠工具栏,滚动工具栏,CoordinatorLayout,协调布局,AppBarLayout,CollapsingToolbarLayout,ToolBar,工具栏,折叠,滚动