美文网首页Android developer技术Android开发之旅
CoordinatorLayout的使用如此简单

CoordinatorLayout的使用如此简单

作者: huachao1001 | 来源:发表于2016-06-01 13:01 被阅读9657次

    我的CSDN博客同步发布:CoordinatorLayout的使用如此简单

    曾在网上找了一些关于CoordinatorLayout的教程,大部分文章都是把CoordinatorLayoutAppbarLayoutCollapsingToolbarLayout 以及Toolbar等一起使用来介绍,这让我不知不觉在心中认为把这几个布局要一起使用,而且只是用于那种场景中。其实CoordinatorLayout的功能并不是局限于与AppBarLayout一起使用,它的功能强大着呢,本文主要对CoordinatorLayout的使用进行介绍,后面再写一篇文章将AppBarLayoutCollapsingToolBarLayout整合CoordinatorLayout一起。那么到底CoordinatorLayout有多好用,请往下感受吧~

    CoordinatorLayout能做什么

    在学习CoordinatorLayout之前,很有必要了解CoordinatorLayout能帮我们做什么,从名字上可以看出,就是帮我们协调子View的。怎么个协调法呢?就是它根据我们的定制,帮助我们协调各个子View的布局。我们先看一组动画图~

    CoordinatorLayout演示 CoordinatorLayout演示截图

    稍微解释一下这个动画,蓝色的矩形是我们一个普通View,黄色的Hello是一个Button。我们水平拖动蓝色矩形时,黄色Button沿着与蓝色矩形相反方向移动;竖直移动蓝色矩形时,黄色也跟着竖直。简而言之:它们在竖直方向同步移动,在水平方向相反。

    这个效果如果让你不用CoordinatorLayout去实现,应该没有任何问题,但是代码的耦合度应该非常大,你的代码必须要持有2个View的引用,然后在onTouchEvent里面做各种判断。如果我们想要实现的功能是,有更多的View要根据蓝色的View的移动相应作出响应,那么那就得在蓝色ViewonTounchEvent里面针对其他的View处理各种逻辑。这耦合度未免太伤感了~

    CoordinatorLayout既然号称能帮我们协调子View的布局,我们接下来看看CoordinatorLayout如何实现~

    CoordinatorLayout使用

    CoordinatorLayout的使用核心是BehaviorBehavior就是执行你定制的动作。在讲Behavior之前必须先理解两个概念:ChildDependency,什么意思呢?Child当然是子View的意思了,是谁的子View呢,当然是CoordinatorLayout的子View;其实Child是指要执行动作的CoordinatorLayout的子View。而Dependency是指Child依赖的View。比如上面的gif图中,蓝色的View就是Dependency,黄色的View就是Child,因为黄色的View的动作是依赖于蓝色的View。简而言之,就是如过Dependency这个View发生了变化,那么Child这个View就要相应发生变化。发生变化是具体发生什么变化呢?这里就要引入BehaviorChild发生变化的具体执行的代码都是放在Behavior这个类里面。

    怎么使用Behavior呢,首先,我们定义一个类,继承CoordinatorLayout.Behavior<T>,其中,泛型参数T是我们要执行动作的View类,也就是Child。然后就是去实现Behavior的两个方法:

    /**
    * 判断child的布局是否依赖dependency
    */
       @Override
     public boolean layoutDependsOn(CoordinatorLayout parent, T child, View dependency) {
        boolean rs;
        //根据逻辑判断rs的取值
        //返回false表示child不依赖dependency,ture表示依赖
        return rs;  
    }
    
    /**
    * 当dependency发生改变时(位置、宽高等),执行这个函数
    * 返回true表示child的位置或者是宽高要发生改变,否则就返回false
    */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, T child, View dependency) {
         //child要执行的具体动作
            return true;
    }
    

    有了上面的概念后,我们看看具体怎么去实现吧~

    为了响应跟随手指移动的操作,我们定义一个非常简单的View,这个View只响应跟随手指移动,将这个View作为Dependency。由于过于简单,这个View源码不粘贴,我们只需知道这个View的类名叫:TempView

    我们看看Behavior的使用:

    package com.hc.studycoordinatelayout;
    
    import android.content.Context;
    import android.support.design.widget.CoordinatorLayout;
    import android.util.AttributeSet;
    import android.util.DisplayMetrics;
    import android.view.View;
    import android.widget.Button;
    
    /**
     * Package com.hc.studycoordinatelayout
     * Created by HuaChao on 2016/6/1.
     */
    public class MyBehavior extends CoordinatorLayout.Behavior<Button> {
        private int width;
    
        public MyBehavior(Context context, AttributeSet attrs) {
            super(context, attrs);
            DisplayMetrics display = context.getResources().getDisplayMetrics();
            width = display.widthPixels;
        }
    
        @Override
        public boolean layoutDependsOn(CoordinatorLayout parent, Button child, View dependency) {
            //如果dependency是TempView的实例,说明它就是我们所需要的Dependency
            return dependency instanceof TempView;
        }
    
        //每次dependency位置发生变化,都会执行onDependentViewChanged方法
        @Override
        public boolean onDependentViewChanged(CoordinatorLayout parent, Button btn, View dependency) {
            
            //根据dependency的位置,设置Button的位置
            
            int top = dependency.getTop();
            int left = dependency.getLeft();
    
            int x = width - left - btn.getWidth();
            int y = top;
    
            setPosition(btn, x, y);
            return true;
        }
    
        private void setPosition(View v, int x, int y) {
            CoordinatorLayout.MarginLayoutParams layoutParams = (CoordinatorLayout.MarginLayoutParams) v.getLayoutParams();
            layoutParams.leftMargin = x;
            layoutParams.topMargin = y;
            v.setLayoutParams(layoutParams);
        }
    
    
    }
    
    

    OK,现在我们为Button类指定了Dependency,并且定义好了跟随Dependency一直变化的动作(Behavior),接下来我们就要指定好为哪个具体的Button实例来绑定这些。方法很简单,直接在布局文件指定就好:

    <?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.hc.studycoordinatelayout.MainActivity">
    
        <Button
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="300dp"
            android:layout_marginTop="300dp"
            android:background="#FFCC00"
            android:text="Hello"
            app:layout_behavior="com.hc.studycoordinatelayout.MyBehavior" />
    
        <com.hc.studycoordinatelayout.TempView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginLeft="300dp"
            android:layout_marginTop="300dp"
            android:background="#3366CC"  />
    </android.support.design.widget.CoordinatorLayout>
    
    

    是不是很简单呢?我们只需关注Behavior的编写就好了,把ChildDependency之间的关系完全解耦了~

    附上源码地址:http://download.csdn.net/detail/huachao1001/9537636

    相关文章

      网友评论

      • 楷桐:ViewdragHelper和Coordinator这两个有什么区别。。。感觉都能互相替代。。
      • 乌冬国:gif图怎么制作:blush:
      • 冰凌孤星:自定义TempView的时候, onTouchEvent方法中setLayoutParams后多调用了一个requestLayout了.
      • 准备流浪的雪:CoordinatorLayout中有一个appbarlayout和一个bottomsheetBehavior的布局,怎么让bottomsheetBehavior展开的时候,appbarlayout执行appbar_scrolling_view_behavior,这个该怎么实现呢
      • xiayuexingkong:作者写得特别棒,讲解的挺仔细,赞一个
      • 非典型的程序员:请问coordinatelayout 不能使用holo主题吗?使用holo主题在布局会提示 Select Theme.AppCompat or a descendant in the theme selector.
        运行会报错
      • 猪上村树:请问楼主,CoordinatorLayout能放在Frgment中使用吗
      • 廖华凯:通俗易懂的好文章!
      • 281072019671:写的很棒!学习了。但我这里有一个疑问,要怎么设置才能做到,默认是收起的样式,用户往下来才会展开全部?我尝试了各种flag结合还有高度的设置,都不太对。
      • ania:全网内比较清晰易懂的一篇文档,看完对CoordinatorLayout和Behavior算是入门了,理解了概念,感谢~
      • 9e07fa19e1ed:简单易懂,很棒
      • MonkiRayman:最近一直在找关于MD的文章,文章写得不错。感谢
      • a9d856c4dba7:啊..打赏忘记登录了..作者我想问你一下AppBarLayout的一点小问题QWQ可以吗.
      • SavySoda:mark,as自己创建的布局都用这个当根
      • 拒绝飞的鸟:通熟易懂 赞一个
      • Jsonzhang:感谢,楼主
      • Victor123:楼主源码下不下来 能发qq邮箱不 : 946072729@qq.com
      • 2eb56199844d:请教个问题:我:
        当设置 app:layout_scrollFlags="scroll|enterAlways" 这个属性的时候,toolbar会随着recycleview 滚动隐藏,但是右下角的floatactionbar也会跟着动,如何禁止fab滑动
        我:
        并且fab margin值设为16dp的时候,默认情况会被遮住,只有向上滑动toolbar隐藏才会变为真实的16dp
        2eb56199844d:@huachao1001 好的,加你微信了
        huachao1001:@fewwind 需要看源码才能找出问题,可以私聊讨论
      • 凉了夏天宝贝:新技能get,感谢楼主
      • 吃葡萄皮不吐葡萄:多谢作者,已赞赏。
        huachao1001:@吃葡萄皮不吐葡萄 非常感谢您的打赏!第一次收到打赏,好开心,好激动,非常感谢@吃葡萄皮不吐葡萄 再次感谢!!!
      • ytuio21:才知道是用来协调的
      • xiaowen_2010:好神奇啊
      • 键盘男:简单明了,赞
        huachao1001:@键盘男kkmike999 感谢支持~
      • 进击的鱼儿:还是第一次看到自定义behavior呢,真是长见识了,又get一个新技能,好开心,谢谢了!
        huachao1001:@RyuJin 感谢支持~

      本文标题:CoordinatorLayout的使用如此简单

      本文链接:https://www.haomeiwen.com/subject/gnshdttx.html