Android Design Support Library 的 代码实验——几行代码，让你的 APP 变得花俏

只用了几行代码，就让 App Bar 变得这么漂亮了 =)

步骤13：玩转 Navigation Drawer

现在从左侧拉出 Drawer Menu 仍然只是一个空白的面板。在以前，实现这个菜单是非常麻烦的，因为我们不得不手动的用 LinearLayout 或者 ListView 去实现。

在 Android Design Support Library 中提供了 NavigationView，实现它变得更容易了，它为我们节省了15.84321倍的时间！

首先，为 Drawer Menu 创建一个标题视频布局文件。（它已经在 Github的项目中了）

res/layout/nav_header.xml

<?xml version="1.0" encoding="utf-8"?>  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="192dp"      android:theme="@style/ThemeOverlay.AppCompat.Dark">      <ImageView          android:layout_width="match_parent"          android:layout_height="match_parent"          android:src="@drawable/nav_header_bg"          android:scaleType="centerCrop" />      <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:src="@drawable/nuuneoi"          android:layout_gravity="bottom"          android:layout_marginBottom="36dp" />      <TextView          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:layout_gravity="bottom"          android:layout_margin="16dp"          android:text="nuuneoi"          android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>  </FrameLayout>

现在创建一个菜单资源文件

res/menu/navigation_drawer_items.xml

<?xml version="1.0" encoding="utf-8"?>  <menu xmlns:android="http://schemas.android.com/apk/res/android">      <group android:checkableBehavior="all">          <item              android:id="@+id/navItem1"              android:icon="@drawable/ic_action_location_found_dark"              android:title="Home"/>          <item              android:id="@+id/navItem2"              android:icon="@drawable/ic_action_location_found_dark"              android:title="Blog"/>          <item              android:id="@+id/navItem3"              android:icon="@drawable/ic_action_location_found_dark"              android:title="About"/>          <item              android:id="@+id/navItem4"              android:icon="@drawable/ic_action_location_found_dark"              android:title="Contact"/>      </group>  </menu>

NavigationView与两个资源文件绑定起来，作为 Drawer Menu 的菜单区域，用下面的代码来替换一个已经存在的 白色的 LinearLayout ：

        ...      </android.support.design.widget.CoordinatorLayout>      <android.support.design.widget.NavigationView          android:id="@+id/navigation"          android:layout_width="wrap_content"          android:layout_height="match_parent"          android:layout_gravity="start"          app:headerLayout="@layout/nav_header"          app:itemIconTint="#333"          app:itemTextColor="#333"          app:menu="@menu/navigation_drawer_items" />  </android.support.v4.widget.DrawerLayout>

现在：召唤 Drawer Menu！哇喔，哇喔

21

</div>

NavigationView 就是为了 Drawer Menu 而特别设计的。所以，所有的东西都会被创建并且自动测量包括菜单的宽度等，我们自己定义案例来配置以前的设计。

为了处理这些菜单项的点击事件，你可以声明setNavigationItemSelectedListener来监听，就像下面这样：

NavigationView navigation;  private void initInstances() {      ...      navigation = (NavigationView) findViewById(R.id.navigation);      navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {          @Override          public boolean onNavigationItemSelected(MenuItem menuItem) {              int id = menuItem.getItemId();              switch (id) {                  case R.id.navItem1:                      break;                  case R.id.navItem2:                      break;                  case R.id.navItem3:                      break;              }              return false;          }      });  }

在实际使用中，请随意的区声明你想要定义的 header view 和修改菜单项。

步骤14：用上 TextInputLayout 让 EditText 变的更风骚

这是 Codelab 的最后一部分了。你可以改变一个旧的 EditText 的风格，让它变得更时髦，即：总是会显示一个提示或者一个错误信息。

要做到这一点，只需要简单的用 TextInputLayout 包裹住一个 EditText ，就这么简单！

<android.support.design.widget.TextInputLayout      android:layout_width="match_parent"      android:layout_height="wrap_content">      <EditText          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:hint="Username" />  </android.support.design.widget.TextInputLayout>

把这两个控件放到 NestedScrollView 里看下结果。

22

</div>

难以置信的容易吧？=)

结论

Android Design Support Library 是非常有前途的支持库，它非常值得在你的产品上使用。虽然它仍然包含了很多错误，我建议你再等等，直到每个错误都被修复。

这么长的教程，希望希望你觉得它有用 =)

`

p11

</div>
Author: nuuneoi (Android GDE, CTO & CEO at The Cheese Factory)
A full-stack developer with more than 6 years experience on Android Application Development and more than 12 years in Mobile Application Development industry. Also has skill in Infrastucture, Service Side, Design, UI&UX, Hardware, Optimization, Cooking, Photographing, Blogging, Training, Public Speaking and do love to share things to people in the world!

相关经验

•  Android Design Support Library 的 代码实验——几行代码，让你的 APP 变得花俏
•  Android Design Support Library 使用
•  Android Design Support Library概览
•  当InstaMaterial遇到Design Support Library