CoordinatorLayout 使用
CoordinatorLayout 是 Design Support Library 引入的一个功能强大的布局,本质上是一个增强型的 FrameLayout,布局方式默认是一层一层叠上去的,它可以使得不同视图组件直接相互作用,并协调动画效果。CoordinatorLayout 是基于定义在 Behaviors 中的规则集的,可以定义 CoordinatorLayout 内部的视图组件是如何相互作用并发生变化的。
配合 FAB Snackbar 使用
之前的 FloatingActionButton 和 Snackbar,为了实现 Snackbar 出现时 FAB 自动上移,Snackbar 消失时 FAB 自动往下移动,就需要将 CoordinatorLayout 作为 FAB 的父容器,相关使用方法,传送门 FloatActionButton 使用。
实现 Toolbar 隐藏效果
实现 Toolbar 隐藏效果。app:layout_scrollFlags="scroll|enterAlways" 属性设置滚动事件,至少启用 scroll 这个 flag,这个 Toolbar 才会滚出屏幕,否则它将一直固定在顶部。
xml 布局代码
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:background="@color/colorAccent"
app:title="标题"
app:titleTextColor="@android:color/white"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text1"
android:textColor="@color/colorAccent"/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text2"
android:textColor="@color/colorAccent"/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text3"
android:textColor="@color/colorAccent"/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text4"
android:textColor="@color/colorAccent"/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text5"
android:textColor="@color/colorAccent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
效果
结合 CollapsingToobarLayout 实现 Toolbar折叠效果
CollapsingToolbarLayout,其作用是提供一个可以折叠的Toolbar。CollapsingToolbarLayout 继承自 FrameLayout。CollapsingToolbarLayout 设置 layout_scrollFlag 属性,可以控制包含在 CollapsingToolbarLayout 中的控件。比如mageView、Toolbar 在响应 layout_behavior 事件时做出相应的 scrollFlags 滚动事件。
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleGravity="right|bottom"
app:collapsedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:title="标题"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text1"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text2"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text3"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text4"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text5"
android:textColor="@color/colorAccent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout 属性 | 作用 |
---|---|
app:contentScrim | 用来设置 CollapsingToolbarLayout 收缩后最顶部的颜色 |
app:expandedTitleGravity | 表示将此 CollapsingToolbarLayout 完全展开后,title 所处的位置,默认值是 left | bottom |
app:collapsedTitleGravity | 表示当头部的 ImageView 消失后,title 回归到 Toolbar 的位置,默认值是 left。 |
app:layout_collapseMode | pin:固定模式,在折叠的时候最后固定在顶端;parallax:视差模式,在折叠的时候会有个视差折叠的效果 |
效果
Behavior
CoordinatorLayout 中最经典的设计就是 Behavior,@string/appbar_scrolling_view_behavior 其对应着的就是 AppBarLayout.ScrollingViewBehavior。我们可以自定义 Behavior 来实现自己的组件和滑动交互。
自定义 Behavior 可以分为两种方法:
- 定义的 View 监听 CoordinatorLayout 里的滑动状态,需要注意onStartNestedScroll() 和 onNestedPreScroll 方法;
- 定义的View监听另一个 View 的状态变化,例如View的大小、位置和显示状态等,需要注意 layoutDependsOn 和 onDependentViewChanged 方法。
定义一个底部提示条,向上滚动的时候其就消失,向下滚动时就出现。
第一种方法代码:
public class FooterBehavior extends CoordinatorLayout.Behavior<View> {
private int directionChange;
public FooterBehavior(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
}
@Override
public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull View child, @NonNull View directTargetChild, @NonNull View target, int axes, int type) {
return (axes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
}
@Override
public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull View child, @NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
if (dy > 0 && directionChange < 0 || dy < 0 && directionChange > 0) {
child.animate().cancel();
directionChange = 0;
}
directionChange += dy;
if (directionChange > child.getHeight() && child.getVisibility() == View.VISIBLE) {
hide(child);
} else if (directionChange < 0 && child.getVisibility() == View.INVISIBLE) {
show(child);
}
}
private void hide(final View view) {
ViewPropertyAnimator viewPropertyAnimator = view.animate()
.translationY(view.getHeight())
.setInterpolator(new FastOutLinearInInterpolator())
.setDuration(200);
viewPropertyAnimator.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.INVISIBLE);
}
});
viewPropertyAnimator.start();
}
private void show(final View view) {
ViewPropertyAnimator viewPropertyAnimator = view.animate()
.translationY(0)
.setInterpolator(new FastOutLinearInInterpolator())
.setDuration(200);
viewPropertyAnimator.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.VISIBLE);
}
});
viewPropertyAnimator.start();
}
}
onStartNestedScroll()方法的返回值表明这次滑动我们要不要关心,这里我们关心的是Y轴方向上的。
onNestedPreScroll()方法则用于处理滑动,这个参数child就是我们定义的LinearLayout;dy 则是我们水平滑动的距离,向上滑动为正值,向下滑动则为负值。
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleGravity="right|bottom"
app:collapsedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:title="标题"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text1"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text2"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text3"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text4"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="text5"
android:textColor="@color/colorAccent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/colorAccent"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="15dp"
app:layout_behavior=".design.FooterBehavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="自定义 Behavior"
android:textColor="@android:color/white"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
LinearLayout 布局中添加了 app:layout_behavior=".design.FooterBehavior"。 .design.FooterBehavior 是我们自定义 Behavior 的路径,其中省略了根路径,也可以完整路径。
效果
第二种方法代码:
public class FooterBehavior2 extends CoordinatorLayout.Behavior<View> {
public FooterBehavior2(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
float translatinY = Math.abs(dependency.getY());
child.setTranslationY(translatinY);
return true;
}
}
xml 代码部分
只需要把 LinearLayout 的 app:layout_behavior 改成 .design.FooterBehavior2。
效果
BottomSheetBehavior
BottomSheetBehavior 是 Android Support Library23.2 中引入的,它可以轻松实现底部动作条功能。
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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="打开" />
<LinearLayout
android:id="@+id/design_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="300dp"
app:elevation="6dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:src="@mipmap/ic_launcher" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
java 代码
private void initBottomSheetBehavior() {
final BottomSheetBehavior bottomSheetBehavior= BottomSheetBehavior.from(findViewById(R.id.design_bottom_sheet));
//设置默认先隐藏
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
findViewById(R.id.bt).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//根据状态不同显示隐藏
if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
}
});
//设置监听事件
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
//拖动
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
//状态变化
}
});
}
效果