NavigationView+Drawerlayout+Toolbar实现侧滑菜单

MaterialDesign使用 (二) Navigation的使用

使用Navigation+Drawerlayout+Toolbar实现简单侧滑菜单

先看效果图:

使用Tablayout,首先需要在项目中加入Design包

dependencies {
compile 'com.android.support:design:24.1.1'
}

因为要用到Toolbar所以首先把主题改为没有ActionBar的主题

我这里是使用的是这个主题:

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
</resources>

在activity_main.xml布局文件中

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="zhengliang.com.navigationview.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/colorPrimary"
app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="240dp"
android:layout_height="match_parent"
app:menu="@menu/navigation"
app:itemIconTint="@color/colorAccent"
android:layout_gravity="start"
app:headerLayout="@layout/header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

布局比较简单,因为这里主要是讲NavigationView的使用,所以后面只会讲到NavigationView的一些常用属性,其它不懂的地方自行百度.

从上面的效果图可以看出,侧滑部分由两部分组成: 上面的头像部分和下面的导航菜单部分

这两个部分分别对应一个Lyout布局文件, 和一个菜单menu文件

头部文件 header.xml

<?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="160dp"
android:orientation="vertical"
android:gravity="center"
android:background="@drawable/header_bg">

<ImageView
android:layout_width="72dp"
android:layout_height="72dp"
android:src="@mipmap/header"/>
<TextView
android:layout_marginTop="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:textColor="#FFF"
android:text="印象丶亮仔"/>
</LinearLayout>

记得在res/下创建一个menu目录然后在menu/navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:id="@+id/group1"
android:checkableBehavior="single">
<item
android:id="@+id/single_1"
android:icon="@mipmap/xiaoxi"
android:title="我的消息" />
<item
android:id="@+id/single_2"
android:icon="@mipmap/shangcheng"
android:title="积分商城" />
<item
android:id="@+id/single_3"
android:icon="@mipmap/huiyuan"
android:title="会员中心" />
<item
android:id="@+id/single_4"
android:icon="@mipmap/zaixian"
android:title="在线听歌" />
</group>
<item android:title="子菜单">
<menu>
<item
android:id="@+id/item_1"
android:icon="@mipmap/shiqu"
android:title="听歌识曲" />
<item
android:id="@+id/item_2"
android:icon="@mipmap/pifu"
android:title="主题皮肤" />
<item
android:id="@+id/item_3"
android:icon="@mipmap/yejian"
android:title="夜间模式" />
<item
android:id="@+id/item_4"
android:icon="@mipmap/dingshi"
android:title="定时停止播放" />
<item
android:id="@+id/item_5"
android:icon="@mipmap/naozhong"
android:title="音乐闹钟" />
<item
android:id="@+id/item_6"
android:icon="@mipmap/yun"
android:title="我的音乐云盘" />
<item
android:id="@+id/item_7"
android:icon="@mipmap/shiqu"
android:title="听歌识曲" />
<item
android:id="@+id/item_8"
android:icon="@mipmap/pifu"
android:title="主题皮肤" />
<item
android:id="@+id/item_9"
android:icon="@mipmap/yejian"
android:title="夜间模式" />
<item
android:id="@+id/item_10"
android:icon="@mipmap/dingshi"
android:title="定时停止播放" />
<item
android:id="@+id/item_11"
android:icon="@mipmap/naozhong"
android:title="音乐闹钟" />
<item
android:id="@+id/item_12"
android:icon="@mipmap/yun"
android:title="我的音乐云盘" />
</menu>
</item>
</menu>

这两个布局分别在NavigationView设置对应的属性时,将这两个布局加入进去:

app:menu="@menu/navigation"
app:headerLayout="@layout/header"

这里讲一下menu中的布局,navigation中的菜单可以用

<group>

来进行分组,分组之间会有一条分割线。

当的属性为:

android:checkableBehavior="single"

时,这个时候的菜单是单选菜单,并且会出现选中的效果

如图:

当需要嵌套多个子菜单时,可以在item中嵌套menu 比如上面的布局文件中的代码 最后的效果

如图:

当子菜单过多时,不必担心超出屏幕,因为当菜单超出屏幕后会自动出现滑动效果

下面直接看MainActivity.java中的代码:

public class MainActivity extends AppCompatActivity{
private android.support.v7.widget.Toolbar toolbar;
private android.support.design.widget.NavigationView navigationview;
private android.support.v4.widget.DrawerLayout drawerlayout;

/*创建一个Drawerlayout和Toolbar联动的开关*/
private ActionBarDrawerToggle toggle;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

/*初始化View*/
initViews();

/*隐藏滑动条*/
hideScrollBar();

/*设置ActionBar*/
setActionBar();

/*设置Drawerlayout开关*/
setDrawerToggle();

/*设置监听器*/
setListener();

}

/*初始化View*/
private void initViews() {
this.drawerlayout = (DrawerLayout) findViewById(R.id.drawer_layout);
this.navigationview = (NavigationView) findViewById(R.id.navigation_view);
this.toolbar = (Toolbar) findViewById(R.id.toolbar);
}

/*去掉navigation中的滑动条*/
private void hideScrollBar() {
navigationview.getChildAt(0).setVerticalScrollBarEnabled(false);
}

/*设置ActionBar*/
private void setActionBar() {
setSupportActionBar(toolbar);
/*显示Home图标*/
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

/*设置Drawerlayout的开关,并且和Home图标联动*/
private void setDrawerToggle() {
toggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar, 0, 0);
drawerlayout.addDrawerListener(toggle);
/*同步drawerlayout的状态*/
toggle.syncState();
}

/*设置监听器*/
private void setListener() {
navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.item_1:
break;
case R.id.item_2:
break;
case R.id.item_3:
break;
case R.id.item_4:
finish();
break;
}
drawerlayout.closeDrawer(GravityCompat.START);
return true;
}
});
}
}

代码中的注释写的很明确,就不做过多的解释了。 不过要注意一点:在给drawerlayout添加 toggle 开关监听时一定要先设置ActionBar,也就是说

drawerlayout.addDrawerListener(toggle);

一定要写在

setSupportActionBar(toolbar);

前面,不然当点击Toolbar上的Home图标不会产生相应的打开和关闭侧滑事件。

到了这里就用Navigation实现了一个简单的侧滑菜单了。不过要让侧滑菜单更加美观还需要设置几个属性,让我们回到上面的activity_main.xml中

还是把具体代码拿下来吧:

<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/header"
app:itemIconTint="@color/colorAccent"
app:menu="@menu/navigation"/>

app:headerLayout="@layout/header"

app:menu="@menu/navigation"

app:itemIconTint="@color/colorAccent"

android:scrollbars="none"

navigationview.getChildAt(0).setVerticalScrollBarEnabled(false);

好了到此结束,更多细节的东西需要慢慢研究!