CoordinatorLayout是Android官方在Design包提供的控件。
作用:可当作普通的FrameLayout作为跟布局使用。也可作为一个或者多个子View进行复杂交互的容器。
CoordinatorLayout提供了个行为Behavior来让我们进行写复杂的交互,通过Behavior来协调完成。
CoordinatorLayout结合NestedScrollView、RecycleView、ListView使用。通过设置layout_behavior="@string/appbar_scrolling_view_behavior"完成映射,联动CoordinatorLayout实现滑动效果。
AppBarLayout是一个垂直的 LinearLayout布局。需要配合CoordinatorLayout进行使用。
使用:通过给它的子View进行setScrollFlags(int)或者直接在xml中增加属性app:layout_scrollFlags来设置它子View的滚动行为。
layout_scrollFlags介绍:
enterAlways:向上滚动时视图将变为可见。
enterAlwaysCollapsed:通常,当仅使用enterAlways时,工具栏将在向下滚动时继续扩展。如果声明了enterAlways并指定了-minHeight,则还可以指定enterAlwaysCollapsed。使用此设置时,您的视图将仅显示在此最小高度。仅当滚动到达顶部时,视图才会扩展到其完整高度
exitUntilCollapsed:当设置滚动标志时,向下滚动通常会导致整个内容移动。通过指定minHeight和exitUntilCollapsed,将在其余内容开始滚动并退出屏幕之前达到工具栏的最小高度
Snap:使用此选项将确定仅在部分缩小视图时要执行的操作。如果滚动结束并且视图大小已减小到原始视图的小于50%,则此视图将返回其原始大小。尺寸大于其尺寸的1/2,它将完全消失。
CollapsingToolbarLayout提供了一个可以折叠的Toolbar,它继承至FrameLayout.可以往里面添加一个或多个子View或ViewGroup。给它设置layout_scrollFlags就可以实现折叠的效果。注意:在它里面添加的View或ViewGroup是悬浮层叠的。如果不注意就会被覆盖掉。
在它的子View中可以设置layout_collapseMode 实现固定和滑出效果。
layout_collapseMode
pin - 设置固定模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
parallax - 设置滑出模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。
简单例子
xml布局:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" \\铺满系统状态栏
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
app:statusBarScrim="@android:color/transparent" \\将系统状态栏设置为透明
app:contentScrim="@android:color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false" \\隐藏标题
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#123567"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" \\设置为滑出模式
app:layout_collapseParallaxMultiplier="0.3"> \\视差因子设置
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:orientation="horizontal"
android:background="@android:color/holo_orange_light"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp">
</LinearLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin" \\固定模式,固定预留显示高度
android:visibility="gone" \\先隐藏
app:title="显示隐藏成功"
app:titleTextColor="@android:color/black"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
\\设置联动映射行为
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"
/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
系统状态栏的设置:
//将主题设置为NoActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
....
//设置系统状态栏颜色为透明
<item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>
</style>
Activity设置:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar=findViewById(R.id.toolbar);
//这个一定要设置,不然往上折叠时,toolbar显示会有问题
setSupportActionBar(toolbar);
app_bar=findViewById(R.id.app_bar);
//设置监听
app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (Math.abs(i)<appBarLayout.getTotalScrollRange()){
//展开时
//去掉默认的标题
getSupportActionBar().setDisplayShowTitleEnabled(false);
//隐藏toolbar
toolbar.setVisibility(View.GONE);
}else if (Math.abs(i)>=appBarLayout.getTotalScrollRange()){
//折叠时
//将标题设置为显示
getSupportActionBar().setDisplayShowTitleEnabled(true);
//显示toolbar
toolbar.setVisibility(View.VISIBLE);
}
}
});
}
展开时
折叠时
参考文章:
Material Design系列(一)- CollapsingToolbarLayout 和AppBarLayout
android新特性:使用CollapsingToolbarLayout实现折叠效果及问题解决
利用 CollapsingToolbarLayout 完成联动的动画效果
如何监听CollapsingToolbarLayout的展开与折叠
网友评论