安卓开发SlidingDrawer实现抽屉效果

最新推荐文章于 2016-10-10 20:57:58 发布

freemindhack

最新推荐文章于 2016-10-10 20:57:58 发布

阅读量832

点赞数

分类专栏： Android

Android 专栏收录该内容

117 篇文章 0 订阅

订阅专栏

在手机开发中，我们会遇到这样的问题，要在手机屏幕上显示很多信息，但是手机屏幕就那么小一点，当内容较多的时候如何显示呢，我们如何理用更有限的空间来显示更多的信息呢？我们可以使用安卓系统提供的SlidingDrawer类，使用SlidingDrawer类我们就可以借助SlidingDrawer实现抽屉效果，这就是传说中的安卓抽屉效果,下面看参考代码，以下代码经本站亲测，读者可以拷贝到Eclipse项目中运行。下面直接贴出代码。

首先看一下运行效果:

SlidingDrawer抽屉效果实例01 SlidingDrawer抽屉效果实例02

    开始新建项目,首先准备几张图片，如下：
      1.handle_normal.png 下载
      2.handle_focused.png 下载
      3.handle_pressed.png 下载
      4.list_selector_background_pressed.png 下载

以上图片均放置在drawable-hdpi/drawable-ldpi/drawable-mdpi/drawable-xhdpi中。

然后我们来看代码如何写：

1.在es/drawable目录下定义一个资源文件handle.xml，参考代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android=http://schemas.android.com/apk/res/android>;
 <item android:state_window_focused="false" android:drawable="@drawable/handle_normal" />
 <item android:state_focused="true" android:drawable="@drawable/handle_focused" />
 <item android:state_pressed="true" android:drawable="@drawable/handle_pressed" />
</selector>

2.在es/drawable目录下定义一个资源文件listview_selected.xml，参考代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android=http://schemas.android.com/apk/res/android>;
<item android:state_pressed="true"
android:drawable="@drawable/list_selector_background_pressed" />
</selector>

3.main.xml文件中的参考代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
<SlidingDrawer
 android:id="@+id/slidingdrawer"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="horizontal"
 android:handle="@+id/handle"
 android:content="@+id/content">
 <Button
 android:id="@+id/handle"
 android:layout_width="wrap_content"
 android:layout_height="fill_parent"
 android:background="@drawable/handle" />
 <ListView
 android:id="@+id/content"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content" />
</SlidingDrawer>
</LinearLayout>

4.在res/layout文件家中新建listview_layout.xml,文件参考代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#ffffff" >
 <LinearLayout
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/listview_selected"
 android:padding="6px">
<TextView
 android:id="@+id/webName"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textSize="20px"
 android:textColor="#000000"/>
<TextView
 android:id="@+id/webDescript"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textSize="16px"
 android:textColor="#000000"/>
 </LinearLayout>
</LinearLayout>

5.对应java文件(本例是AndroidSlidingDrawerActivity.java)的参考代码：

public class AndroidSlidingDrawerActivity extends Activity {
    private ListView myListView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setupViews();
    }
    private void setupViews(){
        myListView = (ListView)findViewById(R.id.content);
        myListView.setAdapter(new ListViewAdapter());
    }
    private class ListViewAdapter extends BaseAdapter{
      //这里返回10行，ListView有多少行取决于getCount()方法
      @Override
      public int getCount() {
         return 10;
      }
       @Override
     public Object getItem(int arg0) {
         return null;
     }
       @Override
     public long getItemId(int arg0) {
          return 0;
      }
       @Override
      public View getView(int position, View v, ViewGroup parent) {
        final LayoutInflater inflater = LayoutInflater.from(getApplicationContext());
       if(v == null){
            v = inflater.inflate(R.layout.listview_layout, null);
         }
          TextView myWebName = (TextView)v.findViewById(R.id.webName);
       TextView myWebDescript = (TextView)v.findViewById(R.id.webDescript);
          myWebName.setText("Android开发学习网" + position);
       myWebDescript.setText("slidingdrawer用法详解" + position);
        return v;
      }
    }
}

运行即可看到效果.

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
在使用ListView的时候，常常用到Android自带的list布局，即simple_list_item_1、simple_list_item_2、simple_list_item_checked等。初次用起来，难免有点云里雾里。下面，就这几种list布局，做一些简单介绍：

注：适配器选用SimpleAdapter

main.xml 如下：

[html] view plain copy print ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="@+id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/android:empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="对不起，没有数据显示"/>
</LinearLayout>

包含一个id="@+id/android:list"的ListView和id="@+id/android:empty"的TextView，当ListView没有数据显示时，TextView显示出来，同时ListView会被影藏（貌似在ListActivity中才有此效果，在Activity中必须自行设置）；

一、simple_list_item_1（单行显示）

此布局显示最为简单，其中只有一个TextView，id为：android.R.id.text1，直接上代码：

[java] view plain copy print ?

public class ListViewDemo extends ListActivity {
private List<Map<String, String>> data = new ArrayList<Map<String,String>>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Map<String, String> map1 = new HashMap<String, String>();
map1.put("姓名", "风晴雪");
data.add(map1);
Map<String, String> map2 = new HashMap<String, String>();
map2.put("姓名", "悭臾");
data.add(map2);
setListAdapter(new SimpleAdapter(this,data,android.R.layout.simple_list_item_1,
new String[]{"姓名"}, //每行显示一个姓名
new int[]{android.R.id.text1} //名字在text1上显示
));
}

上图：

二、simple_list_item_2、two_line_list_item（双行显示）

两种布局很相似，都有两个TextView：android.R.id.text1和android.R.id.text2，不同之处在于，前者两行字是不一样大小的，而后者

中两行字体一样大小，这里使用前者作为示例，两者的用法一样。先看simple_list_item_2.xml 布局文件：

[html] view plain copy print ?

<TwoLineListItem xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingTop="2dip"
android:paddingBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:mode="twoLine"
>
<TextView android:id="@android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="6dip"
android:layout_marginTop="6dip"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView android:id="@android:id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@android:id/text1"
android:layout_alignLeft="@android:id/text1"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
</TwoLineListItem>

simple_list_item_2用法跟simple_list_item_1相同，看代码：

[java] view plain copy print ?

public class ListViewDemo extends ListActivity {
private List<Map<String, String>> data = new ArrayList<Map<String,String>>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Map<String, String> map1 = new HashMap<String, String>();
map1.put("姓名", "风晴雪");
map1.put("性别", "女的");
data.add(map1);
Map<String, String> map2 = new HashMap<String, String>();
map2.put("姓名", "悭臾");
map2.put("性别", "公的");
data.add(map2);
Map<String, String> map3 = new HashMap<String, String>();
map3.put("姓名", "百里屠苏");
map3.put("性别", "男的");
data.add(map3);
setListAdapter(new SimpleAdapter(this,data,android.R.layout.simple_list_item_2,
new String[]{"姓名","性别"}, //每行显示一组姓名和性别
new int[]{android.R.id.text1,android.R.id.text2} //名字在text1上显示，性别在text2上显示
));
}
}

上图：simple_list_item_2

two_line_list_item

三、simple_list_item_single_choice、simple_list_item_multiple_choice、simple_list_item_checked（不同的呈现方式）

这三种布局增加了选项，有单选和多选模式。常用方法为setChoiceMode()，getCheckedItemPositions()，getCheckedItemIds()；

[java] view plain copy print ?

setListAdapter(new SimpleAdapter(this,data,android.R.layout.simple_list_item_multiple_choice,
new String[]{"姓名"}, //每行显示一组姓名
new int[]{android.R.id.text1} //名字在text1上显示
));
/*表明有选项，若不设置，缺省为none，则点击后没有反应
* 选项模式有：CHOICE_MODE_SINGLE 单选--ListView中只能有一个item被选中
* CHOICE_MODE_MULTIPLE 多选--允许选中多个item
* CHOICE_MODE_NONE 缺省
*/
getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

上图：依次为simple_list_item_multiple_choice、simple_list_item_single_choice、simple_list_item_checked格式

关于ListView未完！

（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（（
前面总结了如何应用android自带的布局到ListView中去，现在如果想让自己的ListView更生动，只需要将自己定义的布局应用到ListView中，在布局中添加一些生动的元素，比如，图标。

一、为ListView每个item添加一个图标

先看效果：

首先定义一个entry.xml布局文件：

[html] view plain copy print ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:src="@drawable/preview"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
/>
<include
layout="@android:layout/simple_list_item_1"
/>
</LinearLayout>

然后将此布局文件应用到ListView中去：

[java] view plain copy print ?

public class ListViewDemo extends ListActivity {
private List<Map<String,String>> data = new ArrayList<Map<String,String>>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Map<String, String> map1 = new HashMap<String, String>();
map1.put("姓名", "A君");
data.add(map1);
Map<String, String> map2 = new HashMap<String, String>();
map2.put("姓名", "B君");
data.add(map2);
setListAdapter(new SimpleAdapter(this,data,R.layout.entry,
new String[]{"姓名"},
new int[]{android.R.id.text1}
));
}

二、动态设置图标

以上例子，处理的非常简单，全部图标都一样，现在要想动态设置每个item中元素，需要继承Adapter子类，通过重写getView（）函数，为每个item都设置不同的风格。

下面创建BaseAdapter的子类MyAdapter：

[java] view plain copy print ?

private class MyAdapter extends SimpleAdapter{
//icons存储图标的id
private int[] icons = null;
private Context context;
public MyAdapter(Context context, List<? extends Map<String, ?>> data,
int resource, String[] from, int[] to,int[] icons) {
super(context, data, resource, from, to);
// TODO Auto-generated constructor stub
this.icons = icons;//传入存储图标id的数组
this.context = context;
}
/* (non-Javadoc)
* 重写getView函数,由于SimpleAdapter能处理TextView，仅仅是不能设置图标
*/所以，只需要在调用父类的getView函数的基础上，设置上相应的图标即可
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ViewHolder holder = null;
if(convertView == null){
holder = new ViewHolder();
convertView = super.getView(position, convertView, parent);//调用父类的getView函数，设置TextView
holder.imageView = (ImageView)convertView.findViewById(R.id.myimageview);
convertView.setTag(holder);
}else {
holder = (ViewHolder)convertView.getTag();
}
//从icons中随机选出一个，并设置作为item的图标
Random random = new Random();
int index = random.nextInt(icons.length);
holder.imageView.setImageResource(icons[index]);
return convertView;
}
private class ViewHolder{
ImageView imageView;
}
}

MyAdapter继承自SimpleAdapter，重写getView（）函数，使listView中每个item的图标都是随机选择的。对MyAdapter的应用如下：

[html] view plain copy print ?

//数组存储图标id
private int[] myicons = { R.drawable.preview,R.drawable.preview1,R.drawable.preview2,R.drawable.preview3};

[html] view plain copy print ?

setListAdapter(new MyAdapter(this, data, R.layout.entry, new String[]{"姓名"},
new int[]{android.R.id.text1}, myicons));//为ListView设置MyAdapter适配器

上图：

（（（＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ExpandableListView是一个two-level列表视图，一级目录可以展开显示出第二级目录，手机QQ联系人列表的实现效果就可以通过ExpandableListView来实现。现在来做一个ExpandableListView的Demo：

首先，要准备两个布局文件groups.xml和childs.xml来分别表示一级目录和二级目录视图：

一级目录groups.xml：

[html] view plain copy print ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="vertical" >
<TextView
android:id="@+id/mytextview_groups"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:paddingLeft="40dp"
android:gravity="center_vertical"
/>
</LinearLayout>

二级目录childs.xml:

[html] view plain copy print ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="vertical" >
<TextView
android:id="@+id/mytextview_childs"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:paddingLeft="10dp"
android:gravity="center_vertical"
/>
</LinearLayout>

这里两级目录均只是显示一个TextView。接下来，main.xml布局文件如下：

[html] view plain copy print ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ExpandableListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>

然后，需要提供Adapter来为可折叠列表提供数据和视图，这里实现MyExpandableListAdapter继承自BaseExpandableListAdapter基类，主要重写两个主要方法getChildView和getGroupView,具体实现如下：

[java] view plain copy print ?

/**MyExpandableListAdapter继承自BaseExpandableListAdapter,
* 为ExpandableListView提供数据和视图，一级视图和二级视图均只显示
* 一个TextView
* @author Administrator
*/
public class MyExpandableListAdapter extends BaseExpandableListAdapter {
private Context context;
//一级目录数据
private List<String> groups;
//二级目录数据
private List<List<String>> childs;
public MyExpandableListAdapter(Context context,List<String> groups,List<List<String>> childs){
this.context = context;
this.groups = groups;
this.childs = childs;
}
public Object getChild(int arg0, int arg1) {
// TODO Auto-generated method stub
return childs.get(arg0).get(arg1);
}
public long getChildId(int groupPosition, int childPosition) {
// TODO Auto-generated method stub
return childPosition;
}
/* (non-Javadoc)返回二级视图，包含一个TextView
*/
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
TextView childTextView = null;
if(convertView == null){
convertView = LayoutInflater.from(context).inflate(R.layout.childs, null);
}
childTextView = (TextView)convertView.findViewById(R.id.mytextview_childs);
childTextView.setText(childs.get(groupPosition).get(childPosition));
return convertView;
}
public int getChildrenCount(int groupPosition) {
// TODO Auto-generated method stub
return childs.get(groupPosition).size();
}
public Object getGroup(int groupPosition) {
// TODO Auto-generated method stub
return groups.get(groupPosition);
}
public int getGroupCount() {
// TODO Auto-generated method stub
return groups.size();
}
public long getGroupId(int groupPosition) {
// TODO Auto-generated method stub
return groupPosition;
}
/* (non-Javadoc)一级视图，也只包含一个TextView
*/
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
TextView groupTextView = null;
if(convertView == null){
convertView = LayoutInflater.from(context).inflate(R.layout.groups, null);
}
groupTextView = (TextView)convertView.findViewById(R.id.mytextview_groups);
groupTextView.setText(groups.get(groupPosition));
return convertView;
}
public boolean hasStableIds() {
// TODO Auto-generated method stub
return false;
}
public boolean isChildSelectable(int groupPosition, int childPosition) {
// TODO Auto-generated method stub
return true;
}
}

最后，Activity中实现如下：

[java] view plain copy print ?

public class ExpandableListViewDemo extends Activity {
private ExpandableListView expandableListView = null;
private List<String> groups = new ArrayList<String>();
private List<List<String>> childs = new ArrayList<List<String>>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
expandableListView = (ExpandableListView)findViewById(android.R.id.list);
groups.add("朋友");
groups.add("同学");
groups.add("同事");
List<String> friends = new ArrayList<String>();
friends.add("小明");
friends.add("小红");
friends.add("小强");
childs.add(friends);
List<String> classmates = new ArrayList<String>();
classmates.add("甲");
classmates.add("乙");
classmates.add("丙");
childs.add(classmates);
List<String> colleagues = new ArrayList<String>();
colleagues.add("A君");
colleagues.add("B君");
colleagues.add("C君");
childs.add(colleagues);
expandableListView.setAdapter(new MyExpandableListAdapter(ExpandableListViewDemo.this, groups, childs));
}
}