12个Material Design风格控件的使用

---

项目在GitHub上的地址：

https://github.com/Hebin320/MaterialDesignUse

CSDN上的下载地址

http://download.csdn.net/detail/hebin320320/9658215

---

1、AppBarLayout、ToolBar

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作。
AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用。
ToolBar是谷歌新推出的代替ActionBar的一个标题栏控件，能将背景拓展到状态栏，依赖包是v7，使用之前先把style中继承的主题改为NoActionBar；
可以设置"标题",“副标题”,“Logo”,“NavigationIcon"以及"Menu菜单”，也可以自定义布局；

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:fitsSystemWindows="true"
        >
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="0dp"
            android:layout_marginStart="0dp"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:paddingTop="6dp"
            android:paddingRight="40dp"
            />
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

TextView是一个居中的标题，
fitsSystemWindows实现状态栏各版本适配方案:
1.Android5.0以上：material design风格，半透明(APP 的内容不被上拉到状态)
2.Android4.4(kitkat)以上至5.0：全透明(APP 的内容不被上拉到状态)
3.Android4.4(kitkat)以下:不占据status bar
在Activity中添加代码即可使用ToolBar；

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        tvToolTitle = (TextView) findViewById(R.id.toolbar_title);
        tvToolTitle.setText("测试");
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);

ToolBar中的菜单布局：

<menu 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"  
    tools:context=".MainActivity" >   
    <item  
        android:id="@+id/action_settings"  
        android:orderInCategory="100"  
        android:title="action_settings"  
        app:showAsAction="never"/>  
  
</menu>  

mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
    @Override  
    public boolean onMenuItemClick(MenuItem item) {  
        switch (item.getItemId()) {  
        case R.id.action_settings:  
            break;  
        default:  
            break;  
        }  
        return true;  
    }  
});  

2、DrawerLayout、NavigationView

DrawerLayout可以轻松的实现抽屉效果、在DrawerLayout中，第一个子View必须是显示内容的view，第二个view是抽屉view,设置属性layout_gravity=“left|right”,表示是从左边滑出还是右边滑出。
使用前需添加：

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

xml中的布局代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:fitsSystemWindows="true"
            >
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="0dp"
                android:layout_marginStart="0dp"
                android:gravity="center"
                android:text="@string/app_name"
                android:textColor="#FFFFFF"
                android:textSize="20sp"
                android:paddingTop="6dp"
                android:paddingRight="40dp"
                />
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <!--第一个，显示的布局-->
        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/main_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/frame_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/appbar"
                android:scrollbars="none"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </android.support.design.widget.CoordinatorLayout>


        <!--第二个，不显示的抽屉布局-->
        <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/navigation_header"
            app:menu="@menu/drawer" />

    </android.support.v4.widget.DrawerLayout&