Android Design Support Library——Navigation View

时间:2022-08-12 00:29:50

前沿

  Android 从5.0开始引入了Material design元素的设计,这种新的设计语言让整个安卓的用户体验焕然一新,google在Android Design Support Library中封装了一些重要的material design控件,在这之前其实github上也已经出现了许多各种各样的material design 控件,只不过现在google把有些控件标准化了,注意这个Android Design Support Library和Android Support Library是有区别的,Android Support Library 只是支持了一些基本控件的封装,而Android Design Support Library主要是一些Material design特效的实现,Android Design Support Library包括以下八种控件:

  Navigation View——抽屉导航

  TextInputLayout——EditText悬浮标签

  Floating Action Button——悬浮操作按钮

  Snackbar——提示(类似Toast)

  TabLayout——选项卡

  CoordinatorLayout——滚动控制

  CollapsingToolbarLayout——可折叠的Toolbar(Google+、photos中的效果)

  AppBarLayout——容器AppBar

  本文分章对以上控件主要做使用方式介绍,暂不分析源码。首先看Navigation View

  Navigation View——抽屉导航

  非常实用的一种抽屉导航效果,支持直接通过菜单资源文件直接生成导航标签,实现起来也非常简单,效果如下图所示:

  Android Design Support Library——Navigation View

  使用步骤:

  (1)app的build.gradle中引入design包本文design包版本以23.1.1为例

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

  (2)xml布局文件(activity_main.xml)和SlideMenu一样需要使用到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"> <include layout="@layout/include_list_viewpager" /><!-- 展示内容区域的布局--> <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"
app:menu="@menu/drawer_view" /> </android.support.v4.widget.DrawerLayout>

  两个重要的属性

  app:headerLayout ——导航头布局
  app:menu——导航菜单布局

  layout_gravity——用来控制左滑和右滑的,start左滑,end右滑,其实这个是跟DrawerLayout有关的,具体可参考DrawerLayout的使用。

  nav_header.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="?attr/colorPrimaryDark"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Username"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout>

  drawer_view.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/nav_home"
android:icon="@drawable/ic_dashboard"
android:title="Home" />
<item
android:id="@+id/nav_messages"
android:icon="@drawable/ic_event"
android:title="Messages" />
<item
android:id="@+id/nav_friends"
android:icon="@drawable/ic_headset"
android:title="Friends" />
<item
android:id="@+id/nav_discussion"
android:icon="@drawable/ic_forum"
android:title="Discussion" />
</group> <item android:title="Sub items">
<menu>
<item
android:icon="@drawable/ic_dashboard"
android:title="Sub item 1" />
<item
android:icon="@drawable/ic_forum"
android:title="Sub item 2" />
</menu>
</item> </menu>

  (2)在代码中声明使用

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
if (navigationView != null) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
mDrawerLayout.closeDrawers();
return true;
}
});
}

  在onNavigationItemSelected()方法中就可以获取导航菜单中的每个Item进而实现相应的功能了。

  扩展:如果你想让你的导航菜单在status bar 上也显示需要进行如下设置主要针对5.0及以上版本

  ../valuse-v21/styles.xml

<resources>

    <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style> </resources>

  同时在DrawerLayout中加入如下属性

android:fitsSystemWindows="true"

  如果你感觉Navigation View还不够强大,可以看看MaterialDrawer,连接如下:https://github.com/mikepenz/MaterialDrawer