Material Design——Coordinator Layout

最新推荐文章于 2024-08-15 13:29:08 发布

Newbie丶Chen

最新推荐文章于 2024-08-15 13:29:08 发布

阅读量891

点赞数

分类专栏： Android Android自定义View

本文链接：https://blog.csdn.net/chen19960724/article/details/52841874

版权

Android 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

Android自定义View

6 篇文章 0 订阅

订阅专栏

楔子

最近正在模仿制作知乎日报，知乎日报的详情页有这样的效果。经过查询之后发现原来可以使用Coordinator Layout完成该效果，所以就好好学了一下这个View。

CoordinatorLayout简介

CoordinatorLayout的作用

首先我们要知道，CoordinatorLayout是继承于FrameLayout。然后才是其功能，作用是放入CoordinatorLayout中的View都能够发生相对滑动。也就是说CoordinatorLayout中的子View都可以监听其他子View的滑动。那么如何监听其他子View的行为并采取相应措施的呢？这就需要用到CoordinatorLayout的辅助类Behavior

CoordinatorLayout的简单使用

主要参数介绍

1、首先需要引入Meterial Design的外部依赖：

    compile 'com.android.support:design:23.4.0'

2、 CoordinatorLayout继承了FrameLayout，所以我们使用

    android:layout_gravity="left|top|right|bottom"

控制View在Layout中的位置。

3、对子View设置Behavior类监听

    app:layout_behavior="类的绝对地址名"

这个就相当于setListener()方法，绑定View的行为。当被观察者发生改变，就调用Behavior的方法。让当前View对该事件做出相应的处理。

Behavior类的使用

Behavior的方法可以分为两组

第一组：某个view监听另一个view的状态变化，例如大小、位置、显示状态等

方法解析

    //作用：判断当前View监听CoordinatorLayout中的哪一个View

    /**
    *  CoordinatorLayout parent：这个不用说就是当前的Cooridnator
    *  View child：这个表示我们设置这个Behavior的View，
    *  View dependency：我们关心的那个View。或者说是被监听的View
    *  (这个View从哪里来的呢？ CoordinatorLayout的子类都是dependency)
    *  返回值：是否view是否监听当前的这个dependency。
    */
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return super.layoutDependsOn(parent, child, dependency);
    }

    //作用：当被监听对象的大小、位置、显示状态等发生改变的时候，就会回调该方法。

    /**
    *参数与layoutDependsOn()的参数一致就不解释了。
    */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        return super.onDependentViewChanged(parent, child, dependency);
    }

实际操作

任务：实现一个联动的TextView

效果图：

原理：

首先我们需要制作一个可以跟着鼠标移动的TextView，叫做MoveTextView
右边的TextView通过监听左边TextView的滑动，创建自己的Behavior
通过使用CooridnatorLayout设置xml布局

展示代码：

//第一步：设置可随手指移动的TextView
public class MoveTextView extends TextView {

    private int lastY = 0;

    public MoveTextView(Context context) {
        super(context);
    }

    public MoveTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MoveTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取左上角的Y值
        int currentY = (int) event.getRawY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                //获取距离差
                int dy = currentY - lastY;
                //获取移动后的Y值
                int tvY = (int) this.getY() + dy;
                //设置tv的位置
                this.setY(tvY);
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        lastY = currentY;
        return true;
    }
}

//第二步：将tvRight的逻辑写在Behavior中
public class MoveBehavior extends    CoordinatorLayout.Behavior<View> {

    //注意：必须重写构造方法
    public MoveBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {

        return dependency instanceof MoveTextView;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        //设置值
        child.setY(dependency.getY());
        return true;
    }
}

    <!--第三步：设置xml布局-->
    <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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.newbiechen.usecoordinator.MainActivity">

    <com.newbiechen.usecoordinator.widget.MoveTextView
        android:id="@+id/main_tv_left"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="center"
        android:layout_gravity="left|top"
        android:background="@color/colorPrimary"
        android:text="Hello World!"
        android:textColor="@android:color/white"/>

    <!--在这里设置app:layout_behavior="xxx"-->

    <TextView
        android:id="@+id/main_tv_right"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="center"
        android:layout_gravity="right|top"
        android:text="Hello EveryOne"
        android:background="@color/colorAccent"
        android:textColor="@android:color/white"                                
        app:layout_behavior="com.newbiechen.usecoordinator.behavior.MoveBehavior"/>
</android.support.design.widget.CoordinatorLayout>

补充：

在第二步中我们自定了一个Behavior，发现这个类居然有一个泛型参数，在一般情况下我们可以不需要管他，直接设置为View就可以了。
同样是在第二步自定义View中，有一个地方我们需要十分注意，那就是必须要重写Behavior的构造方法！!Behavior的构造方法！!Behavior的构造方法！!因为，CoordinatorLayout是通过反射调用Behavior的构造方法来创建Behavior的。所以必须要重写Behavior的构造方法，否则会报ClassNotFoundException。

第二组：某个view监听另一个View的滑动状态

方法解析

    //作用：当View开始滑动的时候回调。

    /**
    *  主要参数说明：
    *  View target：依赖的View
    *  int nestedScrollAxes：表示滑动的方法，(横向或者纵向)
    *  返回值：判断判断当前View是否接收这种滑动。
    */
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    //作用：当正在滑动的时候回调

    /**
    * 主要参数说明：
    * int dx：表示与上次相比x的偏移量
    * int dy：表示与上次相比y的偏移量
    */
    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
    }

    //作用：当ScrollView脱离点击，自动滑动时候的回调

    /**
    * 主要参数说明：
    * float velocityX：表示滑动时候横向上的速度
    * float velocityY：表示滑动时候纵向上的速度
    */
    @Override
    public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY) {
        return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY);
    }

实际操作

任务：实现联动的ScrollView

效果图：

展示代码：

public class ScrollBehavior extends CoordinatorLayout.Behavior<View>{

    public ScrollBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        //表示：判断当前滑动是否为竖直方向上的滑动，如果是则接受该滑动
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
        //获取被监听的ScrollView的内部Y的偏移量
        int scrollY = target.getScrollY();
        //将被监听View的Y的偏移量赋值给当前View
        child.setScrollY(scrollY);
    }

    @Override
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY, boolean consumed) {
        //表示child自动滑动的速度与被监听的View的速度相同
        ((NestedScrollView) child).fling((int) velocityY);
        return true;
    }
}

<!--xml布局-->
    <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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.newbiechen.usecoordinator.MainActivity">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|top">
        <!--滑动的内容，太多了，不展示-->
    </android.support.v4.widget.NestedScrollView>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="right|top"
        app:layout_behavior="com.newbiechen.usecoordinator.behavior.ScrollBehavior">
        <!--滑动的内容，太多了，不展示-->
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

补充

发现在xml布局中，我并没有使用ScrollView，而是使用了NestedView。原因是ScrollView在滑动过程中，无法触发Behavior的onStartNestedScroll()等一系列滑动回调。为什么会这样呢？

原因是Coordinator是通过NestedScrollingChild接口，来回调Behavior的滑动方法的。在api23中，只有RecyclerView和NestedView继承了NestedScrollingChild接口，所以当滑动的时候，触发NestedScollingChild从而调用Behavior的滑动方法。所以如果想进行滑动监听ListView和ScrollView是无法使用的。如果真的想监听其他View，那么只能继承NestedScrollingChild并根据源码重写了。

Coordinator的优点

从上述的例子我们知道了Coordinator是如何使用的，那么Google为什么需要创建一个这样的Layout，在没有Coordinator之前，我们是通过什么方式建立相对滑动的呢？Coordinator相对于之前的方式带给我们的优点是什么呢？

不利用Coordinator实现第一幅Gif中，两个TextView的联动

展示代码：

/*  继承TextView，自定义MoveTextView。
 1.  通过OnTouchEvent()方法，监听点击事件。自定义Listener设置回调
 */
public class MoveTextView extends TextView {
    private OnMoveListener mMoveListener;
    private int lastY = 0;

    public MoveTextView(Context context) {
        super(context);
    }

    public MoveTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MoveTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取左上角的Y值
        int currentY = (int) event.getRawY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                //获取距离差
                int dy = currentY - lastY;
                //获取移动后的Y值
                int tvY = (int) this.getY() + dy;
                //设置tv的位置
                this.setY(tvY);
                if (mMoveListener != null){
                    mMoveListener.onMove(tvY);
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        lastY = currentY;
        return true;
    }

    //设置TextView移动的监听器
    public interface OnMoveListener{
        void onMove(int y);
    }

    //添加监听器的方法
    public void setOnMoveListener(OnMoveListener listener){
        mMoveListener = listener;
    }
}

public class MainActivity extends AppCompatActivity {
    private MoveTextView mTvLeft;
    private TextView mTvRight;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTvLeft = (MoveTextView) findViewById(R.id.main_tv_left);
        mTvRight = (TextView) findViewById(R.id.main_tv_right);
        initClick();
    }

    private void initClick(){
        //设置监听的回调
        mTvLeft.setOnMoveListener(new MoveTextView.OnMoveListener() {
            @Override
            public void onMove(int y) {
            //在Activity中，通过设置回调，实现右侧的TextView移动
                mTvRight.setY(y);
            }
        });
    }
}

根据当前代码与使用CoordinatorLayout的代码进行对比。我们可以很容易的得出下列结论：
1. 没有CoordinatorLayout的话，需要重写View并自定义一个监听器，通过监听器建立相对滑动。如果使用CoordinatorLayout就不需要自定义监听器。（方便）
2. CoordinatorLayout的行为是写在Behavior类中的，未使用Coordinator的行为是写在Activity中的，这样无疑增加了Activity类的复杂度，并且如果不同的View有相同的行为的话，这种做法的耦合度太高，不利于代码的复用。(对行为进行解耦 )
3. Behavior能够监听多种View的行为，并作出相应的行为。(监听多个View)

Coordinator常用实现

模仿知乎的Toolbar（楔子中的Gif图）

首先需要知道AppBarLayout

作用：是Toolbar的扩展，能够装填Toolbar以外的View合并成一个ActionBar。并且内部的View的滑动由AppBarLayout控制。并且设置沉浸式导航栏的背景为透明，Toolbar的标题从大到小的动画。

主要属性：

AppBarLayout继承了LinearLayout，默认是竖直排布
app:layout_scrollFlags=”” 用来控制内部View的滑动。

可用参数：

scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

其次需要知道CollaspingToolbarLayout

作用：折叠内部的View,必须在AppbarLayout中使用

主要参数：

app:layout_collapseMode=”pin | parallen”

pin:固定模式，在折叠的时候最后固定在顶端

parallen:视差模式，在折叠的时候会有个视差折叠的效果

app:layout_collapseParallenMultiplier=”0~1” 滑动的时候视觉差的程度，参数由0~1

最后代码

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/content_app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/theme_brief_height"
        android:fitsSystemWindows="true"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/content_collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimaryDark"
            app:expandedTitleMarginStart="5dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/content_iv_title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </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"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <WebView
            android:id="@+id/content_webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </WebView>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

补充

我们在xml中发现，有这么一行app:layout_behavior=”@string/appbar_scrolling_view_behavior”
这样使用是因为，android为我们提供了默认的behavior对一些特殊的View。当前的behavior就是针对AppbarLayout的。

FloatingActionButton的使用

作用：顾名思义，是一个浮动的Button，当和SnackBar一起使用的时候，会产生根据SnackBar出现与消失的移动效果。
(本篇主要是讲FloatingActionButton与CoordinatorLayout的关系，并不讲解FloatingActionButton的具体使用)

效果图：

展示代码：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        android:src="@mipmap/ic_launcher"/>
</android.support.design.widget.CoordinatorLayout>

public void onCreate(Bundle saveBundle){
    setContent(R.layout.activity_main);
    //获取FloatButton，设置监听器
    findViewById(R.id.fab)
                .setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        //设置SnackBar
                        Snackbar.make(v,"Hello EveryOne",Snackbar.LENGTH_LONG)
                                .setAction("cancel", new View.OnClickListener() {
                                    @Override
                                    public void onClick(View v) {
                                        //关闭SnackBar时候的监听
                                    }
                                }).show();
                    }
                });
}

为什么FloatingActionButton能够实现上移下沉的效果，原来是FloatButton默认使用了FloatingActionButton.Behavior。
根据源码：

        @Override
public boolean layoutDependsOn(CoordinatorLayout parent,
                FloatingActionButton child, View dependency) {
            // We're dependent on all SnackbarLayouts (if enabled)
       return SNACKBAR_BEHAVIOR_ENABLED && dependency instanceof Snackbar.SnackbarLayout;
}

我们可以得出，FloatActionButton依赖于SnackBar的行为。所以当SnackBar改变的时候，会调用Behavior的回调。

在知乎的首页就有利用FloatActionButton的实例
（黄色按钮的显示与隐藏）

效果图：