Material Design - Behavior

關(guān)鍵字：Behavior、材料設(shè)計(jì)
項(xiàng)目地址：AboutMaterialDesign

大多數(shù)情況下，我們的項(xiàng)目只需要用到材料設(shè)計(jì)的 Toolbar DrawerLayout TabLayout 等等現(xiàn)成的控件就可以了，使用方便，也允許我們有不同程度的自定義優(yōu)化。但是一旦業(yè)務(wù)對(duì)于界面的交互有更明確的要求，上面的控件就變得不再那么夠用。材料設(shè)計(jì)為我們提供了協(xié)調(diào)者布局 CoordinatorLayout 用于聯(lián)系所有子控件，使得子控件之間在保持相對(duì)獨(dú)立的同時(shí)，又能相互影響，適時(shí)變化。

而這一切除了要感謝 CoordinatorLayout 的出現(xiàn)，還要記得 Google 工程師在 Behavior 上的付出。

學(xué)習(xí) Behavior 就是學(xué)習(xí)一點(diǎn)：根據(jù)監(jiān)聽得到合適的時(shí)機(jī)去修改目標(biāo)視圖的狀態(tài)。
帶著這樣的學(xué)習(xí)目的，我們?nèi)ゲ榭聪嚓P(guān)代碼，會(huì)容易很多。

根據(jù)文檔，我們可以知道，Behavior 是 CoordinatorLayout 的一個(gè)內(nèi)部類。

Interaction behavior plugin for child views of {@link CoordinatorLayout}.
A Behavior implements one or more interactions that a user can take on a child view.
These interactions may include drags, swipes, flings, or any other gestures.

一、使用自帶的 Behavior

由于大會(huì)影響，翻不了墻，因此只揀了我記得的 BottomSheetBehavior 和 SwipeDismissBehavior 來寫。

1) BottomSheetBehavior
GIF.gif

BottomSheetBehavior 一共有五個(gè)狀態(tài)，上面的效果為 BottomSheetBehavior 對(duì)應(yīng)的三個(gè)狀態(tài)：

    /**
     * The bottom sheet is dragging.
     */
    public static final int STATE_DRAGGING = 1;

    /**
     * The bottom sheet is settling.
     */
    public static final int STATE_SETTLING = 2;

    /**
     * The bottom sheet is expanded.
     */
    public static final int STATE_EXPANDED = 3;

    /**
     * The bottom sheet is collapsed.
     */
    public static final int STATE_COLLAPSED = 4;

    /**
     * The bottom sheet is hidden.
     */
    public static final int STATE_HIDDEN = 5;

實(shí)現(xiàn)上面的效果很簡單，只需要在以 CoordinatorLayout 為根節(jié)點(diǎn)的布局文件中增加一個(gè)容器放置彈框的內(nèi)容，然后在容器根節(jié)點(diǎn)下新增屬性：

app:behavior_hideable="true"
app:behavior_peekHeight="100dp"
app:layout_behavior="@string/bottom_sheet_behavior"

其中

  • layout_behavior 用于指定容器指定的 Behavior ，在使用自定義 Behavior 的時(shí)候，也可以通過這個(gè)方法，將視圖和 Behavior 關(guān)聯(lián)
  • behavior_peekHeight 用于指定視圖折疊時(shí)顯示的高度
  • behavior_hideable 用于指定視圖是否可以完全隱藏
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >
 
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:behavior_peekHeight="50dp"
        app:layout_behavior="@string/bottom_sheet_behavior"
        >
          <!-- NestedScrollView里設(shè)置你的底部表長什么樣的-->
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

代碼中需要注意這樣幾個(gè)方法：

//1.動(dòng)態(tài)設(shè)置 Behavior
BottomSheetBehavior behavior = new BottomSheetBehavior();
behavior.setPeekHeight(100);
behavior.setHideable(true);
behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        //狀態(tài)變化時(shí)調(diào)用
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        //滑動(dòng)時(shí)調(diào)用，可以根據(jù) slideOffset 配置動(dòng)畫效果
    }
});

//2.獲取 xml 中設(shè)置的 behavior 并設(shè)置相關(guān)屬性
View bottomSheet = findViewById(R.id.bottom_sheet);
if (bottomSheet != null) {
    behavior = BottomSheetBehavior.from(bottomSheet);
    behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}

//3.獲取當(dāng)前狀態(tài)
int state = behavior.getState();
2) SwipeDismissBehavior

在 xml 布局文件中，利用聯(lián)想并沒有跳出這個(gè) Behavior。但是在 Java 代碼中，我們還是可以找到這個(gè)類的。

SwipeDismissBehavior<View> behavior = new SwipeDismissBehavior<>();
behavior.setSwipeDirection(SWIPE_DIRECTION_START_TO_END);
//behavior.setDragDismissDistance(0.5f);//
//behavior.setStartAlphaSwipeDistance(0.1f);//設(shè)置拖動(dòng)的有效距離，即開始透明消失的距離
//behavior.setEndAlphaSwipeDistance(0.7f);//完全消失時(shí)候的距離
//behavior.setSensitivity(0.5f);//敏感度
behavior.setListener(new SwipeDismissBehavior.OnDismissListener() {
    @Override
    public void onDismiss(View view) {
        Log.d(TAG, "onDismiss: ");
    }

    @Override
    public void onDragStateChanged(int state) {
        Log.d(TAG, "onDragStateChanged: ");
    }
});
((CoordinatorLayout.LayoutParams) mTextView.getLayoutParams()).setBehavior(behavior);
GIF.gif

二、自定義簡單 Behavior

下面貼出大部分可重寫方法的代碼：

public class TestBehavior extends CoordinatorLayout.Behavior<View> {
    private static final String TAG = "TestBehavior";

    public TestBehavior() {
        super();
        Log.i(TAG, "TestBehavior(1): ");
    }

    public TestBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        Log.i(TAG, "TestBehavior(2): ");
    }

    //--------------------[布局事件 start]-----------------------------------------------
    @Override
    public void onAttachedToLayoutParams(@NonNull CoordinatorLayout.LayoutParams params) {
        super.onAttachedToLayoutParams(params);
        Log.i(TAG, "onAttachedToLayoutParams: ");
    }

    @Override
    public void onDetachedFromLayoutParams() {
        super.onDetachedFromLayoutParams();
        Log.i(TAG, "onDetachedFromLayoutParams: ");
    }

    @Override
    public boolean onMeasureChild(CoordinatorLayout parent, View child, int parentWidthMeasureSpec, int widthUsed, int parentHeightMeasureSpec, int heightUsed) {
        Log.i(TAG, "onMeasureChild: ");
        return super.onMeasureChild(parent, child, parentWidthMeasureSpec, widthUsed, parentHeightMeasureSpec, heightUsed);
    }

    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
        Log.i(TAG, "onLayoutChild: ");
        return super.onLayoutChild(parent, child, layoutDirection);
    }
    //--------------------[布局事件 end]-----------------------------------------------
    
    //--------------------[觸摸事件 start]-----------------------------------------------
    @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, View child, MotionEvent ev) {
        Log.i(TAG, "onInterceptTouchEvent: ");
        return super.onInterceptTouchEvent(parent, child, ev);
    }

    @Override
    public boolean onTouchEvent(CoordinatorLayout parent, View child, MotionEvent ev) {
        Log.i(TAG, "onTouchEvent: ");
        return super.onTouchEvent(parent, child, ev);
    }
    //--------------------[觸摸事件 end]-----------------------------------------------

    //--------------------[狀態(tài)改變事件 start]-----------------------------------------------
    @Override
    public int getScrimColor(CoordinatorLayout parent, View child) {
        Log.i(TAG, "getScrimColor: ");
        return super.getScrimColor(parent, child);
    }

    @Override
    public float getScrimOpacity(CoordinatorLayout parent, View child) {
        Log.i(TAG, "getScrimOpacity: ");
        return super.getScrimOpacity(parent, child);
    }

    @Override
    public boolean blocksInteractionBelow(CoordinatorLayout parent, View child) {
        Log.i(TAG, "blocksInteractionBelow: ");
        return super.blocksInteractionBelow(parent, child);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        Log.i(TAG, "layoutDependsOn: dependency=="+dependency.getClass().getSimpleName());
        return super.layoutDependsOn(parent, child, dependency);
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        Log.i(TAG, "onDependentViewChanged: dependency=="+dependency.getClass().getSimpleName());
        return super.onDependentViewChanged(parent, child, dependency);
    }

    @Override
    public void onDependentViewRemoved(CoordinatorLayout parent, View child, View dependency) {
        Log.i(TAG, "onDependentViewRemoved: dependency=="+dependency.getClass().getSimpleName());
        super.onDependentViewRemoved(parent, child, dependency);
    }
    //--------------------[狀態(tài)改變事件 end]-----------------------------------------------

    //--------------------[滑動(dòng)事件 start]-----------------------------------------------
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        Log.i(TAG, "onStartNestedScroll: ");
        return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScrollAccepted(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        Log.i(TAG, "onNestedScrollAccepted: ");
        super.onNestedScrollAccepted(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target) {
        Log.i(TAG, "onStopNestedScroll: ");
        super.onStopNestedScroll(coordinatorLayout, child, target);
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        Log.i(TAG, "onNestedScroll: ");
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        Log.i(TAG, "onNestedPreScroll: ");
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
    }

    @Override
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY, boolean consumed) {
        Log.i(TAG, "onNestedFling: ");
        return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);
    }

    @Override
    public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY) {
        Log.i(TAG, "onNestedPreFling: ");
        return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY);
    }
    //--------------------[滑動(dòng)事件 end]-----------------------------------------------
}

而我們的需求通常集中在這幾個(gè)方法中：

//監(jiān)聽狀態(tài)的改變 返回是否調(diào)用 onDependentViewChanged 方法
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    Log.i(TAG, "layoutDependsOn: dependency=="+dependency.getClass().getSimpleName());
    return super.layoutDependsOn(parent, child, dependency);
}

//監(jiān)聽狀態(tài)的改變 反饋方法
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
    Log.i(TAG, "onDependentViewChanged: dependency=="+dependency.getClass().getSimpleName());
    return super.onDependentViewChanged(parent, child, dependency);
}

//監(jiān)聽滑動(dòng)，返回 true 時(shí)調(diào)用 onNestedScroll 等一系列方法
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild,
                                   View target, int nestedScrollAxes) {
    return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
}

/**
 *  正在滾動(dòng) 反饋方法
 *
 * 這里我們只關(guān)心y軸方向的滑動(dòng)，所以簡單測試了dyConsumed、dyUnconsumed
 * dyConsumed > 0 && dyUnconsumed == 0 上滑中
 * dyConsumed == 0 && dyUnconsumed > 0 到邊界了還在上滑
 *
 * dyConsumed < 0 && dyUnconsumed == 0 下滑中
 * dyConsumed == 0 && dyUnconsumed < 0 到邊界了還在下滑
 *
 * @param coordinatorLayout     parent
 * @param child                 child
 * @param target                dependency
 * @param dxConsumed            x軸滑動(dòng)的距離
 * @param dyConsumed            y軸滑動(dòng)的距離
 * @param dxUnconsumed          到頂之后滑動(dòng)的距離
 * @param dyUnconsumed          到頂之后滑動(dòng)的距離
 */
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
    Log.i(TAG, String.format("onNestedScroll: dxConsumed==%d,dyConsumed==%d,dxUnConsumed==%d,dyUnConsumed==%d", dxConsumed,dyConsumed,dxUnconsumed,dyUnconsumed));
}

實(shí)現(xiàn)效果：視圖 child 隨 dependency 的改變而改變

GIF.gif

這個(gè)效果是拖拽 dependency 的時(shí)候，目標(biāo)視圖會(huì)按照預(yù)設(shè)的規(guī)則變化位置。

思路：

  • 自定義一個(gè) Behavior 重寫 layoutDependsOn 和 onDependentViewChanged 方法
  • 在 layoutDependsOn 中，判斷該 dependency 是否為我們指定的視圖
  • 在 onDependentViewChanged 設(shè)置目標(biāo)視圖的改變規(guī)則

下面貼上測試 Behavior 代碼:

public class TestDragBehavior extends CoordinatorLayout.Behavior<View> {
    private static final String TAG = "TestDragBehavior";
    private int width;
    private int height;

    /**
     * 這個(gè)構(gòu)造方法必須重載，因?yàn)樵贑oordinatorLayout里利用反射去獲取Behavior的時(shí)候就是拿的這個(gè)構(gòu)造
     */
    public TestDragBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        width  = context.getResources().getDisplayMetrics().widthPixels;
        height  = context.getResources().getDisplayMetrics().heightPixels;
    }

    /**
     * 是否調(diào)用 onDependentViewChanged
     * @param parent        父容器
     * @param child         子視圖
     * @param dependency    依賴視圖
     * @return              是否依賴
     */
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof DragText;
    }

    /**
     * 在這里我們定義 child 要執(zhí)行的具體動(dòng)作
     * @return  child是否要執(zhí)行相應(yīng)動(dòng)作
     */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {

        int top = dependency.getTop();
        int left = dependency.getLeft();

        int x = width - left - child.getWidth();
        int y = height - top - child.getHeight();

        setPosition(child, x, y);

        return true;
    }

    private void setPosition(View child, int x, int y) {
        CoordinatorLayout.MarginLayoutParams layoutParams = (CoordinatorLayout.MarginLayoutParams) child.getLayoutParams();
        layoutParams.leftMargin = x;
        layoutParams.topMargin = y;
        child.setLayoutParams(layoutParams);
    }

}

實(shí)現(xiàn)效果：視圖 child 隨 dependency 滾動(dòng)狀態(tài)的改變而改變

GIF.gif

下面貼上測試 Behavior 代碼:

public class TestScrollBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
    private static final String TAG = "TestScrollBehavior";
    
    public TestScrollBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 監(jiān)聽滾動(dòng)，返回是否調(diào)用 onNestedScroll 等監(jiān)聽代碼
     * @param coordinatorLayout
     * @param child
     * @param directTargetChild
     * @param target
     * @param nestedScrollAxes
     * @return
     */
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild,
                                       View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    /**
     * 正在滾動(dòng)
     *
     * 這里我們只關(guān)心y軸方向的滑動(dòng)，所以簡單測試了dyConsumed、dyUnconsumed
     * dyConsumed > 0 && dyUnconsumed == 0 上滑中
     * dyConsumed == 0 && dyUnconsumed > 0 到邊界了還在上滑
     *
     * dyConsumed < 0 && dyUnconsumed == 0 下滑中
     * dyConsumed == 0 && dyUnconsumed < 0 到邊界了還在下滑
     *
     * @param coordinatorLayout     parent
     * @param child                 child
     * @param target                dependency
     * @param dxConsumed            x軸滑動(dòng)的距離
     * @param dyConsumed            y軸滑動(dòng)的距離
     * @param dxUnconsumed          到頂之后滑動(dòng)的距離
     * @param dyUnconsumed          到頂之后滑動(dòng)的距離
     */
    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        Log.i(TAG, String.format("onNestedScroll: dxConsumed==%d,dyConsumed==%d,dxUnConsumed==%d,dyUnConsumed==%d", dxConsumed,dyConsumed,dxUnconsumed,dyUnconsumed));

        if (((dyConsumed > 0 && dyUnconsumed == 0)
                || (dyConsumed == 0 && dyUnconsumed > 0))
                && child.getVisibility() != View.INVISIBLE) {// 上滑隱藏
            child.setVisibility(View.INVISIBLE);
        } else if (((dyConsumed < 0 && dyUnconsumed == 0)
                || (dyConsumed == 0 && dyUnconsumed < 0))
                && child.getVisibility() != View.VISIBLE ) {//下滑顯示
            child.setVisibility(View.VISIBLE);
        }

    }
}

實(shí)現(xiàn)效果：滑動(dòng)改變 top 布局位置

GIF.gif
/**
 * Created by Arno on 2017/10/24.
 *
 * 實(shí)現(xiàn)上滑滾出，下滑跟進(jìn)的效果
 */
public class TestScrollBehavior2 extends CoordinatorLayout.Behavior<View>{
    private static final String TAG = "TestScrollBehavior2";
    private int offset = 0;
    /**
     * 必須重寫這個(gè)方法
     * @param context
     * @param attrs
     */
    public TestScrollBehavior2(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    @Override
    public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY) {
        return true;
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        int temp = offset;
        int top = offset - dyConsumed;

        //上滑
        if (dyConsumed > 0) {
            temp = Math.max(top,-child.getHeight());
        }

        //下滑
        if (dyConsumed < 0) {
            temp = Math.min(top,0);
        }

        child.offsetTopAndBottom(temp - offset);
        offset = temp;
    }

}

注意：
上面大部分的點(diǎn)，需要自行測試，這里放上代碼中獲取 Behavior 的方法（還找了一小會(huì)它藏哪里去了），根據(jù)源碼可以看到，Behavior 被存儲(chǔ)在 CoordinatorLayout.LayoutParams 中。

CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) bottomSheet.getLayoutParams()).getBehavior();
以上，謝謝觀賞
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評(píng)論 25贊 709
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,163評(píng)論 22贊 665
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,397評(píng)論 4贊 61
  • 介紹 用于CoordiantorLayout的子View的交互行為插件。一個(gè)Behavior實(shí)現(xiàn)了用戶的一個(gè)或者多...
    hiandg閱讀 618評(píng)論 0贊 0
  • 初到一個(gè)工作單位，你對(duì)所有人都很好。同事請(qǐng)你幫忙，你哪怕自己很忙，都會(huì)答應(yīng)。工作中你付出很多，你想擁有好的人際關(guān)系...
    優(yōu)媽要遠(yuǎn)行閱讀 651評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容