您的位置:首页 > 其它

Material Design学习之NavigationView实现侧滑菜单栏

2016-03-06 00:21 330 查看

Material Design学习之NavigationView实现侧滑菜单栏

接触Material Design已经有一段时间了,但是实际的项目中用到的并不多,平时也没什么时间来仔细研究一下,今天来带大家来看一下Material Design 怎么用NavigationView来实现侧滑菜单栏,大家以前可能大多都在用第三方的SlideMenu库来实现侧滑菜单,现在来看看NavigationView是怎么实现的吧
1.NavigationView是android-support-design包下的一个控件,所以我要如果要使用这个控件,就必须在as的gradle中添加依赖:

2.NavigationView的父类容器是DrawrLayout,见下图:

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.wangchang.testnavigationview.MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容区域" />
</LinearLayout>

<android.support.design.widget.NavigationView
android:id="@+id/navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
app:headerLayout="@layout/header"
app:menu="@menu/menu" />

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

app:headerlayout指向的是侧滑菜单头部布局文件

<?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="match_parent"
android:orientation="vertical"
android:background="#700000ff">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户头像"/>

</LinearLayout>


app:menu指向的是侧滑菜单选择条目的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/item1"
android:icon="@mipmap/ic_launcher"
android:title="条目1"></item>
<item
android:id="@+id/item2"
android:icon="@mipmap/ic_launcher"
android:title="条目2"></item>
<item
android:id="@+id/item3"
android:icon="@mipmap/ic_launcher"
android:title="条目3"></item>
</group>
</menu>

实现效果:

这样就可以随意滑动了
3侧滑菜单的点击事件

final DrawerLayout drawerlayout = (DrawerLayout) findViewById(R.id.drawerlayout);
NavigationView navigationview = (NavigationView) findViewById(R.id.navigationview);
navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.item1:
Toast.makeText(MainActivity.this, "item1", Toast.LENGTH_SHORT).show();
break;
case R.id.item2:
Toast.makeText(MainActivity.this, "item2", Toast.LENGTH_SHORT).show();
break;
case R.id.item3:
Toast.makeText(MainActivity.this, "item3", Toast.LENGTH_SHORT).show();
break;

}
item.setChecked(true);
drawerlayout.closeDrawers();//关闭抽屉
return true;
}
});

好啦,整个过程看着很简单,但想要尝试的兄弟们呢还是要动手敲一下滴,毕竟看花容易绣花难嘛,我也是参考了网上的资料,实地测试的哟,嗯就这样,晚安!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: