简单使用ToolBar+DrawerLayout

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

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

Toolbar基本用法:

  1. 布局文件 tool_bar.xml

    ```
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)这个方法,将会不起作用
  1. 定制主题风格:
    style.xml

    
    

    
    
```
menu.xml

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

app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
android:id="@+id/btn_share"
app:showAsAction="ifRoom"
android:title="@string/menu_search"
android:orderInCategory="90">








```

  • 这里需要注意的是app:actionViewClass属性是为了引用库内的图标
  1. 效果
Paste_Image.png

DrawerLayout的使用:

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

        
        

  • 这里需要注意的是三个属性(一个为左划菜单的菜单,一个为headView,最后一个为侧滑菜单方向选项"start","end"分别为左右划出)
 app:menu="@menu/menu_view"
 app:headerLayout="@layout/head_view"
android:layout_gravity="start"
  1. 代码中使用
     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);
  1. 菜单项menu_view.xml


    
        
        
        
        
    
```
4. 头布局head_view.xml

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">
android:layout_centerInParent="true"
android:layout_width="72dp"
android:layout_height="72dp"
android:src="@mipmap/ic_launcher"
android:id="@+id/head_image"/>


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)

你可能感兴趣的:(简单使用ToolBar+DrawerLayout)