这篇文章还是比较详细的基础的介绍了新控件的使用:
http://www.360doc.com/content/16/0715/15/7044580_575728955.shtml
有些时候我们没有必要自己造轮子、合理利用别人的轮子也是很好的;
下面的这个更加详细:NavigationView,导航View。一般我们用它和DrawerLayout实现抽屉式导航设计,效果如下图。
学习
文档地址:http://developer.android.com/reference/android/support/design/widget/NavigationView.html
通过学习官方文档,我们知道NavigationView继承自FrameLayout。一般用于应用的导航菜单,菜单的内容来自于menu文件。NavigationView通常放置在DrawerLayout内部。
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- Your contents --> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/my_navigation_items" app:headerLayout="@layout/nav_header_main" /> </android.support.v4.widget.DrawerLayout>
其中:
- android:fitsSystemWindows的值用于设置状态栏透明化与否。
- android:layout_gravity可设置抽屉,也就是NavigationView从左边或是右边打开。
- app:menu用于设置菜单内容的xml布局。
- app:headerLayout用于设置NavigationView的HeaderView的xml布局文件。
用法
下面我们通过模仿实现上图的效果来学习NavigationView的基本用法。
-
引用SupportDesign库
compile 'com.android.support:design:23.1.1'
2.编写布局代码
首先编写Activity的布局代码:
<?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:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <!-- 内容布局 --> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- 菜单布局NavigationView headerLayout设置HeaderView menu设置菜单 --> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" /> </android.support.v4.widget.DrawerLayout>
编写NavigationView中的menu的xml文件
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="none"> <item android:id="@+id/nav_me" android:title="我" android:icon="@mipmap/ic_mine_gray_24"/> <item android:id="@+id/nav_friend" android:title="好友" android:icon="@mipmap/ic_friends_gray_24"/> <item android:id="@+id/nav_notification" android:title="通知" android:icon="@mipmap/ic_notification_gray_24"/> <item android:id="@+id/nav_message" android:title="私信" android:icon="@mipmap/ic_messages_gray_24" /> </group> <group android:checkableBehavior="none" android:id="@+id/group_manage"> <item android:id="@+id/nav_manage" android:title="应用管理" android:icon="@mipmap/ic_app_management_gray_24"/> </group> <group android:checkableBehavior="none" android:id="@+id/group_settings"> <item android:id="@+id/nav_theme" android:title="主题风格"/> <item android:id="@+id/nav_night" android:title="夜间模式"/> <item android:id="@+id/nav_setting" android:title="设置"/> <item android:id="@+id/nav_suggestion" android:title="意见反馈"/> <item android:id="@+id/nav_about" android:title="关于"/> </group> </menu>
注意: 需要给group设置id,才会出现分割线。参考http://stackoverflow.com/questions/30625280/how-to-create-a-simple-divider-in-the-new-navigationview
3.实现onNavigationItemSelected接口来处理抽屉菜单项的选中事件。
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
mTextView = (TextView) findViewById(R.id.textView);
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
int id = item.getItemId();
String string = null;
switch (id){
case R.id.nav_me:
string = "我";
break;
case R.id.nav_about:
string = "关于";
break;
case R.id.nav_friend:
string = "好友";
break;
case R.id.nav_manage:
string = "通知";
break;
case R.id.nav_message:
string = "私信";
break;
case R.id.nav_night:
string = "夜间模式";
break;
case R.id.nav_notification:
string = "通知";
break;
case R.id.nav_setting:
string= "设置";
break;
case R.id.nav_suggestion:
string = "意见反馈";
break;
case R.id.nav_theme:
string = "主题风格";
break;
}
if (!TextUtils.isEmpty(string))
mTextView.setText("你点击了"+string);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
运行效果
完整代码我已经上传到我的Github中,欢迎各位star&fork。
地址https://github.com/JohnTsaiAndroid/NavigationViewDemo
如果你觉得这篇文章对你的学习有所帮助,不妨推荐一下,也可以关注我的Githubhttps://github.com/JohnTsaiAndroid