Android中MaterialDesign使用 (五)CoordinatorLayout之自定義Behavior
Android中MaterialDesign使用 (一)TabLayout+Fragment實(shí)現(xiàn)頂部選項(xiàng)卡
Android中MaterialDesign使用 (二)Navigation+Drawerlayout+Toolbar實(shí)現(xiàn)簡單側(cè)滑菜單
Android中MaterialDesign使用 (三)SnackBar的使用
Android中MaterialDesign使用 (四)CoordinatorLayout初識(shí):AppBarLayout的基本屬性
這里主要實(shí)現(xiàn)的是用一個(gè)簡單的自定義Behavior實(shí)現(xiàn)一個(gè)像UC瀏覽器頂欄那樣的效果
直接上效果圖
2909848-eb2a977fcc0e8779.gif
同樣使用Tablayout,首先需要在項(xiàng)目中加入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>
Behavior是Android新出的Design庫里新增的布局概念。Behavior只有是CoordinatorLayout的直接子View才有意義拟赊》惹猓可以為任何View添加一個(gè)Behavior荣月。Behavior是一系列回調(diào)。讓你有機(jī)會(huì)以非侵入的為View添加動(dòng)態(tài)的依賴布局实抡，和處理父布局(CoordinatorLayout)滑動(dòng)手勢(shì)的機(jī)會(huì)。不過官方只有少數(shù)幾個(gè)Behavior的例子。對(duì)于理解Behavior實(shí)在不易纷责。開發(fā)過程中也是很多坑，下面總結(jié)一下CoordinatorLayout與Behavior撼短。
定義繼承基類:
public class DrawerBehavior extends CoordinatorLayout.Behavior<T> {
public DrawerBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
}
繼承CoordinatorLayout.Behavior<T>這里是一個(gè)泛型,泛型傳遞的是你需加入效果的View,比如我這里是給TextView加效果泛型就指定位TextView
實(shí)現(xiàn):兩個(gè)必須的方法
@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;
}
上面的兩個(gè)方法根據(jù)名字就看出 layoutDependsOn()是View依賴于的控件是什么,我這里是依賴于Toolbar所以寫法就如上,其它的根據(jù)需要而變;第二方法是當(dāng)依賴的View發(fā)生變化時(shí)調(diào)用,自定義Behavior的主要邏輯就在這個(gè)方法中處理!
下面貼上該效果的代碼:
/**
* Created by zhengliang on 2016/10/10 0010.
*/
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坐標(biāo) 也就是toolbar起始Y坐標(biāo)
if (mStartY==0){
mStartY = (int) dependency.getY();
}
//計(jì)算toolbar從開始移動(dòng)到最后的百分比
float percent = dependency.getY()/mStartY;
//改變child的坐標(biāo)(從消失再膳，到可見)
child.setY(child.getHeight()*(1-percent) - child.getHeight());
child.startAnimation(new AlphaAnimation(1,(1-percent)));
return true;
}
}
代碼注釋很全就不解釋了,寢室馬上熄燈了,抓緊時(shí)間,哈哈!
自定義的Behavior寫好以后,需要在使用這個(gè)Behavior的View加上:app:layout_behavior屬性
諾:
...
app:layout_behavior=".DrawerBehavior"
...
