CoordinatorLayout自定義Bahavior特效及其源碼分析
@[CoordinatorLayout, Bahavior]java
CoordinatorLayout是android support design包中能夠算是最重要的一個東西，運用它能夠作出一些不錯的特效，而其中的難點就是Bahavior的使用android
- 拖動效果實例
- CoordinatorLayout和Bahavior解析
- 關於NestScrolling機制
拖動效果實例
上述效果圖中上部是一個LinearLayout中含有的一個EditText從而作成的一個簡單的搜索框，而下部是一個ListView。咱們想當ListView往上拉動（查看更多）的時候隱藏搜索框，而向下拉動（往回看）的時候展示搜索框。segmentfault
首先看下佈局數組
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.qianmi.adminapp.lib.utils.widget.BaseSwipeRefreshLayout
android:id="@+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dividerHeight="1px"
android:scrollbars="vertical"
tools:listitem="@layout/item_member_list"
/>
<TextView
android:id="@+id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#444"
android:textSize="12sp"
android:visibility="gone"
/>
</com.qianmi.adminapp.lib.utils.widget.BaseSwipeRefreshLayout>
</FrameLayout>
<LinearLayout
android:id="@+id/search_pane"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="com.xxx.common.behavior.SearchScrollBehavior"
>
<View
android:id="@+id/tab_margin"
android:layout_width="match_parent"
android:layout_height="@dimen/fit_status_bar_height"
android:background="@color/toolbar_background_color"
android:orientation="vertical"
/>
<LinearLayout
android:id="@+id/search_bg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/toolbar_background_color"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingLeft="@dimen/content_margin"
android:paddingRight="@dimen/content_margin"
android:paddingTop="10dp">
<EditText
android:id="@+id/et_search"
style="@style/search_edit_view_style"
android:layout_width="0dp"
android:layout_weight="1"
android:clickable="true"
android:gravity="left|center_vertical"
android:hint="@string/member_list_search_hint"
android:imeOptions="actionSearch"
android:inputType="textPersonName"/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
涉及到本例子的圖片、文字等資源的地方不須要關注，咱們主要關注這幾個地方：app
- 首先根佈局是一個 CoordinatorLayout
- 其次id爲search_pane的這個LinearLayout總體就是咱們的搜索框，也就是最終須要根據滑動而顯示/隱藏的部分
- 這個搜索框（R.id.search_pane）他必須是直接爲CoordinatorLayout的一級child view，從而才能實現上述效果
- 在這個搜索框中添加了一個屬性app:layout_behavior="com.xxx.common.behavior.SearchScrollBehavior"，SearchScrollBehavior實際是一個咱們自定義的Behavior，而這裏須要指定它的徹底限定名（後面將會詳細說明該如何寫這個自定義Behavior）
java代碼部分基本上和傳統的listview的實現沒有任何區別，這裏就再也不貼出代碼。而惟獨須要注意的一點是必需要子啊設置完畢ListView後添加這句代碼：ide
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
listview.setNestedScrollingEnabled(true);
}
後面將會說明加上這句話的緣由。固然若是你用的是RecyclerView而不是ListView，那麼就不用添加這句代碼。佈局
CoordinatorLayout和Bahavior解析
剛解除CoordinatorLayout是從Google的官方的demo裏，demo使用了CoordinatorLayout做爲佈局根節點，同時使用了appbar、tablayout、fab等控件，作出了一個聯動效果的demo，非常漂亮。可是剛開始對於其深層次的用法，歷來沒有深究。
翻開CoordinatorLayout的源碼，發現它其實就是一個ViewGroup，確切來講能夠看作爲一個FrameLayout。
使用CoordinatorLayout主要出於兩種目的：動畫
- 用於應用界面的根佈局
- 做爲一個容器用來協調子View之間的交互
說到CoordinatorLayout就不得不說Behavior這個類，他實際上是CoordinatorLayout的一個內部抽象類ui
public static abstract class Behavior<V extends View> {
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
V child, View directTargetChild, View target, int nestedScrollAxes) {
return false;
}
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, V child, View target,
int dx, int dy, int[] consumed) {
// Do nothing
}
public boolean onDependentViewChanged(CoordinatorLayout parent, V child, View dependency) {
return false;
}
public void onDependentViewRemoved(CoordinatorLayout parent, V child, View dependency) {
}
}
上面代碼中列出了咱們在自定義Behavior時須要複寫的幾個方法（大部分狀況），根據須要，通常分爲兩類：this
- 某個view監聽另外一個view的狀態變化，例如大小、位置、顯示狀態等
- 某個view監聽CoordinatorLayout裏的滑動狀態
對於第一種狀況，一個例子就是當現實SnackBar的時候，Fab一樣的隨着Snackbar向上彈出而向上平移。這裏再也不舉例。
對於第二種i狀況，咱們須要複寫前兩個方法，泛型V實際制定的是使用該Behavior的View，本例咱們在search_pane這個LinearLayout中經過app:layout_behavior將該自定義Behavior加了進來，實際上這個V就是該搜索框。而onStartNestedScroll和onNestedPreScroll中的child即該搜索框。
onStartNestedScroll通常用於滑動開始以前調用，通常用來計算一些child的尺寸，同時指定咱們的Behavior感興趣的滑動方向；onNestedPreScroll用來實時的監聽滑動狀態，根據狀態從而對child作出特定的響應。對於咱們的例子來講，若是ListView往上拉動（查看更多）的時候隱藏搜索框，而向下拉動（往回看）的時候展示搜索框。
本例的SearchScrollBehavior代碼爲：
public class SearchScrollBehavior extends CoordinatorLayout.Behavior<View> {
private int searchPaneHeight = 0;//搜索框的高度
private boolean isAnimate;//動畫是否在進行
private Context ctx;
public SearchScrollBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
ctx = context;
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
if (child.getVisibility() == View.VISIBLE && searchPaneHeight == 0) {
//獲取控件高度
searchPaneHeight = DensityUtils.dp2px(ctx, child.getHeight());
}
return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;//判斷是否豎直滾動
}
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
//dy大於0是向上滾動 小於0是向下滾動
if (dy >= 0 && !isAnimate && child.getVisibility() == View.VISIBLE) {
showSearch(child, false);
} else if (dy < 0 && !isAnimate && child.getVisibility() == View.GONE) {
showSearch(child, true);
}
}
private void showSearch(final View searchPane, boolean visible) {
if (searchPane == null) {
return;
}
float translationY = searchPane.getTranslationY();
if (!visible) {
//show -> hide
if (translationY < 0 || isAnimate) {
return;
}
L.d("hide, searchPaneHeight" + searchPaneHeight);
ViewPropertyAnimator animator = searchPane.animate()
.translationY(-searchPaneHeight)
.setDuration(800)
.setInterpolator(new DecelerateInterpolator())
.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
isAnimate = true;
}
@Override
public void onAnimationEnd(Animator animation) {
searchPane.setVisibility(View.GONE);
isAnimate = false;
}
@Override
public void onAnimationCancel(Animator animation) {
showSearch(searchPane, true);
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.start();
} else {
//hide -> show
if (translationY >= 0 || isAnimate) {
return;
}
L.d("show, searchPaneHeight" + searchPaneHeight);
ViewPropertyAnimator animator = searchPane.animate()
.translationY(0)
.setDuration(500)
.setInterpolator(new DecelerateInterpolator())
.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
searchPane.setVisibility(View.VISIBLE);
isAnimate = true;
}
@Override
public void onAnimationEnd(Animator animation) {
isAnimate = false;
}
@Override
public void onAnimationCancel(Animator animation) {
showSearch(searchPane, false);
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.start();
}
}
}
這樣子，咱們把自定義的Behavior寫到搜素框的xml佈局中進行指定一下，不需額外的代碼，就實現了本文開頭的效果。
關於NestScrolling機制
那麼CoordinatorLayout是如何實現經過Behavior來控制子View的狀態的呢？這裏必需要說到NestedScrolling機制。
在support-v4包中有這兩個接口：
- NestedScrollingParent
- NestedScrollingChild
CoordinatorLayout實現了NestedScrollingParent這個接口，而RecylerView實現了NestedScrollingChild這個接口
public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent {
}
public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild {
}
咱們知道View的事件傳遞是從子到父的，咱們看下實現了NestedScrollingChild接口的RecyclerView 的onTouchEvent是怎麼寫的，在onTouchEvent的ACTION_MOVE分支，調用了他本身的dispatchNestedPreScroll方法（這個是NestedScrollingChild接口的一個方法，被RecyclerView 實現了）
case MotionEvent.ACTION_MOVE: {
...
if (dispatchNestedPreScroll(dx, dy, mScrollConsumed, mScrollOffset)) {
...
}
...
@Override
public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) {
return getScrollingChildHelper().dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow);
}
dispatchNestedPreScroll的實現中實際是調用NestedScrollingChildHelper的dispatchNestedPreScroll方法，看下NestedScrollingChildHelper的該方法的實現：
public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) {
if (isNestedScrollingEnabled() && mNestedScrollingParent != null) {
if (dx != 0 || dy != 0) {
int startX = 0;
int startY = 0;
if (offsetInWindow != null) {
mView.getLocationInWindow(offsetInWindow);
startX = offsetInWindow[0];
startY = offsetInWindow[1];
}
if (consumed == null) {
if (mTempNestedScrollConsumed == null) {
mTempNestedScrollConsumed = new int[2];
}
consumed = mTempNestedScrollConsumed;
}
consumed[0] = 0;
consumed[1] = 0;
ViewParentCompat.onNestedPreScroll(mNestedScrollingParent, mView, dx, dy, consumed);
if (offsetInWindow != null) {
mView.getLocationInWindow(offsetInWindow);
offsetInWindow[0] -= startX;
offsetInWindow[1] -= startY;
}
return consumed[0] != 0 || consumed[1] != 0;
} else if (offsetInWindow != null) {
offsetInWindow[0] = 0;
offsetInWindow[1] = 0;
}
}
return false;
}
當發現該子view的isNestedScrollingEnabled被設置的話（RecylerView是開啓的，而繼承自AbsListview的ListView是關閉的，因此若是使用Behavior的控件是ListView的話，必需要setNestedScrollingEnabled（true）），就調用ViewParentCompat.onNestedPreScroll方法，將滑動的位置傳遞過去。
而ViewParentCompat就是包含了這個子View（RecyclerView）的父親佈局，因此很顯然就是CoordinatorLayout這個ViewGroup了（這裏也就說明了第一節所說的使用Behavior的控件必須是直接從屬於CoordinatorLayout的緣由），而onNestedPreScroll這個方法就是NestedScrollingParent接口的，CoordinatorLayout偏偏實現了這個方法。
那麼如今有點眉目了，事件是這樣子傳遞的，當咱們滑動RecyclerView的時候，事件會經過NestScrolling機制傳給CoordinatorLayout，這是第一步。那麼CoordinatorLayout怎麼經過Behavior將事件繼續傳遞給它的子View呢。確定就要看下CoordinatorLayout的onNestedPreScroll中寫了什麼：
public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) {
int xConsumed = 0;
int yConsumed = 0;
boolean accepted = false;
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View view = getChildAt(i);
final LayoutParams lp = (LayoutParams) view.getLayoutParams();
if (!lp.isNestedScrollAccepted()) {
continue;
}
final Behavior viewBehavior = lp.getBehavior();
if (viewBehavior != null) {
mTempIntPair[0] = mTempIntPair[1] = 0;
viewBehavior.onNestedPreScroll(this, view, target, dx, dy, mTempIntPair);
xConsumed = dx > 0 ? Math.max(xConsumed, mTempIntPair[0])
: Math.min(xConsumed, mTempIntPair[0]);
yConsumed = dy > 0 ? Math.max(yConsumed, mTempIntPair[1])
: Math.min(yConsumed, mTempIntPair[1]);
accepted = true;
}
}
consumed[0] = xConsumed;
consumed[1] = yConsumed;
if (accepted) {
dispatchOnDependentViewChanged(true);
}
}
CoordinatorLayout是找出了全部的child view，經過getBehavior一個個的得到child view的Behavior而後直接執行Behavior的onNestedPreScroll方法，將dx/dy等數據以及這個child view自己傳遞進去。到了這裏，咱們也就執行到了咱們自定義的SearchScrollBehavior的onNestedPreScroll方法裏面去了。從而拿到了dx和dy。dy大於0是向上滾動 小於0是向下滾動，隨後對本身（child view）進行響應。
這裏要提一下int[] consumed這個數據，它是一個int型的數組，長度爲2，第一個元素是父view消費的x方向的滾動距離；第二個元素是父view消費的y方向的滾動距離，若是這兩個值不爲0，則子view須要對滾動的量進行一些修正。正由於有了這個參數，使得咱們處理滾動事件的時候，思路更加清晰，不會像之前同樣被一堆的滾動參數搞混。
說到這裏，好像一直沒講NestScrolling機制，能夠參考下這篇博客，有一個很詳細的講解
https://segmentfault.com/a/1190000002873657
能夠說CoordinatorLayout的Behavior機制徹底離不開NestScrolling！
- 1. Elasticsearch自定義字典及自定義字典無效分析
- 2. RecyclerView 源碼分析(七) - 自定義LayoutManager及其相關組件的源碼分析
- 3. Android 自定義View EdgeEffect效果 ----ScrollView部分源代碼剖析
- 4. 源碼分析Dialog自定義大小無效坑
- 5. CoordinatorLayout詳解及自定義Behavior
- 6. CoordinatorLayout的詳解以及自定義Behavior
- 7. LinkedHashMap及其源碼分析
- 8. 自定義視差特效
- 9. client-go客戶端自定義開發Kubernetes及源碼分析
- 10. CoordinatorLayout 使用及源碼解析
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • MySQL自定義函數（CREATE FUNCTION） - MySQL教程
- • RxJava操作符（十）自定義操作符
- • 互聯網組織的未來：剖析GitHub員工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
- 1. Elasticsearch自定義字典及自定義字典無效分析
- 2. RecyclerView 源碼分析(七) - 自定義LayoutManager及其相關組件的源碼分析
- 3. Android 自定義View EdgeEffect效果 ----ScrollView部分源代碼剖析
- 4. 源碼分析Dialog自定義大小無效坑
- 5. CoordinatorLayout詳解及自定義Behavior
- 6. CoordinatorLayout的詳解以及自定義Behavior
- 7. LinkedHashMap及其源碼分析
- 8. 自定義視差特效
- 9. client-go客戶端自定義開發Kubernetes及源碼分析
- 10. CoordinatorLayout 使用及源碼解析