CoordinatorLayout原理的简析

最新推荐文章于 2023-07-24 12:34:24 发布

super码王

最新推荐文章于 2023-07-24 12:34:24 发布

阅读量435

点赞数

分类专栏： Android那些事文章标签： android 安卓移动开发 app

本文链接：https://blog.csdn.net/qq_41885673/article/details/118344651

版权

Android那些事专栏收录该内容

64 篇文章 6 订阅

订阅专栏

在 CoordinatorLayout的简单使用文章中我们笼统的认识了一下 CoordinatorLayout 协调者布局，并学会了它配合 AppBarLayout 与 RecyclerView 的使用。

这篇文章，我就来带大家系统的了解一下 CoordinatorLayout 布局，他是如何协调他的子View 的。

效果展示

原理分析

毫无疑问，实现上述功能我使用了 CoordinatorLayout 这个系统为我们提供的布局。使用它的核心是编写 Behavior，即行为。这个时候聪明的你肯定会思考，当我的 Behavior 写好了之后，我该把它赋予谁呢？想弄清楚这个问题，你就得先理解这两个概念：Child 和 Dependency，（严格来说 Child、Dependency都是 CoordinatorLayout 的子 View）。我们从简解释：就是如过Dependency这个View发生了变化，那么Child这个View就要相应发生变化。发生变化是具体发生什么变化呢？这里就要引入Behavior，Child发生变化的具体执行的代码都是放在Behavior这个类里面。

代码展示

自定义可拖拽布局 CanDragView

package com.wust.SelfCoordinator;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Scroller;
import android.widget.TextView;

import androidx.annotation.Nullable;

/**
 * ClassName: CanDragView <br/>
 * Description: <br/>
 * date: 2021/6/29 9:45<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 */
public class CanDragView extends View {

    int startX;
    int startY;
    private Scroller scroller;
    private int moveX;
    private int moveY;

    public CanDragView(Context context) {
        this(context,null);
    }

    public CanDragView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CanDragView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            {
                startX =(int) event.getX();
                startY =(int) event.getY();
            }
                break;
            case MotionEvent.ACTION_MOVE:
            {
                int endX = (int) event.getX();
                int endY = (int) event.getY();
                moveX = endX - startX;
                moveY = endY - startY;
//                System.out.println("moveX ->" + moveX + "moveY ->" + moveY);
                //移动布局的关键性代码
                layout(getLeft()+moveX,getTop()+moveY,getRight()+moveX,getBottom()+moveY);
            }
                break;
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        System.out.println("onDraw ->");
    }
}

上面的属于自定义View的内容，和 CoordinatorLayout 无关。可拖拽布局的编写如果不会，大家可以参考 Android实现滑动的四种方式

有了上面基本知识的理解，下面我们来对着代码分析，毕竟实践是检验真理的位移标准。

第一步：准备布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.wust.SelfCoordinator.CanDragView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#f00"
            android:text="hello"/>
        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#0f0"
            android:layout_marginTop="200dp"
            app:layout_behavior=".MyBehavior"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>


</LinearLayout>

上面的布局很简单，在 CoordinatorLayout 中存在两个布局，其中我把 CoordinatorLayout 作为Dependency，TextView 作为 Child,也就是说 TextView 要随着 CoordinatorLayout 变化根据 Behavior 的指示来做出相应的动作。所以大家可以看到，app:layout_behavior=".MyBehavior" 是加在 TextView 上的。

第二步：编写 MyBehavior代码

package com.wust.SelfCoordinator;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.coordinatorlayout.widget.CoordinatorLayout;

/**
 * ClassName: MyBehavior <br/>
 * Description: <br/>
 * date: 2021/6/29 19:27<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 */
public class MyBehavior extends CoordinatorLayout.Behavior<TextView> {

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

    /**
    * 判断child的布局是否依赖dependency
    */
    @Override
    public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull TextView child, @NonNull View dependency) {
        //根据逻辑判断返回值
        //返回false表示child不依赖dependency，ture表示依赖
        return dependency instanceof CanDragView;
    }

    /**
    * 当dependency发生改变时（位置、宽高等），执行这个函数
    * 返回true表示child的位置或者是宽高要发生改变，否则就返回false(网上别人是这么说的)，可是我试了一下 true 和 false 都可以，所以说：实践是检验真理的唯一标准 完全没毛病
    */
    @Override
    public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull TextView child, @NonNull View dependency) {
        System.out.println("onDependentViewChanged我被调用了");
        //child要执行的具体动作
        return super.onDependentViewChanged(parent, child, dependency);
    }
}

从上面代码我们还可以很清楚的看到 Behavior 关键的两个方法：layoutDependsOn() 和 onDependentViewChanged()

我们目前没写 child 具体动作的实现，我们先来试一下当前代码写的是否可行。

由此可见，到目前为止，我们的代码都是没毛病的。

第三步：child具体动作的实现

package com.wust.SelfCoordinator;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.coordinatorlayout.widget.CoordinatorLayout;

/**
 * ClassName: MyBehavior <br/>
 * Description: <br/>
 * date: 2021/6/29 19:27<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 */
public class MyBehavior extends CoordinatorLayout.Behavior<TextView> {

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

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

        return dependency instanceof CanDragView;
    }

    @Override
    public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull TextView child, @NonNull View dependency) {
        // child 动作的实现
        int dependX = dependency.getLeft();
        int dependY = dependency.getTop();
        int X = dependX;
        int Y = dependY + dependency.getHeight();
        System.out.println("dependX ->" + dependX);
        setChildPosition(child,X,Y);

        return false;
    }

    private void setChildPosition(TextView view, int x, int y) {
        CoordinatorLayout.MarginLayoutParams params = (CoordinatorLayout.MarginLayoutParams) view.getLayoutParams();
        params.leftMargin = x;
        params.topMargin = y;
        view.setLayoutParams(params);
    }
}

到此为止，我们的大致效果就可以出来了，但是存在诸多问题，下面我就带大家来看看：

问题一：起初两个方块是相隔 100dp 的，为什么运行起来之后靠在一起了？

正常排版如下：

原因很简单，当Activity启动的时候，系统会自动帮我们调用一次 onDependentViewChanged() 这个方法，所以，当我们把 behavior 写完运行程序之后，两个方块就靠在一起了。

从这个问题中我们可以看到：onDependentViewChanged()会在两个时候被调用：程序启动的时候和 Dependency 移动的时候。你可以加入一个标志变量，过滤掉初次调用即可。

问题二：两个方块为什么一直抖，并且最后位置没变？

这个问题的根本原因在于红色方块，因为我们绿色方块的位置使跟随红色方块位置计算得来的。所以，安排好红色方块就天下太平了。

红色方块是我们的自定义View，在文章的开始我就把源码给大家粘贴出来了。从源码中可以看到，我们实现布局的滑动使用的是 Android实现滑动的四种方式中的 layout 法，这个方法代码简单，一句话就实现了滑动，可是有个毛病就是布局的 LayoutParams 参数值没变啊。于是就有了下面这段插曲：

红色方块使用layout法实现了移动 -》通过 behavior 指导绿色方块移动，可是大家别忘了绿色方块之所以能动，是得益于 setLayoutParams() ,这个方法会导致布局重绘 -》在布局重新绘制的时候，你红色方块 LayoutParams 参数值没变啊leftMargin，topMargin还是0 -》所以，红色方块就回到了原处 -》那绿色方块也不能闲着啊，就跟着一起回来了。

所以，大家就看到了他们俩在一直抖动。

解决方法很简单，改变红色方块移动的方式：代码如下：

package com.wust.SelfCoordinator;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.coordinatorlayout.widget.CoordinatorLayout;

/**
 * ClassName: CanDragView <br/>
 * Description: <br/>
 * date: 2021/6/29 9:45<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 */
public class CanDragView extends View {

    int startX;
    int startY;
    private Scroller scroller;
    private int moveX;
    private int moveY;

    public CanDragView(Context context) {
        this(context,null);
    }

    public CanDragView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CanDragView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            {
                startX =(int) event.getX();
                startY =(int) event.getY();
            }
                break;
            case MotionEvent.ACTION_MOVE:
            {
                int endX = (int) event.getX();
                int endY = (int) event.getY();
                moveX = endX - startX;
                moveY = endY - startY;
//                System.out.println("moveX ->" + moveX + "moveY ->" + moveY);
                //移动布局的关键性代码，scrollTo/scrollBy 移动的是 View中的内容 ViewGroup中的子View
                //这里不能使用这种方法，因为这种方法位置参数没有改变
//                layout(getLeft()+moveX,getTop()+moveY,getRight()+moveX,getBottom()+moveY);
                CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) getLayoutParams();
                layoutParams.leftMargin = getLeft() + moveX;
                layoutParams.topMargin = getTop() + moveY;
                setLayoutParams(layoutParams);
            }
                break;
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        System.out.println("onDraw ->");
    }
}

最后，完美解决：

super码王

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CoordinatorLayout原理的简析

在CoordinatorLayout的简单使用文章中我们笼统的认识了一下CoordinatorLayout 协调者布局，并学会了它配合AppBarLayout 与RecyclerView 的使用。这篇文章，我就来带大家系统的了解一下CoordinatorLayout 布局，他是如何协调他的子View 的。效果展示原理分析毫无疑问，实现上述功能我使用了CoordinatorLayout 这个系统为我们提供的布局。使用它的核心是编写Behavior，即行为。这个时候聪明的你...
复制链接

扫一扫