掌握CoordinatorLayout

原文链接

the

在 I/0 2015大会上,发布了一个与 相关的控件支持库,在这个控件库中我们可以找到很多新的控件,例如 ,out和.

考虑到这些新的控件非常有用,因此我决定写一篇文章来介绍其相关的配置和使用技巧.

这个控件的作用和它的名字描述一样,是用来协调它里面所有子view行为的控件.

考虑下面的例子:

我们可以看到View之间是相互配合的,View会根据其他View的滑动而做出相应的变化.

举一个使用的简单例子:

<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:background="@android:color/background_light"android:fitsSystemWindows="true"><android.support.design.widget.AppBarLayout
        android:id="@+id/id_main_appbar"android:layout_width="match_parent"android:layout_height="300dp"android:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/id_main_collapsing"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginEnd="64dp"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageView
                android:id="@+id/id_main_backdrop"android:layout_width="match_parent"android:layout_height="match_parent"android:contentDescription="@null"android:fitsSystemWindows="true"android:scaleType="centerCrop"android:src="@mipmap/ic_launcher"app:layout_collapseMode="parallax" /><android.support.v7.widget.Toolbar
                android:id="@+id/id_main_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />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="wrap_content"android:lineSpacingExtra="8dp"android:padding="@dimen/activity_horizontal_margin"android:text="@string/lorem"android:textSize="20sp" />android.support.v4.widget.NestedScrollView><android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="@dimen/activity_horizontal_margin"android:src="@mipmap/ic_launcher"app:layout_anchor="@id/id_main_appbar"app:layout_anchorGravity="bottom|right|end" />android.support.design.widget.CoordinatorLayout>

在上面的布局文件中,直接包含了3个子控件,分别是:

,和.

<CoordinatorLayout><AppbarLayout/><scrollableView/><FloatingActionButton/>
CoordinatorLayout>

是一个继承的,默认是垂直方向.它可以控件它里面子控件的滚动行为.直接听起来可能比较疑惑,我用一个git图片来描述一下:

在上面的gif图片中,是那个整体的蓝色View,它里面包含了可以收缩的图片,一个,一个用来包含标题和副标题,以及一个.

我们可以通过设置来直接控制中的子控件.在这个例子中,大部分子View的属性都设置了,如果没有设置的话,当可滚动的View进行滚动时,这些没有设置属性的View的位置会保持不变.

设置值为snap,可以避免进入动画中间状态,这意味着动画会一直持续到View完全显示或者完全隐藏为止.

其中包含了一个标题和一个副标题,当用户向上移动时是一直显示的,直到移出屏幕.而是会一直可见的,因为我们没有在上设置任何滚动属性.

正如你所见,的强大管理能力是通过给子View设置不同的属性来实现的.

<AppBarLayout><CollapsingToolbarLayout
        app:layout_scrollFlags="scroll|snap"/><Toolbar
        app:layout_scrollFlags="scroll|snap"/><LinearLayout
        android:id="+id/title_container"app:layout_scrollFlags="scroll|enterAlways"/><TabLayout /> 
AppBarLayout>

这些参数的设置需要参考 docs.我建议大家通过代码练习来掌握它们,我会在文章的末尾提供几个上的例子来供大家学习参考.

flags

WAYS: 当任何向下滚动事件发生时,View都会移入,不管 view是否正杂滚动.

: 它是””的附件属性,它是的View恢复到指定的最小高度后来开始显示,然后再慢慢展开.

:当向上移出屏幕时,View会一直收缩到最小高度后,再移出屏幕.

:View会根据指定方向进行滚动.

:当滚动结束时,如果这个View只有部分可见,它将会自动滚动到最近的边界（完全可见或者完全隐藏）.

让我们来做一个小测试,打开 (大于1.4版本),使用 模板来创建一个,编译运行之后如下所示:

当我们来生成的代码,不过是还是java类中我们都找不到滚动变化的源码.为什么呢？

答案在的源代码里,从 .2版本开始,增加了ctrl+click可以查看源代码,源码如下:

/** Copyright (C) 2015 The Android Open Source Project**  Floating action buttons are used for a*  special type of promoted action. *  They are distinguished by a circled icon *  floating above the UI and have special motion behaviors *  related to morphing, launching, and the transferring anchor point.* *  blah.. blah.. */
@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class)
public class FloatingActionButton extends ImageButton {...public static class Behavior extends CoordinatorLayout.Behavior<FloatingActionButton> {private boolean updateFabVisibility(CoordinatorLayout parent, AppBarLayout appBarLayout, FloatingActionButton child {if (a long condition) {// If the anchor's bottom is below the seam, // we'll animate our FAB outchild.hide();} else {// Else, we'll animate our FAB back inchild.show();}}}...
}

负责缩放动画的是 引入的新元素,在这个例子中是..它会根据一些滚动条件,来判断是否显示.

继续深入理解源码,我们可以在 库的源码中发现一个类.通过这个,我们可以通过轻松实现滑动删除的效果.

@Override
public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_swipe_behavior);mCardView = (CardView) findViewById(R.id.swype_card);final SwipeDismissBehavior swipe = new SwipeDismissBehavior();swipe.setSwipeDirection(SwipeDismissBehavior.SWIPE_DIRECTION_ANY);swipe.setListener(new SwipeDismissBehavior.OnDismissListener() {@Override public void onDismiss(View view) {Toast.makeText(SwipeBehaviorExampleActivity.this,"Card swiped !!", Toast.LENGTH_SHORT).show();}@Override public void onDragStateChanged(int state) {}});LayoutParams coordinatorParams = (LayoutParams) mCardView.getLayoutParams();coordinatorParams.setBehavior(swipe);
}

创建一个自定义的,不像大家想象的那么难.在开始之前,我们必须明确两个元素: child和.

and

child是指使用的view,是的触发器,并和child进行互动.在这个例子中,child是一个,是,当发生了移动,也跟随移动.

现在我们已经明确了child和的概念,接下来我们讲一下如何实现.

第一步我们需要继承.,其中T是View对象,在上面的例子中是.接下来,我们必须重写两个方法:

方法在布局发生变化时被回调,我们需要在发生变化时返回true.在上面的例子中,当用户滑动屏幕时这个方法被自动调用,我们需要让child做出相应的反应.

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {return dependency instance of Toolbar;
}

当返回true时,ed函数就会被调用.在这个方法中,我们需要实现动画效果.

public boolean onDependentViewChanged(
CoordinatorLayout parent, CircleImageView avatar, View dependency) {
modifyAvatarDependingDependencyState(avatar, dependency);
}private void modifyAvatarDependingDependencyState(
CircleImageView avatar, View dependency) {//  avatar.setY(dependency.getY());//  avatar.setBlahBlat(dependency.blah / blah);
} 

完整的自定义代码:


public static class AvatarImageBehavior extends 
CoordinatorLayout.Behavior<CircleImageView> {@Overridepublic boolean layoutDependsOn(
CoordinatorLayout parent, CircleImageView, child, View dependency) {return dependency instanceof Toolbar; } 

public boolean onDependentViewChanged(
CoordinatorLayout parent, CircleImageView avatar, View dependency) {
modifyAvatarDependingDependencyState(avatar, dependency);}private void modifyAvatarDependingDependencyState(CircleImageView avatar, View dependency) {//  avatar.setY(dependency.getY());//  avatar.setBlahBlah(dependency.blah / blah);}    
}

-

-

to on -