MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏

来源：互联网发布：淘宝店铺复制免费编辑：程序博客网时间：2024/05/30 05:07

本文将介绍使用Google最新推出规范式设计中的NavigationView和DrawerLayout结合实现侧滑菜单栏效果，NavigationView是android-support-design包下的一个控件，该包下还有AppBarLayout、CoordinatorLayout、FloatingActionButton、SnackBar、TabLayout、TextInputLayout等控件，也是Google在Android 5.x推荐规范式使用的控件。本系列将逐一介绍每个控件的使用。。。

好了，先来看看本文最终的效果图吧！

它把标题栏也遮住了，正是符号Google的材料设计思想。。。

现在我们分几步说说怎么实现这个效果吧：

一、首先就需要添加包依赖，废话就不说了，上图

二、主布局：activity_main.xml

<android.support.v4.widget.DrawerLayout 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"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context=".MainActivity">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="#30469b"/>        <!--内容显示布局-->        <FrameLayout            android:id="@+id/frame_content"            android:layout_width="match_parent"            android:layout_height="match_parent"/>    </LinearLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigation_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="left"        app:headerLayout="@layout/navigation_header"        app:menu="@menu/drawer" /></android.support.v4.widget.DrawerLayout>

其中在NavigationView布局中，需要给NavigationView设置app:headerLayout和app:menu,那是什么意思呢？

headerLayout就是给导航栏增加一个头部Layout。

menu就是对应菜单项的选择条目。

三、分别写headerLayout和menu对应的布局navigation_header.xml和菜单drawer.xml文件

navigation_header.xml

view sourceprint?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#30469b">
<TextView
android:id="@+id/header_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="HeaderLayout"
android:textColor="#ffffff"
android:textSize="25sp" />
</RelativeLayout>

drawer.xml

view sourceprint?
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/item_one"
android:icon="@mipmap/icon"
android:title="我的动态"></item>
<item
android:id="@+id/item_two"
android:icon="@mipmap/icon"
android:title="我的留言"></item>
<item
android:id="@+id/item_three"
android:icon="@mipmap/icon"
android:title="附近的人"></item>
</group>
</menu>

四、这时候开始写代码了，也很简单：

MainActivity:

import android.graphics.Color;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.v4.app.ActionBarDrawerToggle;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.ActionBarActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;public class MainActivity extends ActionBarActivity {    private  DrawerLayout mDrawerLayout =null;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //设置ToolBar        final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);//        mToolbar.setTitleTextColor(Color.WHITE);        setSupportActionBar(mToolbar);        //这里是动态的在action bar上添加图标        final ActionBar ab = getSupportActionBar();        ab.setHomeAsUpIndicator(R.drawable.ic_menu);        ab.setDisplayHomeAsUpEnabled(true);        //设置抽屉DrawerLayout        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);//        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_launcher,//                R.string.drawer_open, R.string.drawer_close);//        mDrawerToggle.syncState();//初始化状态//        mDrawerLayout.setDrawerListener(mDrawerToggle);        //设置导航栏NavigationView的点击事件        NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem menuItem) {                switch (menuItem.getItemId()) {                    case R.id.item_one:                        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentOne()).commit();                        mToolbar.setTitle("我的动态");                        break;                    case R.id.item_two:                        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentTwo()).commit();                        mToolbar.setTitle("我的留言");                        break;                    case R.id.item_three:                        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentThree()).commit();                        mToolbar.setTitle("附近的人");                        break;                }                menuItem.setChecked(true);//点击了把它设为选中状态                mDrawerLayout.closeDrawers();//关闭抽屉                return true;            }        });    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        if (item.getItemId() == android.R.id.home) {            mDrawerLayout.openDrawer(GravityCompat.START);            return true;        }        return super.onOptionsItemSelected(item);    }}

小结：这里的DrawerLayout的布局是很重要的它的层次一次是标题栏主屏幕内容（fragment）侧边栏内容，层次比较清晰，要在哪里填充数据就在相应的地方写代码.这里写的参考的zhanghongyang的博客，补充了三个fragment.

源码地址：http://download.csdn.net/detail/qq_26296197/9494419

在这也可以参考zhanghongyang的博客 http://blog.csdn.net/lmj623565791/article/details/46405409，写的也很好。

0 0