Android使用DrawerLayout和ToolBar实现仿知乎侧滑菜单

侧滑菜单现在在很多app上都可以看到，以下文章主要讲如何实现实现Android的侧滑菜单。可以先看一个简单的侧滑菜单设计。
示例图：

从屏幕左端向右滑动或点击左上角按钮可打开侧滑栏菜单。

具体实现

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout  android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/myDrawer" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" >    <LinearLayout  android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:id="@+id/hideLayout" >        <!-- 顶部栏 -->        <android.support.v7.widget.Toolbar  android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:minHeight="?attr/actionBarSize" android:fitsSystemWindows="true" android:id="@+id/mToolBar" android:popupTheme="@style/Widget.AppCompat.ActionBar" app:theme="@style/Widget.AppCompat.Light.ActionBar" >        </android.support.v7.widget.Toolbar>        <!-- 用于加载导航栏的容器 -->        <FrameLayout  android:layout_width="match_parent" android:id="@+id/frame" android:layout_height="match_parent">        </FrameLayout>    </LinearLayout>    <!-- 导航栏的设置 此处可设置导航栏头部布局及菜单布局-->    <android.support.design.widget.NavigationView  android:id="@+id/nav" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="#ffffff" app:headerLayout="@layout/header" app:menu="@menu/nav_menu" android:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

紧接着要添加菜单，在menu文件夹下新建xml文件
nav_menu.xml

<?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/item1" android:icon="@drawable/smile" android:title="item1" >        </item>        <item android:id="@+id/item2" android:icon="@drawable/sorry" android:title="item2" >        </item>        <item android:id="@+id/item3" android:icon="@drawable/oh_boy" android:title="item3" >        </item>        <item android:id="@+id/item4" android:icon="@drawable/joy" android:title="item4" >        </item>        <item android:id="@+id/item5" android:icon="@drawable/now_what" android:title="item5" >        </item>    </group></menu>

还有头部的布局，即上图哆啦A梦处
header.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:background="#c40606" android:layout_height="match_parent">    <LinearLayout  android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" >        <ImageView  android:layout_width="150dp" android:layout_height="150dp" android:src="@drawable/doraemon" android:layout_marginBottom="20dp" />        <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_paddingLeft="20dp" android:text="乐观的蓝胖子" android:textSize="20sp" />    </LinearLayout></LinearLayout>

此外需要注意的是，使用toolbar时需要把系统的ActionBar去掉，方法是修改style.xml文件中的主题设置
style.xml

<resources>    <!-- 改为没有ActionBar的主题 Theme.AppCompat.Light.NoActionBar -->    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>        <!-- 这里设置左上角可点击展开的小图标 -->        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>    </style>    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">        <item name="color">@android:color/white</item>    </style>    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /></resources>

完成上述步骤后即可设置其操作，在MainActivity中写入如下代码：

        mToolBar = (Toolbar) findViewById(R.id.mToolBar); //ToolBar        mDrawer = (DrawerLayout) findViewById(R.id.myDrawer); //DrawerLayout        navigationView = (NavigationView) findViewById(R.id.nav); //NavigationView导航栏        mToolBar.setTitle("首页");        mToolBar.setTitleTextColor(Color.parseColor("#FFFFFF"));        setSupportActionBar(mToolBar);        //设置左上角的图标响应        getSupportActionBar().setHomeButtonEnabled(true);         getSupportActionBar().setDisplayHomeAsUpEnabled(true);        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawer, mToolBar, 0, 0) {            @Override            public void onDrawerClosed(View drawerView) {                super.onDrawerClosed(drawerView);            }            @Override            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(drawerView);            }        };        mDrawerToggle.syncState();        mDrawer.setDrawerListener(mDrawerToggle); //设置侧滑监听

问题总结

1.为什么会出现侧滑菜单无法覆盖ToolBar?
当需要侧滑菜单覆盖ToolBar时，必须把DrawerLayout作为根布局。而不是LinearLayout或其他。
2.为什么没有在编写导航栏时没有android.support.design.widget.NavigationView？
右键项目==>open module setting==>Dependencies==>添加库com.android.support:design:23.1.1

具体实现

问题总结

更多相关文章

随机推荐