Material Design Library

一、使用Material Design Library
要使用Material Design Library需要build.gradle中引入” compile ‘com.android.support:design:24.0.0’”
二、分类
1、Color Palette主题背景色
在android studio创建项目时，在res/values/styles.xml下有个默认的会生成`

<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">    <!-- Customize your theme here. -->    <item name="colorPrimary">@color/colorPrimary</item>    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <item name="colorAccent">@color/colorAccent</item></style>

`
colorPrimaryDark 是状态栏底色
colorPrimary 如果你不手动自己去修改toolbar背景色的话，它就是默认的toolbar背景色
colorAccent 各控制元件(比如：checkbox、switch 或是 radio) 被勾选 (checked) 或是选定 (selected) 的颜色
盗张图：

2、DrawerLayout、NavigationView侧滑菜单导航
首先，需要将android.support.v4.widget.DrawerLayout作为布局的根标签，然后android.support.design.widget.NavigationView作为其中的子标签。

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:text="hello world!" />    </RelativeLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigation_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/drawer_header"        app:menu="@menu/drawer" /></android.support.v4.widget.DrawerLayout>

上文中还有个header，这个可以由自己创建布局样式，如：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="150dp"    android:background="?attr/colorPrimaryDark"    android:gravity="bottom"    android:orientation="vertical"    android:padding="16dp"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="头部"        android:textAppearance="@style/TextAppearance.AppCompat.Body1" /></LinearLayout>

menu是指我们导航中的每个item，如：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/home"            android:checked="true"            android:icon="@drawable/home"            android:title="主页" />        <item            android:id="@+id/theme"            android:icon="@drawable/theme"            android:title="主题" />        <item            android:id="@+id/settings"            android:icon="@drawable/setting"            android:title="设置" />    </group>    <item android:title="二级菜单">        <menu>            <item                android:icon="@drawable/favorite"                android:title="收藏" />            <item                android:icon="@drawable/ablum"                android:title="相册" />            <item                android:icon="@drawable/friends"                android:title="好友" />        </menu>    </item></menu>

然后actiivty里设置点击

public class MainActivity extends Activity                implements NavigationView.OnNavigationItemSelectedListener {    private DrawerLayout mDrawerLayout;    private NavigationView mNavigationView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        mNavigationView = (NavigationView) findViewById(R.id.navigation_view);        mNavigationView.setNavigationItemSelectedListener(this);    }    @Override    public boolean onNavigationItemSelected(MenuItem menuItem) {        // int id = menuItem.getItemId();        String title = (String) menuItem.getTitle();        Toast.makeText(this, "您点击了 " + title, Toast.LENGTH_SHORT).show();        return super.onContextItemSelected(menuItem);    }}

3、Floating Action Button
先看图：

<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:layout_marginRight="@dimen/activity_horizontal_margin"            android:layout_marginBottom="@dimen/activity_vertical_margin"            android:src="@drawable/ic_done" />

这个按钮可以放在布局任意地方
监听的事件和button一样

4、Snackbar短提示
看图：

这里分享一个SnackbarUtil

public class SnackbarUtil {public static final   int Info = 1;public static final  int Confirm = 2;public static final  int Warning = 3;public static final  int Alert = 4;public static  int red = 0xfff44336;public static  int green = 0xff4caf50;public static  int blue = 0xff2195f3;public static  int orange = 0xffffc107;/** * 短显示Snackbar，自定义颜色 * @param view * @param message * @param messageColor * @param backgroundColor * @return */public static Snackbar ShortSnackbar(View view, String message, int messageColor, int backgroundColor){    Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_SHORT);    setSnackbarColor(snackbar,messageColor,backgroundColor);    return snackbar;}/** * 长显示Snackbar，自定义颜色 * @param view * @param message * @param messageColor * @param backgroundColor * @return */public static Snackbar LongSnackbar(View view, String message, int messageColor, int backgroundColor){    Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_LONG);    setSnackbarColor(snackbar,messageColor,backgroundColor);    return snackbar;}/** * 自定义时常显示Snackbar，自定义颜色 * @param view * @param message * @param messageColor * @param backgroundColor * @return */public static Snackbar IndefiniteSnackbar(View view, String message,int duration,int messageColor, int backgroundColor){    Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_INDEFINITE).setDuration(duration);    setSnackbarColor(snackbar,messageColor,backgroundColor);    return snackbar;}/** * 短显示Snackbar，可选预设类型 * @param view * @param message * @param type * @return */public static Snackbar ShortSnackbar(View view, String message, int type){    Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_SHORT);    switchType(snackbar,type);    return snackbar;}/** * 长显示Snackbar，可选预设类型 * @param view * @param message * @param type * @return */public static Snackbar LongSnackbar(View view, String message,int type){    Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_LONG);    switchType(snackbar,type);    return snackbar;}/** * 自定义时常显示Snackbar，可选预设类型 * @param view * @param message * @param type * @return */public static Snackbar IndefiniteSnackbar(View view, String message,int duration,int type){    Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_INDEFINITE).setDuration(duration);    switchType(snackbar,type);    return snackbar;}//选择预设类型private static void switchType(Snackbar snackbar,int type){    switch (type){        case Info:            setSnackbarColor(snackbar,blue);            break;        case Confirm:            setSnackbarColor(snackbar,green);            break;        case Warning:            setSnackbarColor(snackbar,orange);            break;        case Alert:            setSnackbarColor(snackbar,Color.YELLOW,red);            break;    }}/** * 设置Snackbar背景颜色 * @param snackbar * @param backgroundColor */public static void setSnackbarColor(Snackbar snackbar, int backgroundColor) {    View view = snackbar.getView();    if(view!=null){        view.setBackgroundColor(backgroundColor);    }}/** * 设置Snackbar文字和背景颜色 * @param snackbar * @param messageColor * @param backgroundColor */public static void setSnackbarColor(Snackbar snackbar, int messageColor, int backgroundColor) {    View view = snackbar.getView();    if(view!=null){        view.setBackgroundColor(backgroundColor);        ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(messageColor);    }}/** * 向Snackbar中添加view * @param snackbar * @param layoutId * @param index 新加布局在Snackbar中的位置 */public static void SnackbarAddView( Snackbar snackbar,int layoutId,int index) {    View snackbarview = snackbar.getView();    Snackbar.SnackbarLayout snackbarLayout=(Snackbar.SnackbarLayout)snackbarview;    View add_view = LayoutInflater.from(snackbarview.getContext()).inflate(layoutId,null);    LinearLayout.LayoutParams p = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);    p.gravity= Gravity.CENTER_VERTICAL;    snackbarLayout.addView(add_view,index,p);}}

显示位置

//设置位置,Snackbar本质是一个LinearLayout    ViewGroup.LayoutParams lp = view.getLayoutParams();    LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(lp.width, lp.height);    llp.gravity = Gravity.TOP;    view.setLayoutParams(llp);

5、TabLayout 顶部菜单栏
布局：

<?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="com.hc.materialdesign.MainActivity">    <android.support.design.widget.TabLayout        android:id="@+id/tablayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="?attr/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark"        app:tabGravity="center"        app:tabMode="fixed" />    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" /></LinearLayout>

app:tabMode：可以取如下两个值，
fixed：表示Tab不能滚动
scrollable：表示Tab可以滚动，此时不管tabGravity取何值，都是按照从左到右排过去，即相当于app:tabGravity=”left”(当然了，实际中没有left这个值，只是我们可以这么去理解)
app:tabGravity：可以取如下两个值，
fill：当tabMode取fixed时（即tab不能滚动时），tab的所有子标签填充tab的宽度
center：当tabMode去fixed时，tab中所有子标签居中显示。
当app:tabMode=”scrollable”：

当app:tabMode=”fixed”且 app:tabGravity=”center”：

当app:tabMode=fixed且 app:tabGravity=”fill”：

activity中的操作：public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //初始化ViewPager及其适配器        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);        //将ViewPager与适配器关联        viewPager.setAdapter(adapter);        //TabLayout        TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);        //将ViewPager与TabLayout关联        tabLayout.setupWithViewPager(viewPager);        //设置指示器的颜色        tabLayout.setSelectedTabIndicatorColor(Color.GREEN);    }    static class MyPagerAdapter extends FragmentStatePagerAdapter {        public MyPagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return MyFragment.newInstance(position);        }        @Override        public int getCount() {            return 3;        }        @Override        public CharSequence getPageTitle(int position) {            return "Tab " + position;        }    }}

6、Toolbar
要使用Toolbar需要隐藏之前的Actionbar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/blue</item>        <item name="colorPrimaryDark">@color/black</item>        <item name="colorAccent">@color/blue</item>        <item name="android:windowIsTranslucent">true</item>        <item name="android:windowActionBar">false</item>        <item name="android:windowNoTitle">true</item>    </style>

布局文件中引用：

<android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:background="?attr/colorPrimary"        android:layout_height="?android:attr/actionBarSize"  />

activity中对Toolbar操作：

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        toolbar.setTitle("这里是Title");        toolbar.setSubtitle("这里是子标题");        toolbar.setLogo(R.drawable.icon);         setSupportActionBar(toolbar);