生活本來就不容易,而我們的不努力只會讓生活變得更加無賴.

Toolbar是Google在Android5.0推出的Material Design風格的一款導航控件，Toolbar被Google推薦使用，以取代3.0開始流行的Actionbar（Actionbar不能定制）,而Drawerlayout則是Google推出的抽屜效果的控件(之前用的是slidingMenu),本次使用將結合Navigation實現左劃菜單的效果.

Toolbar基本用法:

1. 布局文件 tool_bar.xml

<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/tool_bar"
        app:title="demo"
        app:titleTextColor="@color/colorNormal"
        android:background="@color/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    </android.support.v7.widget.Toolbar>```
2. 代碼中使用:

    mToolbar = (Toolbar) findViewById(R.id.tool_bar);
    setSupportActionBar(mToolbar);
    //左上角圖標可用
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);

/**
* 生成菜單
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu);
return super.onCreateOptionsMenu(menu);
}```

• 如果沒有onCreateOptionsMenu(Menu menu)這個方法,將會不起作用

3. 定制主題風格:
   style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:colorControlNormal">@color/colorNormal</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <!--箭頭圖標樣式-->
    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@color/colorNormal</item>
    </style>
</resources>```
menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
app:actionViewClass="android.support.v7.widget.SearchView"
android:id="@+id/btn_search"
app:showAsAction="ifRoom"
android:title="@string/menu_search"
android:orderInCategory="80"
>
</item>
<item
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
android:id="@+id/btn_share"
app:showAsAction="ifRoom"
android:title="@string/menu_search"
android:orderInCategory="90">
</item>

<item
    android:title="@string/setting" app:showAsAction="never"
    android:orderInCategory="100"
    android:id="@+id/btn_setting1">
</item>

<item
    android:title="@string/setting"
    app:showAsAction="never"
    android:orderInCategory="100"
    android:id="@+id/btn_setting2">
</item>
<item
    android:title="@string/setting"
    app:showAsAction="never"
    android:orderInCategory="100"
    android:id="@+id/btn_setting3">
</item>

</menu>```

• 這里需要注意的是app:actionViewClass屬性是為了引用庫內的圖標

4. 效果

Paste_Image.png

DrawerLayout的使用:

由于要使用Navigation,因此請在app的build.gradle中引入compile 'com.android.support:design:24.+'

1. drawer_Layout.xml

<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">
        <android.support.design.widget.NavigationView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:id="@+id/navigation_view"
            app:menu="@menu/menu_view"
            app:headerLayout="@layout/head_view"
            android:fitsSystemWindows="true">
        </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

• 這里需要注意的是三個屬性(一個為左劃菜單的菜單,一個為headView,最后一個為側滑菜單方向選項"start","end"分別為左右劃出)

 app:menu="@menu/menu_view"
 app:headerLayout="@layout/head_view"
android:layout_gravity="start"

2. 代碼中使用

     mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
        //綁定Toolbar
        mToogle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.open_drawer,R.string.close_drawer);
        mToogle.syncState();
        //NavigationView監聽事件
        setNavigationView(mNavigationView);

3. 菜單項menu_view.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group >
        <item
            android:id="@+id/menu_search"
            android:checkable="true"
            android:title="@string/menu_search2" />
        <item
            android:id="@+id/menu_persion"
            android:checkable="true"
            android:title="@string/menu_persion" />
        <item
            android:id="@+id/menu_init"
            android:checkable="true"
            android:title="@string/menu_init" />
        <item
            android:id="@+id/menu_download"
            android:checkable="true"
            android:title="@string/menu_download" />
    </group>
</menu>```
4. 頭布局head_view.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:padding="30dp"
android:background="@color/colorPrimary">
<ImageView
android:layout_centerInParent="true"
android:layout_width="72dp"
android:layout_height="72dp"
android:src="@mipmap/ic_launcher"
android:id="@+id/head_image"/>

<TextView
    android:layout_below="@+id/head_image"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:id="@+id/head_text"
    android:textSize="18sp"
    android:textColor="#ffff"
    android:paddingBottom="10dp"/>

</RelativeLayout>

5. 效果

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2605454-8f16d965f9671946.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 具體代碼實現
MainActivity.java

import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;

public class Main2Activity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener {

private Toolbar mToolbar;
private NavigationView mNavigationView;
private LayoutInflater inflater;
private ActionBarDrawerToggle mToogle;
private DrawerLayout mDrawerLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main2);
    initView();
}

private void initView() {
    inflater = LayoutInflater.from(this);
    mToolbar = (Toolbar) findViewById(R.id.tool_bar);
    setSupportActionBar(mToolbar);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
    //綁定Toolbar
    mToogle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.open_drawer,R.string.close_drawer);
    mToogle.syncState();
    //左上角圖標可用
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    mToolbar.setOnMenuItemClickListener(this);
    //NavigationView監聽事件
    setNavigationView(mNavigationView);
}

/**
 * 生成菜單
 */
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu,menu);
    return super.onCreateOptionsMenu(menu);
}

public void setNavigationView(NavigationView navigationView) {
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem item) {
               item.setChecked(true);
               mDrawerLayout.closeDrawers();

            return true;
        }
    });
}

@Override
public boolean onMenuItemClick(MenuItem item) {
    return false;
}

}

### 效果

![demo.gif](http://upload-images.jianshu.io/upload_images/2605454-cb4933c8799b4650.gif?imageMogr2/auto-orient/strip)