android开发自定义顶部,Android中MaterialDesign使用 (五)自定义Behavior实现UC顶栏效果...

Android中MaterialDesign使用 (五)CoordinatorLayout之自定义Behavior

这里主要实现的是用一个简单的自定义Behavior实现一个像UC浏览器顶栏那样的效果

直接上效果图

2909848-eb2a977fcc0e8779.gif

同样使用Tablayout,首先需要在项目中加入Design包

dependencies {

compile 'com.android.support:design:24.1.1'

}

主布局代码:main.xml

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:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

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"/>

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">

android:id="@+id/linearlayout_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:orientation="vertical"

>

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"

/>

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"

/>

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: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"

>

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: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: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"

/>

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

定义继承基类:

public class DrawerBehavior extends CoordinatorLayout.Behavior {

public DrawerBehavior(Context context, AttributeSet attrs) {

super(context, attrs);

}

}

继承CoordinatorLayout.Behavior这里是一个泛型,泛型传递的是你需加入效果的View,比如我这里是给TextView加效果泛型就指定位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发生变化时调用,自定义Behavior的主要逻辑就在这个方法中处理!

下面贴上该效果的代码:

/**

* Created by zhengliang on 2016/10/10 0010.

*/

public class DrawerBehavior extends CoordinatorLayout.Behavior {

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;

}

}

代码注释很全就不解释了,寝室马上熄灯了,抓紧时间,哈哈!

自定义的Behavior写好以后,需要在使用这个Behavior的View加上:app:layout_behavior属性

诺:

...

app:layout_behavior=".DrawerBehavior"

...

后面跟的值就是你自定义参数的类名:如果像我这样不行请加上完整的包名..

时间刚好...

印象丶亮仔