原文链接

Mastering the Coordinator Layout

在Google I/0 2015大会上,Google发布了一个与Material Design相关的控件支持库,在这个控件库中我们可以找到很多新的ViewGroup控件,例如 AppBarLayout,CollapsingToolbarLayout和CoordinatorLayout.
考虑到这些新的控件非常有用,因此我决定写一篇文章来介绍其相关的配置和使用技巧.

CoordinatorLayout

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

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

举一个使用CoordinatorLayout的简单例子:

<?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: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>

在上面的layout布局文件中,CoordinatorLayout直接包含了3个子控件,分别是:
AppBarLayout,NestedScrollView和FloatingActionBar.

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

AppBarLayout

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

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

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

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

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

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

<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 /> <!-- no flags -->
</AppBarLayout>

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

AppbarLayout flags

SCROLL_FLAG_ENTER_ALWAYS: 当任何向下滚动事件发生时,View都会移入,不管scrolling view是否正杂滚动.
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED: 它是”enterAlways”的附件属性,它是的View恢复到指定的最小高度后来开始显示,然后再慢慢展开.
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED:当向上移出屏幕时,View会一直收缩到最小高度后,再移出屏幕.
SCROLL_FLAG_SCROLL:View会根据指定方向进行滚动.
SCROLL_FLAG_SNAP:当滚动结束时,如果这个View只有部分可见,它将会自动滚动到最近的边界（完全可见或者完全隐藏）.

CoordinatorLayout Behaviors

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

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

答案在FloatingActionBar的源代码里,从Android Studio1.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 out
                child.hide();
            } else {
                // Else, we‘ll animate our FAB back in
                child.show();
            }
        }
    }

    ...
}

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

SwipeDismissBehavior

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

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_swipe_behavior);
    mCardView = (CardView) findViewById(R.id.swype_card);

    final SwipeDismissBehavior<CardView> 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);
}

Custom Behaviors

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

Childs and dependencies

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

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

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

• layoutDependsOn
• onDependentViewChanged

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

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

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

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);
} 

完整的自定义Behavior代码:

?public static class AvatarImageBehavior 
   extends ?CoordinatorLayout.Behavior<CircleImageView> {

   @Override
   public 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);
    }    
}

Resources

Coordinator Behavior Example - Github
Coordinator Examples - Github
Introduction to coordinator layout on Android - Grzesiek Gajewski