Meterial Design 的核心套路layout_behavior的自定义玩法(一)

来源:互联网 发布:希拉里 放过, 知乎 编辑:程序博客网 时间:2024/05/18 12:41

Android 现在随着MeterialDesign的发展,越来越喜欢用套路了,比如appbar,toolar,collapseingToolbarlayout,coodinatorlayout的组合使用实现酷炫的效果。自古深情留不住,从来套路得人心。

先看自定义behavior的简单效果,不断点击左边textview,向下移动texitview,通过behavior反馈给右边的textview和下面的linearlayout,

这里写图片描述

behavior主要依赖协调者布局CoordinatorLayout,behavior是协调者布局里面的静态抽象内部类 。
协调者布局是个viewgroup,主要是监控里面所有子控件/子容器的各种行为比如滑动移动等。然后通过behavior反馈给其他的view,控制其他的view移动或者产生行为。

先上布局代码:

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_marginLeft="@dimen/activity_horizontal_margin"    android:layout_marginRight="@dimen/activity_horizontal_margin"    tools:context="com.example.minwenping.md_behaviordemo.MainActivity">    <TextView        android:textSize="20sp"        android:id="@+id/tv_watched"        android:layout_width="80dp"        android:layout_height="80dp"        android:layout_gravity="left|top"        android:background="@android:color/holo_orange_dark"        android:text="被被围观的view" />    <TextView        app:layout_behavior="com.example.minwenping.md_behaviordemo.MyBehavior"        android:textSize="20sp"        android:id="@+id/tv_watching"        android:layout_width="100dp"        android:layout_height="80dp"        android:layout_gravity="right|top"        android:background="@android:color/holo_green_dark"        android:text="发起围观的view" />    <LinearLayout        android:id="@+id/ll_container"        android:layout_gravity="center"        android:orientation="vertical"        android:gravity="center"        app:layout_behavior="com.example.minwenping.md_behaviordemo.MyBehavior"        android:layout_width="wrap_content"        android:layout_height="wrap_content">        //***如果有嵌套的,behavior只能放在父容器中***        <ImageView            android:id="@+id/image"            android:scaleType="centerCrop"            android:src="@drawable/psb"            android:contentDescription="@string/app_name"            android:layout_width="160dp"            android:layout_height="100dp" />        <TextView            android:layout_marginTop="@dimen/activity_vertical_margin"            android:textColor="@color/colorPrimary"            android:textSize="16sp"            android:text="朋友的合照"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />    </LinearLayout></android.support.design.widget.CoordinatorLayout>

第二部分是activity的代码

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ((TextView) findViewById(R.id.tv_watched)).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                ViewCompat.offsetTopAndBottom(v,10);            }        });    }}

第三部分是自定义behavior的代码

public class MyBehavior extends CoordinatorLayout.Behavior<View> {    public MyBehavior(Context context, AttributeSet attrs) {        super(context, attrs);    }    /**     * @param parent     就是最外围的协调者布局     * @param child      所有的子控件和子容器     * @param dependency 被观察的view     * @return     */    @Override    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {        //这里可以监控好多个view,通过id或者tag来识别        System.out.println("Test监控"+dependency.getId());        return dependency.getId()==R.id.tv_watched || super.layoutDependsOn(parent, child, dependency);    }    int  rotaton=0;    @Override    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {        //获取被围观的 view发生的行为,移动的距离        int top = dependency.getTop();        switch (child.getId()) {            case R.id.tv_watching:            //这里可以自定义各种动画效果                ViewCompat.setTranslationY(child,top*0.8f);                break;            case R.id.ll_container:                ViewCompat.offsetTopAndBottom(child,15);               ImageView son= (ImageView) child.findViewById(R.id.image);                son.animate().rotation(rotaton);                rotaton=rotaton+15;                break;        }//        return super.onDependentViewChanged(parent, child, dependency);        return true;    }}

最后:是不是可以利用behavior编写各种视差动画,控件联动各种动效是不是有点easy了呢。

原创粉丝点击