你的位置:首页 > 操作系统

[操作系统]Android Design Support Library——Navigation View


前沿

  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——抽屉导航

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

  

  使用步骤:

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

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

  (2)

<android.support.v4.widget.DrawerLayout ="http://schemas.android.com/apk/res/android"  ="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.

<LinearLayout ="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.

<??><menu ="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.

<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