CoordinatorLayout的使⽤如此简单(Android)
曾在⽹上了⼀些关于CoordinatorLayout的教程,⼤部分⽂章都是把CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout 以及Toolbar等⼀起使⽤来介绍,这让我不知不觉在⼼中认为把这⼏个布局要⼀起使⽤,⽽且只是⽤于那种场景中。其实CoordinatorLayout的功能并不是局限于与AppBarLayout⼀起使⽤,它的功能强⼤着呢,本⽂主要对CoordinatorLayout的使⽤进⾏介绍,后⾯再写⼀篇⽂章将AppBarLayout和CollapsingToolBarLayout整合CoordinatorLayout ⼀起。那么到底CoordinatorLayout有多好⽤,请往下感受吧~
CoordinatorLayout能做什么
在学习CoordinatorLayout之前,很有必要了解CoordinatorLayout能帮我们做什么,从名字上可以看出,就是帮我们协调⼦View的。怎么个协调法呢?就是它根据我们的定制,帮助我们协调各个⼦View的布局。我们先看⼀组动画图~
稍微解释⼀下这个动画,蓝⾊的矩形是我们⼀个普通View,黄⾊的Hello是⼀个Button。我们⽔平拖动蓝⾊矩形时,黄⾊Button查着与蓝⾊矩形相反⽅向移动;竖直移动蓝⾊矩形时,黄⾊也跟着竖直。简⽽⾔之:它们在竖直⽅向同步移动,在⽔平⽅向相反。
这个效果如果让你不⽤CoordinatorLayout去实现,应该没有任何问题,但是代码的耦合度应该⾮常⼤,你的代码必须要持有2个View的引⽤,然后在onTouchEvent⾥⾯做各种判断。如果我们想要实现的功能是,有更多的View要根据蓝⾊的View的移动相应作出响应,那么那就得在蓝⾊View的onTounchEvent⾥⾯针对其他的View处理各种逻辑。这耦合度未免太伤感了~
⽽CoordinatorLayout既然号称能帮我们协调⼦View的布局,我们接下来看看CoordinatorLayout如何实现~
CoordinatorLayout使⽤
CoordinatorLayout的使⽤核⼼是Behavior,Behavior就是执⾏你定制的动作。在讲Behavior之前必须先理解两个概念:Child 和Dependency,什么意思呢?Child当然是⼦View的意思了,是谁的⼦View呢,当然是CoordinatorLayout的⼦View;其实Child是指要执⾏动作的CoordinatorLayout的⼦View。⽽Dependency是指Child依赖的View。⽐如上⾯的gif图中,蓝⾊的View就是Dependency,黄⾊的View就是Child,因为黄⾊的View的动作是依赖于蓝⾊的View。简⽽⾔之,就是如过Dependency这个View发⽣了变化,那么Child这个View就要相应发⽣变化。发⽣变化是具体发⽣什么变化呢?这⾥就要引⼊Behavior,Child发⽣变化的具体执⾏的代码都是放在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.studyCoordinatorLayout;
t.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.studyCoordinatorLayout
* 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 = Resources().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 = Top();
int left = Left();
int x = width - left - Width();
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;
v.setLayoutParams(layoutParams);
}
}
OK,现在我们为Button类指定了Dependency,并且定义好了跟随Dependency⼀直变化的动作(Behavior),接下来我们就要指定好为哪个具体的Button实例来绑定这些。⽅法很简单,直接在布局⽂件指定就好:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
xmlns:tools="schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android layout布局tools:context="com.hc.studyCoordinatorLayout.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.studyCoordinatorLayout.MyBehavior" />
<com.hc.studyCoordinatorLayout.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的编写就好了,把Child和Dependency之间的关系完全解耦了~以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论