介绍
抽屉导航（Navigation Drawer） 是安卓中非常有名的一种设计模式（这不是java中的设计模式哈）。它是一个从屏幕左侧边缘滑出的一个显示app主菜单的面板。有时候它是从右侧滑入的，不过，除非你有充分的理由，否则别那么做，那是一种愚蠢的设计。
Navigation Drawer这种设计的相关文档非常丰富（不管是设计方面的还是编程方面的）。如果你想深入了解设计准则只需查看Navigation Drawer 设计准则，我们今天也不会谈论太多关于如何实现Drawer的事情，相反，我推荐你直接阅读官方文档 创建一个Navigation Drawer。
在本篇文章中，不是拷贝官方文档，而是准备一个DrawerLayoutInstaller – 一个帮助我们配置并将DrawerLayout注入到Activity中的工具，可以省去每次都要弄繁琐的xml文件。
实现Navigation Drawer
准备
Before we start, let’s make some preparation by adding resources, and less meaning boilerplate.
在我们开始之前，让我们先做一些资源文件上的准备
首先添加app的menu中需要用到的所有icon：
每一个都长得像概念视频中的样子，但其实他们都是从谷歌的Material 设计图标 中获取的。
我们的菜单是基于ListView实现的，因此我们需要为list的item准备好布局。下面是三种不同的布局：
- 带有用户头像与昵称的头部
- 菜单按钮
- 分割线(用在菜单按钮之间)
|
1 2 3 4 5 6 7 8 9 10 |
<?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="wrap_content"> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#dddddd" /> </FrameLayout> |
这里是 带有所有新源码的一个完整提交。
GlobalMenuView
现在我们来为全局菜单准备布局。总的来说他就是个简单的ListView，我们本可以把它放在xml中，但是考虑到我们希望将这个view注入（嵌入）到更多的Activity中，还是用纯代码更好些。
这个View的需求很简单 – 只要显示菜单项与用户的简单介绍就可以了。因此实现并不是太复杂：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
public class GlobalMenuView extends ListView implements View.OnClickListener { private OnHeaderClickListener onHeaderClickListener; private GlobalMenuAdapter globalMenuAdapter; private ImageView ivUserProfilePhoto; private int avatarSize; private String profilePhoto; public GlobalMenuView(Context context) { super(context); init(); } private void init() { setChoiceMode(CHOICE_MODE_SINGLE); setDivider(getResources().getDrawable(android.R.color.transparent)); setDividerHeight(0); setBackgroundColor(Color.WHITE); setupHeader(); setupAdapter(); } private void setupAdapter() { globalMenuAdapter = new GlobalMenuAdapter(getContext()); setAdapter(globalMenuAdapter); } private void setupHeader() { this.avatarSize = getResources().getDimensionPixelSize(R.dimen.global_menu_avatar_size); this.profilePhoto = getResources().getString(R.string.user_profile_photo); setHeaderDividersEnabled(true); View vHeader = LayoutInflater.from(getContext()).inflate(R.layout.view_global_menu_header, null); ivUserProfilePhoto = (ImageView) vHeader.findViewById(R.id.ivUserProfilePhoto); Picasso.with(getContext()) .load(profilePhoto) .placeholder(R.drawable.img_circle_placeholder) .resize(avatarSize, avatarSize) .centerCrop() .transform(new CircleTransformation()) .into(ivUserProfilePhotoransformation()) .into(ivUserProfilePhotoާ边缘滑出的一个显示app主菜单的面板。有时候它是从右侧滑入的，不过，除非你有充分的理由，否则别那么做，那是一种愚蠢的设计。
Navigation Drawer这种设计的相关文档非常丰富（不管是设计方面的还是编程方面的）。如果你想深入了解设计准则只需查看Navigation Drawer 设计准则，我们今天也不会谈论太多关于如何实现Drawer的事情，相反，我推荐你直接阅读官方文档 创建一个Navigation Drawer。 在本篇文章中，不是拷贝官方文档，而是准备一个DrawerLayoutInstaller – 一个帮助我们配置并将DrawerLayout注入到Activity中的工具，可以省去每次都要弄繁琐的xml文件。 实现Navigation Drawer准备Before we start, let’s make some preparation by adding resources, and less meaning boilerplate. 在我们开始之前，让我们先做一些资源文件上的准备 首先添加app的menu中需要用到的所有icon：
每一个都长得像概念视频中的样子，但其实他们都是从谷歌的Material 设计图标 中获取的。 我们的菜单是基于ListView实现的，因此我们需要为list的item准备好布局。下面是三种不同的布局：
这里是 带有所有新源码的一个完整提交。 GlobalMenuView现在我们来为全局菜单准备布局。总的来说他就是个简单的ListView，我们本可以把它放在xml中，但是考虑到我们希望将这个view注入（嵌入）到更多的Activity中，还是用纯代码更好些。 这个View的需求很简单 – 只要显示菜单项与用户的简单介绍就可以了。因此实现并不是太复杂：
|
