Android 抽屉侧滑菜单 DrawerLayout+NavigationView+ToolBar

效果图

当然只是一个简单的demo

接下来就是主界面布局了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.appnews.activity.MainActivity">
    <include
        layout="@layout/toolbar_layout"
        />
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="50dp">

            </android.support.design.widget.TabLayout>
            <android.support.v4.view.ViewPager
                android:id="@+id/vp"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">

            </android.support.v4.view.ViewPager>
        </LinearLayout>
        <android.support.design.widget.NavigationView
            android:id="@+id/nav"
            android:layout_width="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/nav_menu"
            app:headerLayout="@layout/nav_header_layout"
            android:layout_height="match_parent">

        </android.support.design.widget.NavigationView>

    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

可以看到，这里使用了Drawerlayout，LinearLayout的内容为主页面内容，通过android:layout_gravity属性来确定菜单的位置其中对应的值：

android:layout_gravity="start"
android:layout_gravity="left"

都代表左侧菜单，反之end和right代表右侧菜单
在Drawerlayout上面使用了一个ToolBar控件，使用include标签添加布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.Toolbar>
</LinearLayout>

其中theme属性使用了高亮白色。当然有关toolbar的使用，大家可以查看其它相关资料
在主界面的布局中，我们使用了NavigationView作为左侧菜单界面，在NavigationView中可以添加一个Menu和一个头布局，通过属性：

 app:menu="@menu/nav_menu"
 app:headerLayout="@layout/nav_header_layout"

nav_menu中的布局：

<?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/news"
            android:icon="@mipmap/news"
            android:title="新闻"
            />
        <item
            android:id="@+id/collect"
            android:icon="@mipmap/collect"
            android:title="收藏"
            />
        <item
            android:id="@+id/followup"
            android:icon="@mipmap/followup"
            android:title="跟帖"
            />
        <item
            android:id="@+id/local"
            android:icon="@mipmap/local"
            android:title="本地"
            />
        <item
            android:id="@+id/image"
            android:icon="@mipmap/image"
            android:title="图片"
            />

    </group>
</menu>

android:checkableBehavior=”single”此属性代表一次只能选择一个。
nav_header_layout中的布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@drawable/shape_nav_bg"
   >
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_gravity="center"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:src="@color/white"
        />
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/user"
        />
    <TextView
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="@color/white"
        android:text="点击登录"
        />

</FrameLayout>

布局中的圆需要添加依赖

compile 'de.hdodenhof:circleimageview:2.1.0'

主界面代码

public class MainActivity extends AppCompatActivity {

    Button bt_open;
    DrawerLayout drawer;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
    }
}
 private void initEvent() {
        title="新闻";
        //将toolbar代替actionbar
        setSupportActionBar(toolbar);
        final ActionBar actionBar = getSupportActionBar();
        //显示home，返回箭头
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setTitle("新闻");
        ActionBarDrawerToggle drawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,
               R.string.open_drawer,R.string.close_drawer){
            @Override
            public void onDrawerOpened(View drawerView) {
               actionBar.setTitle("菜单");
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                actionBar.setTitle(title);
            }
        };
        //不显示箭头，显示三条横线
        drawerToggle.syncState();
        //设置打开关闭的监听
        drawerLayout.addDrawerListener(drawerToggle);
        //侧滑菜单，默认选中新闻
        nav.getMenu().getItem(0).setChecked(true);
        //设置菜单item选中监听
        nav.setNavigationItemSelectedListener(navigationItemSelectedLsitener);
    }
    NavigationView.OnNavigationItemSelectedListener navigationItemSelectedLsitener=new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            switch (item.getItemId()){
                case R.id.news:
                    title="新闻";
                    //关闭左侧菜单
                    drawerLayout.closeDrawer(Gravity.START);
                    break;
                case R.id.collect:
                    title="收藏";
                    drawerLayout.closeDrawer(Gravity.START);
                    break;
                case R.id.followup:

                    break;
                case R.id.local:

                    break;
                case R.id.image:

                    break;
            }
            return true;
        }
    };

代码有点多，通过ActionBarDrawerToggle的对象来设置drawerLayout的监听，可以重写一些方法。drawerToggle.syncState()显示三条横线，避免显示的只有箭头。NavigationView也有自己的Item选择监听。
其中关于TabLayout+ViewPager+Fragment,可以查看上一个博客。