MD - 简单控件使用以及自定义Behavior

1.概述

  Material Design从Android5.0开始引入的，是一种全新的设计语言（翻译为“原材料设计”），其实是谷歌提倡的一种设计风格、理念、原则。最近发现现在很多 app 包括最早的知乎没有使用了，今天再来回顾一下控件的简单使用，效果非常简单，先上张图。

    效果展示
                

2.控件介绍

  2.1 CoordinatorLayout：用来协调子控件，结合AppBarLayout，FloatingActionButton等使用

  2.2 SwipeRefreshLayout：提供的下拉刷新的效果，里面只能包一个子控件可以包任意控件RecyclerView，ScrollView ，ListView。

  2.3 ToolBar：加强版的ActionBar

  2.4 TabLayout：导航书签，可以结合ViewPager使用

		app:tabIndicatorColor            导航书签下方指示线的颜色
    	app:tabIndicatorHeight           指示线的高度
    	app:tabSelectedTextColor         导航书签选中时的字体颜色
     	app:tabMode="fixed"              显示模式
              		1：fixed             全部展示
                    2. scrollable        滑动展示

  2.5 CollapsingToolBarLayout：折叠布局，结合ToolBar使用

		android:minHeight					 最小高度
		app:layout_scrollFlags				 模式
					scroll 				 	 想滚动就必须设置这个。
					enterAlways				 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。
					exitUntilCollapsed		 向上滚动时收缩View，但可以固定Toolbar一直在上面。
					enterAlwaysCollapsed	 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
		app:contentScrim					 当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
		app:expandedTitleGravity			 Toolbar的title显示位置
		app:expandedTitleMargin				 设置显示位置设置Margin值
		app:layout_collapseParallaxMultiplier视差因子   0-1之间
		app:layout_collapseMode              视差模式
		            pin:·					 固定模式
		            parallax: 				 折叠效果

  2.6 SnackBar：MD风格的Toast，底部弹出

  2.7 TextInputLayout：自带错误提示的文本框

  等等，不一一介绍了，今天只是简单的使用，想了解，可以去官网查看

3.效果实现

  3.1 CoordinatorLayout 和 Behavior 介绍

    CoordinatorLayout是什么？ 看一下官方的介绍：Interaction behavior plugin for child views of (子视图的交互行为插件)
    Behavior 实现了用户的一个或者多个交互行为，它们可能包括拖拽、滑动、快滑或者其他一些手势。Behavior 是一个顶层抽象类，其他的一些具体行为的 Behavior 都是继承自这个类。

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout 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"
	    tools:context=".one_18.BehaviorActivity">
	
	    <androidx.coordinatorlayout.widget.CoordinatorLayout
	        android:layout_width="match_parent"
	        android:layout_height="match_parent">
	
	    <com.google.android.material.appbar.AppBarLayout
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content">
	
	        <ImageView
	            android:layout_width="match_parent"
	            android:layout_height="200dp"
	            android:background="@color/blue"
	            app:layout_scrollFlags="scroll|enterAlways|snap"/>
	
	<!--        <androidx.appcompat.widget.Toolbar-->
	<!--            android:id="@+id/tool_bar"-->
	<!--            android:layout_width="match_parent"-->
	<!--            android:layout_height="wrap_content"-->
	<!--            app:title="知乎首页"-->
	<!--            app:titleTextColor="#ffffff"-->
	<!--            app:layout_scrollFlags="scroll|enterAlways|snap">-->
	<!--        </androidx.appcompat.widget.Toolbar>-->
	    </com.google.android.material.appbar.AppBarLayout>
	
	<androidx.recyclerview.widget.RecyclerView
	    android:id="@+id/rv"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
	    
	    <com.google.android.material.floatingactionbutton.FloatingActionButton
	        android:id="@+id/fab"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_gravity="bottom|end"
	        android:layout_marginBottom="70dp"
	        android:layout_marginRight="16dp"
	        android:layout_marginEnd="16dp"
	        app:layout_behavior=".one_18.TranslationBehavior"
	        android:src="@mipmap/ic_launcher">
	    </com.google.android.material.floatingactionbutton.FloatingActionButton>
	
	
	    <LinearLayout
	        android:layout_width="match_parent"
	        android:layout_height="50dp"
	        android:orientation="horizontal"
	        android:background="@android:color/white"
	        app:layout_behavior="@string/bottom_sheet_behavior">
	
	        <ImageView
	            android:layout_width="0dp"
	            android:layout_height="match_parent"
	            android:layout_weight="1"
	            android:src="@mipmap/ic_launcher"/>
	        <ImageView
	            android:layout_width="0dp"
	            android:layout_height="match_parent"
	            android:layout_weight="1"
	            android:src="@mipmap/ic_launcher"/>
	        <ImageView
	            android:layout_width="0dp"
	            android:layout_height="match_parent"
	            android:layout_weight="1"
	            android:src="@mipmap/ic_launcher"/>
	        <ImageView
	            android:layout_width="0dp"
	            android:layout_height="match_parent"
	            android:layout_weight="1"
	            android:src="@mipmap/ic_launcher"/>
	    </LinearLayout>
	
	</androidx.coordinatorlayout.widget.CoordinatorLayout>
	</LinearLayout>

看一下Behaviror的方法作用

 /**
     * 表示是否给应用了Behavior 的View 指定一个依赖的布局，通常，当依赖的View 布局发生变化时
     * 不管被被依赖View 的顺序怎样，被依赖的View也会重新布局
     * @param parent
     * @param child 绑定behavior 的View
     * @param dependency   依赖的view
     * @return 如果child 是依赖的指定的View 返回true,否则返回false
     */
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return super.layoutDependsOn(parent, child, dependency);
    }

    /**
     * 当被依赖的View 状态（如：位置、大小）发生变化时，这个方法被调用
     * @param parent
     * @param child
     * @param dependency
     * @return
     */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        return super.onDependentViewChanged(parent, child, dependency);
    }

    /**
     *  当coordinatorLayout 的子View试图开始嵌套滑动的时候被调用。当返回值为true的时候表明
     *  coordinatorLayout 充当nested scroll parent 处理这次滑动，需要注意的是只有当返回值为true
     *  的时候，Behavior 才能收到后面的一些nested scroll 事件回调（如：onNestedPreScroll、onNestedScroll等）
     *  这个方法有个重要的参数nestedScrollAxes，表明处理的滑动的方向。
     *
     * @param coordinatorLayout 和Behavior 绑定的View的父CoordinatorLayout
     * @param child  和Behavior 绑定的View
     * @param directTargetChild
     * @param target
     * @param nestedScrollAxes 嵌套滑动 应用的滑动方向，看 {@link ViewCompat#SCROLL_AXIS_HORIZONTAL},
     *                         {@link ViewCompat#SCROLL_AXIS_VERTICAL}
     * @return
     */
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    /**
     * 嵌套滚动发生之前被调用
     * 在nested scroll child 消费掉自己的滚动距离之前，嵌套滚动每次被nested scroll child
     * 更新都会调用onNestedPreScroll。注意有个重要的参数consumed，可以修改这个数组表示你消费
     * 了多少距离。假设用户滑动了100px,child 做了90px 的位移，你需要把 consumed［1］的值改成90，
     * 这样coordinatorLayout就能知道只处理剩下的10px的滚动。
     * @param coordinatorLayout
     * @param child
     * @param target
     * @param dx  用户水平方向的滚动距离
     * @param dy  用户竖直方向的滚动距离
     * @param consumed
     */
    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
    }

    /**
     * 进行嵌套滚动时被调用
     * @param coordinatorLayout
     * @param child
     * @param target
     * @param dxConsumed target 已经消费的x方向的距离
     * @param dyConsumed target 已经消费的y方向的距离
     * @param dxUnconsumed x 方向剩下的滚动距离
     * @param dyUnconsumed y 方向剩下的滚动距离
     */
    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
    }

    /**
     *  嵌套滚动结束时被调用，这是一个清除滚动状态等的好时机。
     * @param coordinatorLayout
     * @param child
     * @param target
     */
    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target) {
        super.onStopNestedScroll(coordinatorLayout, child, target);
    }

    /**
     * onStartNestedScroll返回true才会触发这个方法，接受滚动处理后回调，可以在这个
     * 方法里做一些准备工作，如一些状态的重置等。
     * @param coordinatorLayout
     * @param child
     * @param directTargetChild
     * @param target
     * @param nestedScrollAxes
     */
    @Override
    public void onNestedScrollAccepted(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        super.onNestedScrollAccepted(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    /**
     * 用户松开手指并且会发生惯性动作之前调用，参数提供了速度信息，可以根据这些速度信息
     * 决定最终状态，比如滚动Header，是让Header处于展开状态还是折叠状态。返回true 表
     * 示消费了fling.
     *
     * @param coordinatorLayout
     * @param child
     * @param target
     * @param velocityX x 方向的速度
     * @param velocityY y 方向的速度
     * @return
     */
    @Override
    public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY) {
        return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY);
    }

    /**
     * 摆放子 View 的时候调用，可以重写这个方法对子View 进行重新布局
     */
    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
        return super.onLayoutChild(parent, child, layoutDirection);
    }

  3.2 自定义 Behavior 来实现 FloatingActionBar 的改变

	public class TranslationBehavior<T extends FloatingActionButton> extends CoordinatorLayout.Behavior<T> {
	    private static final String TAG = "TranslationBehavior";
	    
	    /**
	     * FloatingActionButton当前是否是显示状态
	     */
	    private boolean isOut = false;
	
	    public TranslationBehavior(Context context, AttributeSet attrs) {
	        super(context, attrs);
	    }
	
	    /**
	     *  注意：当coordinatorLayout 的子View试图开始嵌套滑动的时候被调用。当返回值为true的时候表明
	     *  coordinatorLayout 充当nested scroll parent 处理这次滑动，需要注意的是只有当返回值为true
	     *  的时候，Behavior 才能收到后面的一些nested scroll 事件回调（如：onNestedPreScroll、onNestedScroll等）
	     *  这个方法有个重要的参数nestedScrollAxes，表明处理的滑动的方向。
	     * @param coordinatorLayout 和Behavior 绑定的View的父CoordinatorLayout
	     * @param child  和Behavior 绑定的View
	     * @param directTargetChild
	     * @param target
	     * @param axes 嵌套滑动,滑动方向， {@link ViewCompat#SCROLL_AXIS_HORIZONTAL}
	     *                                 {@link ViewCompat#SCROLL_AXIS_VERTICAL}
	     * @return
	     */
	    @Override
	    public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull T child, @NonNull View directTargetChild, @NonNull View target, int axes, int type) {
	        Log.e(TAG,"onStartNestedScroll");
	        return axes == ViewCompat.SCROLL_AXIS_VERTICAL;
	    }
	
	
	    /**
	     * 进行嵌套滚动时被调用
	     * @param coordinatorLayout
	     * @param child
	     * @param target
	     * @param dxConsumed    target 已经消费的x方向的距离
	     * @param dyConsumed    target 已经消费的y方向的距离  往上滑是正  往下滑是负
	     * @param dxUnconsumed  x 方向剩下的滚动距离
	     * @param dyUnconsumed  y 方向剩下的滚动距离
	     * @param type
	     */
	    @Override
	    public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull T child, @NonNull View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type) {
	        Log.e(TAG,"onNestedScroll");
	        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type);
	        Log.e(TAG,"dyConsumed："+dyConsumed+"--------dyUnconsumed:"+dyUnconsumed);
	        //1.将我们的child(FloatingActionButton)进行隐藏
	        if (dyConsumed > 0){
	            if (!isOut){
	                //2.移动距离计算  bottomMargin + 自己的高度
	                int translationY = ((CoordinatorLayout.LayoutParams)child.getLayoutParams()).bottomMargin + child.getMeasuredHeight();
	                child.animate().translationY(translationY).setDuration(500).start();
	                //3.注意：这样设置后网上滑的时候会发现FloatingActionButton会反应慢，我们可以设置一个标志位
	                isOut = true;
	            }
	        }else {
	            if (isOut){
	                child.animate().translationY(0).setDuration(500).start();
	                isOut = false;
	            }
	        }
	    }
	}