CoordinatorLayout_Behavior控制Toolbar&Fab的顯示和隱藏

2019-11-09 15:00:14

字體：大中小

來源：轉載

供稿：網(wǎng)友

前言

Behavior是Android新出的Design庫里新增的布局概念。Behavior只有是CoordinatorLayout的直接子View才有意義。可以為任何View添加一個Behavior。Behavior是一系列回調。讓你有機會以非侵入的為View添加動態(tài)的依賴布局，和處理父布局(CoordinatorLayout)滑動手勢的機會。

效果~

Part 1、利用監(jiān)聽事件來實現(xiàn)顯示和隱藏動畫

布局

<RelativeLayout    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:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.andly.administrator.andly_md9.MainActivity">    <android.support.v7.widget.RecyclerView        android:id="@+id/recyclerview"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:clipChildren="false"        android:clipToPadding="false"        android:paddingTop="?attr/actionBarSize"        />    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPRimary"/>    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:src="@android:drawable/ic_dialog_email"        android:layout_margin="16dp"        app:elevation="10dp"        app:fabSize="normal"        app:pressedTranslationZ="12dp"        app:rippleColor="#ff0"        /></RelativeLayout>為RecyclerView設置監(jiān)聽事件
rv.addOnScrollListener(new FabScrollListener(this));public class FabScrollListener extends RecyclerView.OnScrollListener {    private int distance = 0;//滑動的距離，根據(jù)距離于臨界值比較判斷是向上滑還是向下滑    private HideScrollListener hideListener;//這里使用監(jiān)聽讓Activity進行實現(xiàn)    private boolean visible = true;//是否可見    public FabScrollListener(HideScrollListener hideScrollListener) {        // TODO Auto-generated constructor stub        this.hideListener = hideScrollListener;    }    @Override    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {        super.onScrolled(recyclerView, dx, dy);        //dy有正有負，向上滑為負 向下滑為正        if (distance < -ViewConfiguration.getTouchSlop() && !visible) {            //顯示Fab和ToolBar            hideListener.onShow();            distance = 0;            visible = true;        } else if (distance > ViewConfiguration.getTouchSlop() && visible) {            //隱藏Fab和ToolBar            hideListener.onHide();            distance = 0;            visible = false;        }        if ((dy > 0 && visible) || (dy < 0 && !visible))//向下滑并且可見  或者  向上滑并且不可見            distance += dy;    }}這里通過distance和visible的判斷來實現(xiàn)toolbar和fab的顯示和隱藏
相應的實現(xiàn)
    @Override    public void onHide() {        mToolbar.animate().translationY(-mToolbar.getHeight()).setInterpolator(new AccelerateInterpolator(3));        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) fab.getLayoutParams();        ViewCompat.animate(fab).translationY(fab.getHeight() + layoutParams.bottomMargin + layoutParams.topMargin).setInterpolator(new AccelerateInterpolator(3));    }    @Override    public void onShow() {        mToolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));        ViewCompat.animate(fab).translationY(0).setInterpolator(new DecelerateInterpolator(3));    }效果~
     
Part 2、Behavior控制Toolbar&Fab的顯示和隱藏
CoordinatorLayout繼承ViewGroup,通過協(xié)調并調度里面的子控件來實現(xiàn)觸摸并產生一些相關的動畫，可以通過設置View的Behavior來實現(xiàn)觸摸的動畫調度
布局
<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:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.andly.administrator.andly_md9.MainActivity">    <android.support.v7.widget.RecyclerView        android:id="@+id/recyclerview"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:paddingTop="?attr/actionBarSize"        />    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"/>    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="bottom|end"        android:layout_margin="16dp"        android:src="@android:drawable/ic_dialog_email"        app:elevation="10dp"        app:fabSize="normal"        app:layout_behavior=".FabBehavior"        app:pressedTranslationZ="12dp"        app:rippleColor="#ff0"/></android.support.design.widget.CoordinatorLayout>tips:
1、要用CoordinatorLayout進行包裹
2、app:layout_behavior="包名+類名" 這里注意的是在Behavior子類加上構造方法
    public FabBehavior(Context context, AttributeSet attrs) {        super();    }不然會報Could not inflate Behavior subclass異常
相應的自定義Behavior，這里繼承的是FloatingActionButton.Behavior類
public class FabBehavior extends FloatingActionButton.Behavior {    private boolean visible = true;//是否可見    public FabBehavior(Context context, AttributeSet attrs) {        super();    }    @Override    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,                                       FloatingActionButton child, View directTargetChild, View target,                                       int nestedScrollAxes) {        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,                target, nestedScrollAxes);    }    @Override    public void onNestedScroll(CoordinatorLayout coordinatorLayout,                               FloatingActionButton child, View target, int dxConsumed,                               int dyConsumed, int dxUnconsumed, int dyUnconsumed) {        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed,                dxUnconsumed, dyUnconsumed);        if (dyConsumed > 0 && visible) {            //show            visible = false;            onHide(child, (Toolbar) coordinatorLayout.getChildAt(1));        } else if (dyConsumed < 0) {            //hide            visible = true;            onShow(child, (Toolbar) coordinatorLayout.getChildAt(1));        }    }    public void onHide(FloatingActionButton fab, Toolbar toolbar) {        toolbar.animate().translationY(-toolbar.getHeight()).setInterpolator(new AccelerateInterpolator(3));        CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();        fab.animate().translationY(fab.getHeight() + layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));    }    public void onShow(FloatingActionButton fab, Toolbar toolbar) {        toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));        fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));    }}tips:
1、onStartNestedScroll() ： 當觀察的View滑動開始的時候進行回調
2、onNestedScroll() ： 當觀察的View滑動的時候回調
3、nestedScrollAxes ： 滑動的關聯(lián)軸，這里只考慮豎直方向
當然你可以使用github上第三方庫https://github.com/makovkastar/FloatingActionButton
步驟：
1、添加依賴
dependencies {    compile 'com.melnykov:floatingactionbutton:1.3.0'}2、在布局中引用自定義FloatingActionButton<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"             xmlns:fab="http://schemas.android.com/apk/res-auto"             android:layout_width="match_parent"             android:layout_height="match_parent">    <ListView            android:id="@android:id/list"            android:layout_width="match_parent"            android:layout_height="match_parent" />    <com.melnykov.fab.FloatingActionButton            android:id="@+id/fab"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="bottom|right"            android:layout_margin="16dp"            android:src="@drawable/ic_action_content_new"            fab:fab_colorNormal="@color/primary"            fab:fab_colorPressed="@color/primary_pressed"            fab:fab_colorRipple="@color/ripple" /></FrameLayout>3、關聯(lián)Fab到ScrollView、ListView、RecyclerView
ListView listView = (ListView) findViewById(android.R.id.list);FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);fab.attachToListView(listView);4、在布局中設置
        fab:fab_type="mini"        fab:fab_colorNormal="@color/primary"        fab:fab_colorPressed="@color/primary_pressed"        fab:fab_shadow="false"        fab:fab_colorRipple="@color/ripple"或者在代碼中進行設置
        fab.setType(FloatingActionButton.TYPE_MINI);        fab.setColorNormal(getResources().getColor(R.color.primary));        fab.setColorPressed(getResources().getColor(R.color.primary_pressed));        fab.setShadow(false);        fab.show();        fab.hide();        fab.show(false); // Show without an animation        fab.hide(false); // Hide without an animation        fab.setColorRipple(getResources().getColor(R.color.ripple));