Material Design控件使用详解

前言

安卓的Design包出来了很久了，布局的炫酷，是有目共睹，使用起来还是很方便的，而且实现的效果，让你惊奇，但是一些童鞋们还是不太熟悉怎么的使用它，然而自己也只是略知一二，所以在此总结一下，共同的学习交流一下如何的使用，希望对您们有一定的帮助

一、Design里面比较实用的类：

 TextInputLayout   FloatingActionButton   NavigationView   TabLayout  Snackbar  AppBarLayout   CollapsingToolbarLayout   CoordinatorLayout    android.support.v7.widget.Toolbar（为了配合主题使用的）

二、类的如何的使用：

1. TextInputLayout：setHint（）设置提示的文案；setError（）设置错误的文案；

2. FloatingActionButton：

    app:rippleColor="#f00"  //点击按钮的颜色

    app:backgroundTint="#f0f" //默认的颜色

    app:fabSize="normal"  //按钮大小

    app:elevation="10dp" //阴影高度

    app:layout_anchor="@id/appbar" //粘连在那个控件(注意:最后两个属性只有在CoordinatorLayout中才能生效)

    app:layout_anchorGravity="bottom|right|end"  //粘连的位置

3.NavigationView：(主要配合抽屉使用的 android.support.v4.widget.DrawerLayout)

    android:layout_gravity="start"  //抽屉的方向（只支持左右）

    app:headerLayout="@layout/nav_header" //菜单的头布局

    app:menu="@menu/drawer_view"   //菜单的选项

4.TabLayout：

    app:tabBackground=""  //默认的背景颜色

    app:tabIndicatorColor="" //指示器的颜色

    app:tabIndicatorHeight=""  //指示器的高度

    app:tabMode="scrollable"  //两种滚动模式： fixed：充满整个宽度   scrollable：可以左右的滑动

    app:tabSelectedTextColor="" //选择字体的颜色

    app:tabTextColor="" //默认肢体颜色

    两种常用的方式：（1）单独的当使用，addTab(Tab tab)（2）和ViewPage联动的使用  setupWithViewPager（ViewPager viewPager）

5.Snackbar：（一个好看的底部弹出吐司：）

Snackbar.make(view, "您点击了Snackbar!", Snackbar.LENGTH_SHORT).show(); //直接的吐司

Snackbar.make(view, "您点击了Snackbar!", Snackbar.LENGTH_SHORT).setAction ("actionText",onClickListener).show();//吐完之后，里面还有一个点击的事件

6.Toolbar：就是一个封装好的标题：

setNavigationIcon(int)
设置工具栏的回退图标

setLogo(int)
设置工具栏logo图片

setTitle(CharSequence)
设置工具栏标题

setSubtitle(CharSequence)
设置工具栏子标题

7.后面的AppBarLayout，CoordinatorLayout，CollapsingToolbarLayout得代码里说：

 
   //设置状态栏的透明度（系统会自己适配）



    

        

         //标题栏效果

    



 //可以和上面的布局进行联动（支持的控件 RecyclerView  ViewPager  NestedScrollView ,不支持ListView ,GridViEW ）

    

        

            

                

                

            

        

        

            

                

                

            

        

        

            

                

                

            

        

    




 

上面滑动的属性的详解：

 CoordinatorLayout

 app:layout_scrollFlags （子布局设置是否可滑动）

 android:layout_gravity 属性控制组件在布局中的位置

 app:layout_behavior="@string/appbar_scrolling_view_behavior" 通知布局中包含滑动组件！

 子布局通过app:layout_scrollFlags确定是否可滑动.给需要滑动的组件设置 app:layout_scrollFlags="scroll|enterAlways" 属性。 
 设置的layout_scrollFlags有如下几种选项： 

 scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。

 enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。 enterAlwaysCollapsed: 
 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。 

 exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。



 CollapsingToolbarLayout
 app:collapsedTitleGravity 指定折叠状态的标题如何放置，可选值:top、bottom等

 app:collapsedTitleTextAppearance="@style/TextAppearance.CollapsedTitle"
 指定折叠状态标题文字的样貌

 app:expandedTitleTextAppearance="@style/TextAppearance.ExpandedTitle"
 指定展开状态标题文字的样貌

 app:contentScrim="?attr/colorPrimaryDark"
 指定CollapsingToolbarLayout完全被滚出到屏幕外时的ColorDrawable

 app:expandedTitleGravity  展开状态的标题如何放置
 app:titleEnabled指定是否显示标题文本
 app:toolbarId指定与之关联的ToolBar，如果未指定则默认使用第一个被发现的ToolBar子View
 app:expandedTitleMarginStart="10dp"
 app:expandedTitleMargin
 app:expandedTitleMarginBottom
 app:expandedTitleMarginEnd

 展开状态改变标题文字的位置，通过margin设置
 app:layout_collapseParallaxMultiplier="0.7"

 设置视差的系数，介于0.0-1.0之间。
 app:layout_collapseMode="pin"（子布局设置折叠模式）
 有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。

 CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器，对容器中的不同View设置layout_collapseMode折叠模式，来达到不同的折叠效果。

三、总结：

Design使用熟练了，会让你觉得布局非常优雅，好看，以后也可以充当你的去装逼的神器，比较难的点就是里面的属性，比较难以理解和活灵活用，也希望自己一些拙劣的见解可以帮助到你，让你不再对Design包里面的东西比较陌生，骚年行动起来吧，总会有你自己一片天地，要是有什么不足的地方多多的指导一下，大家一起互相学习，进步，谢谢你们！