CoordinatorLayout介绍
CoordinatorLayout出来很久了,时间关系,一直没有怎么弄过
看见简友的描述
r17171709
的 http://www.jianshu.com/p/b8828afded8a 文章
自己抽出时间,简单看看
先翻墙到文档看看说明:
https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html
我们知道是一个 super-powered FrameLayout 【强大的FrameLayout】
再就是大体有2个用途:
- 顶部的layout装饰
- 一个容器和其他一个或者多个子View的交互
通常和 CoordinatorLayout.Behavior<V extends View> 一起使用。
当然,如果是和固定关联,也可以用注解去操作。
比如,@DefaultBehavior(MyBehavior.class)
自己只是简单使用和记录,
有问题的地方,欢迎拍砖
简单说明
先写一个自定义的TextView
用于捕捉滑动使用
DodoMoveView
package com.aohuan.dodo.coordinator.view;
import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
/**
* Created by dodo on 2016/10/31.
* qq: 2390183798
*/
public class DodoMoveView extends TextView {
private int lastX;
private int lastY;
// private int mWidth;
// private int mHeight;
public DodoMoveView(Context context, AttributeSet attrs) {
super(context, attrs);
// mWidth = getMeasuredWidth();
// mHeight = getMeasuredHeight();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getRawX();
int y = (int) event.getRawY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
CoordinatorLayout.MarginLayoutParams layoutParams = (CoordinatorLayout.MarginLayoutParams) getLayoutParams();
int left = layoutParams.leftMargin + x - lastX;
int top = layoutParams.topMargin + y - lastY;
layoutParams.leftMargin = left;
layoutParams.topMargin = top;
setLayoutParams(layoutParams);
requestLayout();
break;
case MotionEvent.ACTION_UP:
break;
}
lastX = x;
lastY = y;
return true;
}
}
简单放置到一个 CoordinatorLayout 中
对应的layout :
activity_main0.xml
<?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:layout_gravity="top|right"-->
<com.aohuan.dodo.coordinator.view.DodoMoveView
android:layout_gravity="top"
android:layout_width="150dp"
android:layout_height="100dp"
android:text="Main"
android:gravity="center"
android:background="#666666" />
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#888888"
android:layout_gravity="top|left"
android:text=" Dodo Follow "
/>
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout 和 Behavior 的使用
这个时候
我们还是用前面那个layout
需要先写一个Behavior
具体可以参考文档:
https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.Behavior.html
对应的使用,后面会慢慢接触
这里,我们写一个 Behavior的子类
DodoBehavior0s
package com.aohuan.dodo.coordinator.utils;
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;
import com.aohuan.dodo.coordinator.view.DodoMoveView;
/**
* Created by dodo on 2016/10/31.
* qq: 2390183798
*
* 在y轴 方向跟着移动的 Behavior
*/
public class DodoBehavior0s extends CoordinatorLayout.Behavior<Button> {
public DodoBehavior0s(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, Button child, View dependency) {
//如果dependency 是 DodoMoveView类型, 就依赖
return dependency instanceof DodoMoveView;
}
//每次dependency位置发生变化,都会执行onDependentViewChanged方法
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, Button btn, View dependency) {
//根据dependency的位置,设置Button的位置
int x = 0;
int y = (int) dependency.getY();
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);
}
}
这里有2个方法
- public boolean layoutDependsOn(CoordinatorLayout parent, Button child, View dependency)
- Determine whether the supplied child view has another specific sibling view as a layout dependency.
- 也就是,是否关联
- 这里,移动的是 DodoMoveView的时候, 可以跟着触发
- 当然,也可以通过自定义View传入id 比对,或者别的方式,来设置是否跟着触发
- boolean onDependentViewChanged(CoordinatorLayout parent, Button btn, View dependency)
- Respond to a change in a child's dependent view
- A view's dependency is determined by
- [layoutDependsOn(CoordinatorLayout, android.view.View, android.view.View)](https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.Behavior.html#layoutDependsOn(android.support.design.widget.CoordinatorLayout, V, android.view.View))
- or if child has set another view as it's anchor.
- boolean true if the Behavior changed the child view's size or position, false otherwise
- 也就是说,上面onDependentViewChanged 方法为true的时候
- 可以设置对应 位置 和 大小
- 自己返回true, 则改变, 返回false, 自己不改变 位置和大小
对应的实现,也挺简单
- 对应的判断在这里,肯定是true
- 后面的位置,设置x为0, y为前面的MainView的Y值,即可
这个时候,我们给layout中前面的Button添加这个Behavior
activity_main1.xml
<?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">
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#888888"
android:text=" Dodo Follow "
android:layout_gravity="top|left"
app:layout_behavior="com.aohuan.dodo.coordinator.utils.DodoBehavior0s"
/>
<!--android:layout_gravity="top|right"-->
<com.aohuan.dodo.coordinator.view.DodoMoveView
android:text="Main"
android:gravity="center"
android:layout_gravity="top"
android:layout_width="150dp"
android:layout_height="100dp"
android:background="#666666" />
</android.support.design.widget.CoordinatorLayout>
我们来看一下效果:
如果我们简单把右边的固定一下(通过layout或者代码都可以)
可以得到效果
Behavior的简单修改
这个时候,我们简单修改Behavior
再看看效果
package com.aohuan.dodo.coordinator.utils;
import android.content.Context;
import android.graphics.Rect;
import android.support.design.widget.CoordinatorLayout;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.widget.Button;
import com.aohuan.dodo.coordinator.view.DodoMoveView;
/**
* Created by dodo on 2016/10/31.
* qq: 2390183798
*
* 可以跟着Main View 旋转, 对着
*/
public class DodoBehavior0z extends CoordinatorLayout.Behavior<Button> {
private Context mContext;
private int width;
private int height;
public DodoBehavior0z(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
DisplayMetrics display = context.getResources().getDisplayMetrics();
width = display.widthPixels;
height = display.heightPixels;
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, Button child, View dependency) {
//如果dependency是TempView的实例,说明它就是我们所需要的Dependency
return dependency instanceof DodoMoveView;
}
//每次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 = height - top - btn.getHeight();
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;
layoutParams.width = y/2;
v.setLayoutParams(layoutParams);
}
}
这里也就是只是把x,y值,动态计算一下
再动态设置一下宽度
看一下效果:
简单小节
这个Behavior处理起来 还是挺方便的
比之前的事件分发要容易很多
可以直接关联View和View的事件
重要的是理解 Behavior 和 CoordinatorLayout的关系
以及 Behavior 的一些方法
其他的内容,后续一起学习
具体代码,可以见
https://github.com/2954722256/use_little_demo
对应 coordinator 的 Module
下一篇我们可以了解
Behavior流程 和 事件流