简单使用ToolBar+DrawerLayout

生活本来就不容易,而我们的不努力只会让生活变得更加无赖.

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](https://img.haomeiwen.com/i2605454/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](https://img.haomeiwen.com/i2605454/cb4933c8799b4650.gif?imageMogr2/auto-orient/strip)