简单使用ToolBar+DrawerLayout-优快云博客

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

Toolbar是Google在Android5.0推出的Material Design风格的一款导航控件，Toolbar被Google推荐使用，以取代3.0开始流行的Actionbar（Actionbar不能定制）,而Drawerlayout则是Google推出的抽屉效果的控件(之前用的是slidingMenu),本次使用将结合Navigation实现左划菜单的效果.

Toolbar基本用法:

布局文件 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)这个方法,将会不起作用

定制主题风格: 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
复制代码

<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>
复制代码

``` * 这里需要注意的是```app:actionViewClass```属性是为了引用库内的图标 4. 效果

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

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"
复制代码

代码中使用

     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);
复制代码

菜单项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
复制代码

<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"/>
复制代码

``` 5. 效果

具体代码实现

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;
    }
}
复制代码