开源中国客户端侧滑菜单效果实现

这篇文章将记录一些关于DrawerLayout的基本用法,我想关于DrawerLayout的用法也许有不少不够了解,这也是比较正常的事情,因为DrawerLayout作为Android组件是Google后来在android中添加的,在android.support.v4包下。

这里用开源中国手机客户端的截图来说明一下,这个DrawerLayout抽屉式布局是什么样子的。

好,大家已经看到了,当我们手指在屏幕左侧向右滑动时候,就会有一个抽屉式的菜单从左边弹出,并且是“悬浮”在主界面之上的,合理的利用了设备上有限的空间,同样手指在屏幕右侧向左滑动也会出现一个向左弹出的抽屉式菜单,用户体验效果还是不错的,在DrawerLayout出现之前,我们需要做侧滑菜单时,不得不自己实现一个或者使用Github上的开源的项目SlidingMenu,也许是Google也看到了SlidingMenu的强大之处,于是在Android的后期版本中添加了DrawerLayout来实现SlidingMenu同样功能的组件,而且为了兼容早期版本,将其添加在android,support.v4包下。

效果预览

创建抽屉布局

下面这个抽屉布局引用的是android.support.v4.DrawerLayout,类似于LineaLayout、RelativeLayout等布局一样定义,在DrawerLayout内部再定义3个布局,分别是管理主界面的FrameLayout,此布局用来展示界面切换的Fragment,下面是ListView,用来展示菜单列表,最后是一个RelativeLayout,用来展示右边的布局,布局代码如下:

<android.support.v4.widget.DrawerLayout xmlns:android=""android:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent" ><FrameLayoutandroid:id="@+id/content_frame"android:layout_width="match_parent"android:layout_height="match_parent" /><ListViewandroid:id="@+id/left_drawer"android:layout_width="200dp"android:layout_height="match_parent"android:layout_gravity="start"android:background="#111"android:choiceMode="singleChoice"android:divider="@android:color/transparent"android:dividerHeight="0dp" /><RelativeLayoutandroid:id="@+id/right_drawer"android:layout_width="220dp"android:layout_height="match_parent"android:layout_gravity="end"android:background="#111"android:gravity="center_horizontal" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这是右边栏"android:textColor="@android:color/white"android:textSize="24sp" /></RelativeLayout></android.support.v4.widget.DrawerLayout>

这个布局文件示范了一些重要的布局特征.

主要内容的视图(FrameLayout)必须是DrawLayout的第一个子元素, 因为导航抽屉是在主要内容视图的上面.

主要内容视图设置为匹配父视图的宽度和高度, 因为它代表了整个界面导航抽屉是隐藏的.

抽屉视图(ListView)必须指定其水平重力与android:layout_gravity属性。支持从右到左(RTL)语言,指定值与 "start" 代替 "left"(所以抽屉里出现在布局的右侧当布局是RTL时).这里将ListView设置为左边栏菜单,所以android:layout_gravity属性设置为“start”,将RelativeLayout设置为右边栏,设置android:layout_gravity属性为“end”.

抽屉视图指定其宽度用dp单位和高度匹配父视图。抽屉里的宽度不能超过320 dp, 所以用户总是可以看到主要内容视图的一部分。

初始化抽屉列表

正如上述所讲,因为DrawerLayout里包含一个ListView作为左边栏侧滑菜单,,所以我们需要首先初始化这个抽屉列表,并且为这个列表适配上数据,数据适配器使用的是最简单的ArrayAdapter,模拟数据被简单的定义在res/values/strings.xml里,如下:

<string-array name="menu_array"><item>Menu 1</item><item>Menu 2</item><item>Menu 3</item><item>Menu 4</item> </string-array>

在Java代码中,首先创建一个MainActivity继承了android.support.v4.app.FragmentActivity,因为后续中需要进行Fragment之间的切换。

protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);……// 初始化菜单列表mMenuTitles = getResources().getStringArray(R.array.menu_array);mMenuListView.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mMenuTitles));mMenuListView.setOnItemClickListener(new DrawerItemClickListener());…… } 处理导航点击事件

当用户选择了抽屉列表里面的一个Item时, 系统调用onItemClickListener上的onItemClick(), 给setOnItemClickListener()你在onItemClick()方法里面做什么,在下面的例子中, 选择每一个Item都会在主要内容的布局中插入一个不同的Fragment.并且将导航列表的内容传递给Fragment中显示出来,下面是部分代码:

/*** ListView上的Item点击事件**/ private class DrawerItemClickListener implements ListView.OnItemClickListener {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {selectItem(position);} }/*** 切换主视图区域的Fragment** @param position*/ private void selectItem(int position) {// TODO Auto-generated method stubFragment fragment = new ContentFragment();Bundle args = new Bundle();switch (position) {case 0:args.putString("key", mMenuTitles[position]);break;case 1:args.putString("key", mMenuTitles[position]);break;case 2:args.putString("key", mMenuTitles[position]);break;case 3:args.putString("key", mMenuTitles[position]);break;default:break;}fragment.setArguments(args); // FragmentActivity将点击的菜单列表标题传递给FragmentFragmentManager fragmentManager = getSupportFragmentManager();fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();// 更新选择后的item和title,然后关闭菜单mMenuListView.setItemChecked(position, true);setTitle(mMenuTitles[position]);mDrawerLayout.closeDrawer(mMenuListView); } 开源material-menu的集成我无所事事的度过了今天,是昨天死去的人们所期望的明天。

开源中国客户端侧滑菜单效果实现

相关文章:

你感兴趣的文章:

标签云: