掌握CoordinatorLayout

原文链接

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

时间： 2024-10-10 09:48:01

掌握CoordinatorLayout的相关文章

Android CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar 等的说明和使用

请尊重个人劳动成果,转载注明出处,谢谢! http://blog.csdn.net/amazing7/article/details/51918623 1. CoordinatorLayout 我们通常把CoordinatorLayout作为顶层布局来协调其子布局之间的动画效果. 子view1在布局中通过设置behavior属性与子view2关联,当移动view2的时候view1产生相应的效果,而这个效果具体是怎么样的由behavior类来决定.我们把view1叫做Child,view2叫做De

CoordinatorLayout学习笔记

CoordinatorLayout是一个增强型的FrameLayout.它的作用有两个 作为一个布局的根布局 最为一个为子视图之间相互协调手势效果的一个协调布局 代码如下: <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/

Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)

在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚动RecylerView,Tab恢复出现.这么做的好处在于,用户能有更多的空间位置去看列表里面的内容. 实现步骤: <?xml version="1.0" encoding="utf-8"?> <android.support.design.widge

CoordinatorLayout翻译

CoordinatorLayout https://developer.android.google.cn/reference/android/support/design/widget/CoordinatorLayout.html public class CoordinatorLayoutextends ViewGroup implements NestedScrollingParent java.lang.Object   ?android.view.View      ?android.

CoordinatorLayout使用笔记

CoordinatorLayout的使用笔记 首先第一个子控件是AppBarLayout存放首部控件,里面放了一个CollapsingToolbarLayout.代码如下: <android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_heigh

【知识必备】一文让你搞懂design设计的CoordinatorLayout和AppbarLayout联动，让Design设计更简单~

一.写在前面 其实博主在之前已经对design包的各个控件都做了博文说明,无奈个人觉得理解不够深入,所以有了这篇更加深入的介绍,希望各位看官拍砖~ 二.从是什么开始 1.首先我们得知道CoordinatorLayout是什么玩意儿,到底有什么用,我们不妨看看官方文档的描述: CoordinatorLayout是一个"加强版"FrameLayout,它主要有两个用途: 1.用作应用的顶层布局管理器,也就是作为用户界面中所有UI控件的容器 2.用作相互之间具有特定交互行为的UI控件的容器

安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用

在前面的Design中,学习使用了TabLayout,NavigationView与DrawerLayout实现的神奇效果,今天就带来本次Design包中我认为最有意义的控件CoordinatorLayout. 当然还有SnackBar,不过他在实际运用中一般都是和CoordinatorLayout搭配使用的. 先说下SnackBar,这个控件其实我觉得和Toast没什么差别,不过功能上的确有增强.这个控件可以通过setAction方法设置类似按钮一样的东西.而且这个东西可以设置多个. 重点还是

CoordinatorLayout的简单应用（材料设计新控件）

CoordinatorLayout字面意思为:协调布局,一般作为根布局使用.关于这个布局,记录一下两个用法,备忘. 一.配合 FloatingActionBar 使用 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res

Android开发学习之路-Android Design Support Library使用（CoordinatorLayout的使用）

效果图: 上面的这个图有两个效果是,一个是顶部的图片,在上滑之后会隐藏起来并且显示出一个ToolBar(ToolBar类似于ActionBar,但是只有ToolBar是兼容Material Desig的库).另一个是底部的这个按钮,这个按钮点击之后会出现一个SnackBar(比Toast要强大,因为可以设定点击的监听事件),在按钮点击之后SnackBar出现之后按钮会自动的向上移动避免被遮挡,这是CoordinatorLayout的一个功能. Android Design Support Lib

Android Design Support Library（三）用CoordinatorLayout实现Toolbar隐藏和折叠

此文的代码在Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果代码的基础上进行修改,如果你没有看过本系列的第一篇文章最好先看一看. CoordinatorLayout是Android Design Support Library中比较难的控件,顾名思义,它是用来组织它的子views之间协作的一个父view.CoordinatorLayout默认情况下可理解是一个FrameLayout,它的布局方式默认是一层一层叠上去,在这里我会介