Design lib里面的CoordinatorLayout是一個(gè)非常強(qiáng)大的控件，它接管了child組件之間的交互。讓你滑動(dòng)交互使用更加方便簡(jiǎn)單，效果也更加強(qiáng)大，不需要向以前那樣自己處理一坨什么亂七八槽的滑動(dòng) 事件傳遞之類的惡心東西了。
比如常見(jiàn)的頂部工具欄隨內(nèi)容滑動(dòng)消失和顯示，這個(gè)官方已經(jīng)支持了Toolbar,但是有時(shí)候我們想讓自己的組件也可以和滑動(dòng)交互，這個(gè)時(shí)候我們就需要自定義一個(gè)我們自己的Behavior了
知乎效果
知乎的效果是頂部不動(dòng)，底部隨內(nèi)容滑動(dòng) 顯示和隱藏
可以先看一下知乎的底部快速返回效果(sorry 靜態(tài)圖)
看下我們實(shí)現(xiàn)的效果
先看下我們的布局
<?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">
<!--toolbar-->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--底部操作欄-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/red"
android:orientation="horizontal"
android:padding="16dp"
android:gravity="center_vertical"
app:layout_behavior="com.example.lwp.design.behavior.FooterBehavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="添加你的評(píng)論"
android:drawablePadding="5dp"
android:drawableLeft="@mipmap/ic_message"
android:textColor="@android:color/white" />
<ImageView
android:layout_marginLeft="29dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_favorite"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
布局很簡(jiǎn)單就三個(gè)內(nèi)容 toolbar,RecyclerView,footer（LinearLayout）
注意底部操作欄最外層的 LinearLayout我們加上了
app:layout_behavior="com.example.lwp.design.behavior.FooterBehavior"
FooterBehavior就是我們要自定義的behavior,讓它和滑動(dòng)交互，內(nèi)容向上滑動(dòng)時(shí)消失，向下滑動(dòng)時(shí)顯示
實(shí)現(xiàn)我們自己的Behavior其實(shí)很簡(jiǎn)單 ，就是幾行代碼的事,主要就是根據(jù)滑動(dòng)距離來(lái)顯示和隱藏footer
public class FooterBehavior extends CoordinatorLayout.Behavior<View> {
private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
private int sinceDirectionChange;
public FooterBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
//1.判斷滑動(dòng)的方向 我們需要垂直滑動(dòng)
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
}
//2.根據(jù)滑動(dòng)的距離顯示和隱藏footer view
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
if (dy > 0 && sinceDirectionChange < 0 || dy < 0 && sinceDirectionChange > 0) {
child.animate().cancel();
sinceDirectionChange = 0;
}
sinceDirectionChange += dy;
if (sinceDirectionChange > child.getHeight() && child.getVisibility() == View.VISIBLE) {
hide(child);
} else if (sinceDirectionChange < 0 && child.getVisibility() == View.GONE) {
show(child);
}
}
private void hide(final View view) {
ViewPropertyAnimator animator = view.animate().translationY(view.getHeight()).setInterpolator(INTERPOLATOR).setDuration(200);
animator.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
view.setVisibility(View.GONE);
}
@Override
public void onAnimationCancel(Animator animator) {
show(view);
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
animator.start();
}
private void show(final View view) {
ViewPropertyAnimator animator = view.animate().translationY(0).setInterpolator(INTERPOLATOR).setDuration(200);
animator.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
view.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationCancel(Animator animator) {
hide(view);
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
animator.start();
}
簡(jiǎn)書(shū)效果
簡(jiǎn)書(shū)效果有點(diǎn)類似全屏 就是滑動(dòng)的時(shí)候頂部和底部的都消失，提供更好的閱讀體驗(yàn)
看下我們實(shí)現(xiàn)的效果
布局還是原來(lái)的布局，只需要改2個(gè)小地方，一個(gè)是讓Toolbar支持隱藏，第二個(gè)底部的behavior改成我們接下來(lái)實(shí)現(xiàn)的behavior名稱： FooterBehaviorDependAppBar
...
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" //1.加上這個(gè)
/>
...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/red"
android:orientation="horizontal"
android:padding="16dp"
android:gravity="center_vertical"
//2.修改behavior為我們第二個(gè)要實(shí)現(xiàn)的behavior
app:layout_behavior="com.example.lwp.design.behavior.FooterBehaviorDependAppBar">
...
從效果來(lái)看，第一眼感覺(jué)會(huì)比實(shí)現(xiàn)知乎效果要麻煩，其實(shí)比第一個(gè)behavior實(shí)現(xiàn)更加簡(jiǎn)單，幾乎只用了一行代碼實(shí)現(xiàn) child.setTranslationY(translationY);
public class FooterBehaviorDependAppBar extends CoordinatorLayout.Behavior<View> {
public FooterBehaviorDependAppBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
float translationY = Math.abs(dependency.getTranslationY());
child.setTranslationY(translationY);
return true;
}
}
現(xiàn)在可以看到實(shí)現(xiàn)自己的Behavior是多么的方便和簡(jiǎn)單了吧，這樣你就可以在滑動(dòng)交互中實(shí)現(xiàn)更復(fù)雜和酷炫的交互效果了
趕緊去試試吧！
