美文网首页
UI-CoordinatorLayout

UI-CoordinatorLayout

作者: 剩下的只有自己 | 来源:发表于2016-10-08 15:17 被阅读28次

CoordinatorLayout用于协调它里面的子控件处理事件,通过Behavior来实现。
那么它是怎么协调子控件的呢?
首先需要介绍CoordinatorLayout中Child、Dependency这2个View的概念:
child表示会随着depency这个view变化而变化。好像还是不太明白,那就先撸个代码:

  1. 先来个布局,以CoordinatorLayout为根布局,包含3个子控件。其中DependView为一个简单的自定义View,它能随着手指的滑动而滑动:
<?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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_a"
        android:background="@color/colorPrimary"
        android:clickable="false"
        app:layout_behavior="com.chiigu.drawerlayoutsample.behavior.MyBehavior"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image"
        android:layout_marginTop="100dp"
        android:src="@mipmap/ic_launcher"
        app:layout_behavior="com.chiigu.drawerlayoutsample.behavior.MyBehavior"
        />
    <com.chiigu.drawerlayoutsample.behavior.DependView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:layout_marginTop="200dp"
        android:id="@+id/view"
        />
</android.support.design.widget.CoordinatorLayout>
  1. 在上面的布局中可以看到,我们添加了** app:layout_behavior**的属性,里面有一个自定义的Behavior:
  • 新建一个Behavior,继承Behavior<>,需要传一个Child的泛型:
public class MyBehavior extends CoordinatorLayout.Behavior<View> {
}
  • 实现Behavior中的2个方法:
@Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        //child代表CoordinatorLayout中的所有设置了 app:layout_behavior属性的子View
        //dependency代表CoordinatorLayout中所有类型为Behavior泛型的子View
        //如果当前的child view需要依赖当前的dependency view,那么返回true,反之
        return false;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        //如果上面方法中返回true,并且dependency view 发生任何变化,都会调用此方法
        return false;
    }
  1. 新建一个MyBehavior:
public class MyBehavior extends CoordinatorLayout.Behavior<View> {
    private final 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, View child, View dependency) {
//        int id=dependency.getId();
//        if(id== R.id.view)
//            return true;
        return true;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        int top = dependency.getTop();
        int left = dependency.getLeft();
        int x = width - left - child.getWidth();
        int y = top;
        setPosition(child, 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);
    }
}

以上就是图中代码的实现。

相关文章

  • UI-CoordinatorLayout

    CoordinatorLayout用于协调它里面的子控件处理事件,通过Behavior来实现。那么它是怎么协调子控...

网友评论

      本文标题:UI-CoordinatorLayout

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