本节书摘来自异步社区《Android 平板电脑开发实战详解和典型案例》一书中的第2章,第2.7节滑动式抽屉—— SlidingDrawer,作者 吴亚峰 , 杜化美 , 索依娜,更多章节内容可以访问云栖社区“异步社区”公众号查看
2.7 滑动式抽屉—— SlidingDrawer
Android 平板电脑开发实战详解和典型案例
上一节中,介绍了可展开列表ExpandableListView的基本知识及简单案例,本节将介绍Android 2.0控件滑动式抽屉SlidingDrawer,主要内容包括其基本知识以及一个简单的案例。
2.7.1 滑动式抽屉基本知识
滑动式抽屉SlidingDrawer在UI布局有限或放不下太多控件的时候可以使用,滑动式抽屉SlidingDrawer可以隐藏屏外的内容,在布局文件中必须指定handle和content,并允许用户通过handle以显示隐藏内容。滑动式抽屉SlidingDrawer继承自ViewGroup,其继承树如图2-32所示。
对菜单资源中的一些属性,由于篇幅所限,笔者将不再一一赘述,请读者自行查阅相关的api。
2.7.2 滑动式抽屉使用案例
通过前面的基本知识,读者对滑动式抽屉已经有了简单的了解,下面通过案例Sample2_9使读者进一步掌握滑动式抽屉的使用,在正式介绍此案例的开发步骤之前,首先请读者了解一下本案例的运行效果,如图2-33、图2-34和图2-35所示。
图2-33为程序运行的初始效果图,单击抽屉会出现图2-34的效果,单击图2-35中的图标会出现图2-30的效果。
了解了案例的运行结果之后,下面开始介绍案例的开发,具体步骤如下。
(1)首先需要编写的是主配置文件main.xml,其代码如下。
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="fill_parent" <!--充满父控件-->
4 android:layout_height="fill_parent" <!--充满父控件-->
5 android:orientation="vertical" <!--垂直放置-->
6 android:layout_gravity="top"
7 android:background="@drawable/aaa" <!--设置背景-->
8 <SlidingDrawer
9 android:id="@+id/sliding01" <!--设置ID-->
10 android:layout_width="fill_parent" <!--充满父控件-->
11 android:layout_height="wrap_content" <!--高度自身决定-->
12 android:handle="@+id/handleImage" <!--设置手柄-->
13 android:content="@+id/contentShow" <!--设置隐藏内容-->
14 android:orientation=”vertical"> <!--设置背景图片-->
15 <ImageView
16 android:id="@+id/handleImage" <!--设置ID-->
17 android:layout_width=" wrap_content" <!--宽度自身决定-->
18 android:layout_height="wrap_content" <!--高度自身决定-->
19 android:src=”@drawable/open”> <!--添加图片-->
20 </ImageView>
21 <GridView
22 android:id="@+id/contentShowt" <!--设置ID-->
23 android:layout_width=" wrap_content" <!--充满父控件-->
24 android:layout_height="wrap_content" <!--高度自身决定-->
25 android:background="@drawable/gray" <!--设置背景颜色-->
26 android:numColumns="3" <!--设置每排有3个-->
27 android:gravity=”center”> <!--设置中间位置-->
28 </GridView>
29 </SlidingDrawer>
30 </LinearLayout>
该布局比较简单,在一个LinearLayout里面放了一个SlidingDrawer,在SlidingDrawer里面放了ImageView和GridView。读者如果在模拟器上运行此案例的代码的话请把上述第7行设置背景的代码删除。
(2)完成了配置文件main.xml的开发后,下面将要开发的是设置GridView的布局文件griditem.xml,其代码如下。
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 android:id="@+id/linarlayout1" <!--设置ID-->
5 android:layout_width="wrap_content" <!--宽度自身决定-->
6 android:layout_height="wrap_content" <!--高度自身决定-->
7 android:orientation="vertical" <!--垂直排序-->
8 android:gravity="center_horizontal"> <!--设置中间位置-->
9 <ImageView
10 android:id="@+id/icon" <!--设置ID-->
11 android:layout_width="100dip" <!--设置宽度-->
12 android:layout_height="100dip" <!--设置高度-->
13 android:gravity="center"> <!--设置中间位置-->
14 </ImageView>
15 <TextView
16 android:id="@+id/text" <!--设置ID-->
17 android:layout_width="fill_parent" <!--充满父控件-->
18 android:layout_height="wrap_content" <!--高度自身决定-->
19 android:gravity="center"> <!--设置中间位置-->
20 </TextView>
21 </LinearLayout>
该布局比较简单,在一个LinearLayout里面放了一个放置图标的ImageView和一个放置标题的TextView。
(3)完成了配置文件griditem.xml的开发后,下面将要开发的是主Activity对应的类SlidingActivity,其代码如下。
1 package com.bn.sample2_9; //声明包
2 ……//该处省略了部分类的导入代码,读者可自行查看随书光盘中的源代码
3 public class SlidingActivity extends Activity {
4 @Override
5 public void onCreate(Bundle savedInstanceState) {
6 super.onCreate(savedInstanceState);
7 setContentView(R.layout.main); //设置布局
8 final SlidingDrawer mDrawer; //声明滑动式抽屉对象的引用
9 final LinearLayout mLinearLayout; //声明水平布局对象的引用
10 mDrawer=(SlidingDrawer)findViewById(R.id.slidingDrawer); //获取滑动式抽屉对象
11 Final ImageView im=(ImageView)findViewById(R.id.handleImage);//获取图片视图对象
12 int[]icon={R.drawable.dayviewicon,R.drawable.messagicon,R.drawable.monthviewicon,
13 R.drawable.selecticon,R.drawable.systemicon,R.drawable.weekviewicon};//图片资源数组
14 String[]text={"日试图","软件信息","月视图","查询日程","系统设置","周视图"}; //文本数组
15 GridAdapter gp=new GridAdapter(this,icon,text); //获取适配器对象
16 GridView gv=(GridView)findViewById(R.id.contentShow); //获取格视图对象
17 gv.setAdapter(gp); //添加适配器
18 mDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener(){//打开抽屉时调用
19 @Override
20 public void onDrawerOpened() {
21 im.setImageResource(R.drawable.close);}}); //更换图片
22 mDrawer.setOnDrawerCloseListener(newSlidingDrawer.OnDrawerCloseListener(){//关闭抽屉时调用
23 @Override
24 public void onDrawerClosed(){
25 im.setImageResource(R.drawable.open);}}); //更换图片
26 class GridAdapter extends BaseAdapter{ //自定义适配器
27 SlidingActivity ac; //声明Activity引用
28 int[] icon; //声明整数数组用来存放图片
29 String[] text; //声明字符串数组用来存放文本
30 public GridAdapter(Context context,int[] icon,String[] text){ //声明构造器
31 this.ac=(SlidingActivity)context; //转换为SlidingActivity
32 this.icon=icon; //赋值到整数数组
33 this.text=text;} //赋值到字符串数组
34 @Override
35 public int getCount(){return 6;} //返回内容个数
36 @Override
37 public Object getItem(int arg0){ return null;}
38 @Override
39 public long getItemId(int position){return 0;}
40 @Override
41 public View getView(int position, View convertView, ViewGroup parent){
42 LayoutInflater factory=LayoutInflater.from(ac);
43 View view=(View)factory.inflate(R.layout.griditem,null); //获取布局文件
44 ImageView iv=(ImageView)view.findViewById(R.id.icon); //获取图像视图对象
45 TextView tv=(TextView)view.findViewById(R.id.text); //获取文本视图对象
46 iv.setImageResource(icon[position]); //设置图片
47 tv.setText(text[position]); //设置文本
48 tv.setTextSize(40); //设置字体大小
49 tv.setTextColor(ac.getResources().getColor(R.color.white)); //设置字体颜色
50 view.setPadding(5,5,5,5); //设置四周留白
51 select(ac,view,position); //调用方法
52 return view;}
53 public void select(Context context,View view,int position){
54 final SlidingActivity sc=(SlidingActivity)context; //获取Activity引用
55 final int index=position; //获取所在位置
56 view.setOnClickListener( //设置监听器
57 new OnClickListener(){
58 @Override
59 public void onClick(View v){
60 switch(index){ //设置单击不同的图标时显示不同的Toast
61 case 0:Toast.makeText(sc,"您单击了日试图",Toast.LENGTH_SHORT). show();break;
62 ……//以下代码与上面基本相似,故此处省略,读者有需要可自行查看随书光盘的源代码
63 case 5:Toast.makeText(sc,"您单击了周试图",Toast.LENGTH_SHORT).show ();break;}}});}}
第7行为设置布局界面,第8~11行为声明滑动式抽屉对象和水平布局对象的引用,并获取对象,第12~14行为设置图片资源和文本,第18~25行为打开或关闭滑动式抽屉的监听器,并更换图片。
第26~63行为自定义适配器。第42~52行为获取图像视图和文本视图,并设置相应属性,第57~63行为单击图片时的监听器,按不同图片显示不同的Toast。