android 新版的设计规范（Material Design）

I still believe that the stars will speak, through the summer and winter snow fence after, you will arrive.

Google发布android 5.0版本后并且发布Material Design设计标准，但是在android4.0版本与5.0版本可谓有着天然差距，对于整个项目的重新梳理变得困难。而Material Design的设计规范在众多的主流App中也不是被广泛应用。

本次着重整理关于Design包中的各大控件的使用。

gradle.build中添加依赖：

compile 'com.android.support:design:25.3.1'

对于androidstudio的compile依赖部分不了解的朋友，可以查看我的一篇文章：module进阶并将其上传至Jcenter仓库

在引用过后，该包会被引用在本地中：

关于部分的source code 可以进行查看。

---

一下是Design包中比较重要的一些类：

1. android.support.design.widget.CoordinatorLayout
2. android.support.design.widget.AppBarLayout
3. android.support.design.widget.CollapsingToolbarLayout
4. android.support.v7.widget.Toolbar
5. android.support.v4.widget.DrawerLayout
6. android.support.design.widget.NavigationView
7. android.support.design.widget.TabLayout
8. android.support.design.widget.FloatingActionButton
9. android.support.v7.widget.RecyclerView
10. android.support.v4.widget.SwipeRefreshLayout
11. android.support.design.widget.TextInputLayout
12. android.support.design.widget.TextInputEditText

android.support.design.widget.CoordinatorLayout

关于CoordinatorLayout是一个类似于FrameLayout,但是在Coordinator中功能更加强大，且与design包中相关的Layout联合使用会有更加不一样的效果。

关于Behavior的探索

在整个design的开发中，behavior的属性应用也有很多

app:layout_behavior="@string/appbar_scrolling_view_behavior"

对于behavior属性是属于CoordinatorLayout中的。

所以在实际的开发中，我们可以定制属于我们需求的Behavior。

step1：创建自己的Behavior并继承CoordinatorLayout.Behavior

/**
 *
 * 自定义的Behavior
 *
 * 两种设定模式
 *
 * 1：在代码中设置
 *
 * 2:在布局中，实现两个参数的构造方法
 */

public class myBehavior extends CoordinatorLayout.Behavior {
    private static final String TAG = "myBehavior";

    public myBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     *
     * @param coordinatorLayout
     * @param child
     * @param directTargetChild
     * @param target
     * @param nestedScrollAxes
     * @return  返回值是否关心
     */
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
//        return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
        return true;
    }

    /**
     * 滚动
     * @param coordinatorLayout
     * @param child
     * @param target
     * @param dxConsumed
     * @param dyConsumed//向上滑动的距离
     * @param dxUnconsumed
     * @param dyUnconsumed
     */
    @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);

        Log.i(TAG, "onNestedScroll: dxConsumed--------------》"+dxConsumed);
        Log.i(TAG, "onNestedScroll: dyConsumed--------------》"+dyConsumed);
        Log.i(TAG, "onNestedScroll: dxUnconsumed--------------》"+dxUnconsumed);
        Log.i(TAG, "onNestedScroll: dyUnconsumed--------------》"+dyUnconsumed);
        //垂直滚动只需要判断y的值
        if(dyConsumed>0){//向上滚动，干什么事情呢？

            ViewCompat.animate(child).scaleX(0).scaleY(0).start();
        }else{
            //向下滚动
            ViewCompat.animate(child).scaleX(1).scaleY(1).start();

        }
    }
}

step2:应用在自己的实际效果中有两种方式

1： 直接在布局中使用，但是前提是你的控件必须是CoordinatorLayout的直接子布局

 <TextView
        android:id="@+id/tv_behavior"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="wedfrend"
        android:textColor="@color/colorPrimary"
        android:textSize="16sp"  app:layout_behavior="wedfrend.wang.materialdesign.behavior.myBehavior" />

2：在代码中进行引用：

TextView textView = (TextView) findViewById(R.id.tv_behavior);
        CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) textView.getLayoutParams();
       myBehavior myBehavior = new myBehavior();
        params.setBehavior(myBehavior);

AppBarLayout

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/benbenla"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/behavior_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                >
            </android.support.v7.widget.Toolbar>
  </android.support.design.widget.CollapsingToolbarLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="12dp"
            android:text="wedfrend"
            android:textSize="16sp"
            />

    </android.support.design.widget.AppBarLayout>

控件1：Tab栏，经常与ViewPage一起使用

android.support.design.widget.TabLayout

TabLayout

<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"

app:tabBackground="@color/colorPrimaryDark"         
<!--目标选中的下滑先颜色 -->             app:tabIndicatorColor="@android:color/holo_blue_bright"
<!-- tab的滚动模式，有两种选择  1：scrollable滚动2：fixed平分屏幕-->
app:tabMode="scrollable"      
<!-- 选中的字体颜色-->
app:tabSelectedTextColor="@color/colorAccent"      
<!-- 字体设置，这个只能使用这个style样式进行设置-->       app:tabTextAppearance="@android:style/TextAppearance.Large"
<!--未选中字体的颜色 -->
app:tabTextColor="@android:color/white"></android.support.design.widget.TabLayout>

之所以说TabLayout和ViewPager连用是有一个方法

//设置Tablayout的标题头部，但是要注意的是我们必须Adapter中设置一个方法，getPageTitle
tab.setupWithViewPager(viewPager);

这样可以将ViewPager和我们的TabLayout链接起来，但是需要在adapter中重写方法

 @Override
    public CharSequence getPageTitle(int position) {
        return listString.get(position);
    }