CoordinatorLayout自定义Behavior

原文地址声明: https://blog.csdn.net/qq_23179075/article/details/52800723

Android CoordinatorLayout 自定义 Behavior

2909848-eb2a977fcc0e8779.gif

使用 CoordinatorLayout需要在项目中加入Design 包。

dependencies {
    compile 'com.android.support:design:24.1.1' 
}

main.xml

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zhengliang.com.animatorpath.Main2Activity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/main_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9"/>
            <FrameLayout
                android:id="@+id/framelayout"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:layout_gravity="bottom"
                android:background="@color/primary"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.3">
                <LinearLayout
                    android:id="@+id/linearlayout_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:gravity="bottom|center"
                        android:text="LOVE"
                        android:textColor="@android:color/white"
                        android:textSize="24sp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="4dp"
                        android:text="I love you clover"
                        android:textColor="@android:color/white"/>
                </LinearLayout>
            </FrameLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:behavior_overlapTop="20dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            app:cardElevation="8dp"
            app:contentPadding="16dp"
            app:cardCornerRadius="5dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="8dp"
                android:text="@string/lorem"
                android:textSize="18sp"
                android:id="@+id/textView" />
        </android.support.v7.widget.CardView>
    </android.support.v4.widget.NestedScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/primaryDark"
        app:layout_anchor="@id/framelayout"
        app:theme="@style/ThemeOverlay.AppCompat.Dark">
    </android.support.v7.widget.Toolbar>
    
    <TextView
    	android:id="@+id/tv_title"
    	android:textColor="#fff"
    	android:textSize="18sp"
    	android:gravity="center"
    	android:text="UC头条"
    	android:background="@color/primaryDark"
    	android:layout_width="match_parent"
    	android:layout_height="56dp"
    	app:layout_behavior=".DrawerBehavior"/>
</android.support.design.widget.CoordinatorLayout>

BehaviorAndroid5.0 新出的 Design 包里新增的布局概念。Behavior 只有是 CoordinatorLayout 的直接子 View 才有意义。可以为任何 View 添加一个BehaviorBehavior 是一系列回调。让你有机会以非侵入的为 View 添加动态的依赖布局,和处理父布局 CoordinatorLayout 滑动手势的机会。不过官方只有少数几个 Behavior 的例子。对于理解 Behavior 实在不易。开发过程中也是很多坑。

DrawerBehavior.java

public class DrawerBehavior extends CoordinatorLayout.Behavior<TextView> {
    private int mStartY;
    public DrawerBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {
        return dependency instanceof Toolbar;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {
        //记录开始的Y坐标  也就是toolbar起始Y坐标
        if (mStartY==0){
            mStartY = (int) dependency.getY();
        }
        //计算toolbar从开始移动到最后的百分比
        float percent = dependency.getY()/mStartY;
        //改变child的坐标(从消失,到可见)
        child.setY(child.getHeight()*(1-percent) - child.getHeight());
        child.startAnimation(new AlphaAnimation(1,(1-percent)));
        return true;
    }
}

CoordinatorLayout.Behavior<T> 基类是一个泛型,泛型传递的是你需加入效果的 View,比如我这里是给TextView

实现:两个必须的方法

 @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {
        return dependency instanceof Toolbar;
    }
@Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {
        return true;
    }

上面的两个方法根据名字就看出 layoutDependsOn()View 依赖于的控件是什么,这里是依赖于 Toolbar 所以写法就如上,其它的根据需要而变。第二方法是当依赖的组件发生变化时调用,可以在这里动态改变 View 的属性(拿这里来说就是:TextView 跟随 ToolBar 改变)。

自定义类 DrawerBehavior.java 写好以后,需要在使用这个 BehaviorView 加上:app:layout_behavior属性 ,给 TextView 加上以下属性

app:layout_behavior="包路径.DrawerBehavior"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值