你是否觉得手机QQ上的好友列表那个控件非常棒? 不是..... 那也没关系,学多一点知识对自己也有益无害。
那么我们就开始吧。
展开型列表控件, 原名ExpandableListView
是普通的列表控件进阶版, 可以自由的把列表进行收缩, 非常的方便兼好看。
首先看看我完成的截图, 虽然界面不漂亮, 但大家可以自己去修改界面。
该控件需要一个主界面XML 一个标题界面XML及一个列表内容界面XML
首先我们来看看 mian.xml 主界面
//该界面非常简单, 只要一个ExpandableListView即可 <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="@id/android:list" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout>
groups.xml 该界面是父标题界面
我们只要放上一个要显示出来的标题TextView控件上去即可
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/textGroup" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingLeft="40px" android:paddingTop="6px" android:paddingBottom="6px" android:textSize="15sp" android:text="No data" /></LinearLayout>
childs.xml 是子控件, 直接显示列表内容
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/textChild" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingLeft="60px" android:paddingTop="10px" android:paddingBottom="10px" android:textSize="20sp" android:text="No Data" /></LinearLayout>
接下来再上主代码, 命名有点乱, 大家真正用于开发时可不要这样命名啊.
public class ExpandActivity extends ExpandableListActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //创建二个一级条目标题 Map<String, String> title_1 = new HashMap<String, String>(); Map<String, String> title_2 = new HashMap<String, String>(); title_1.put("group", "开发"); title_2.put("group", "管理"); //创建一级条目容器 List<Map<String, String>> gruops = new ArrayList<Map<String,String>>(); gruops.add(title_1); gruops.add(title_2); //创建二级条目内容 //内容一 Map<String, String> content_1 = new HashMap<String, String>(); Map<String, String> content_2 = new HashMap<String, String>(); content_1.put("child", "VC++"); content_2.put("child", "Java"); List<Map<String, String>> childs_1 = new ArrayList<Map<String,String>>(); childs_1.add(content_1); childs_1.add(content_2); //内容二 Map<String, String> content_3 = new HashMap<String, String>(); Map<String, String> content_4 = new HashMap<String, String>(); content_3.put("child", "敏捷开发"); content_4.put("child", "迭代开发"); List<Map<String, String>> childs_2 = new ArrayList<Map<String,String>>(); childs_2.add(content_3); childs_2.add(content_4); //存放两个内容, 以便显示在列表中 List<List<Map<String, String>>> childs = new ArrayList<List<Map<String,String>>>(); childs.add(childs_1); childs.add(childs_2); //创建ExpandableList的Adapter容器 //参数: 1.上下文 2.一级集合 3.一级样式文件 4. 一级条目键值 5.一级显示控件名 // 6. 二级集合 7. 二级样式 8.二级条目键值 9.二级显示控件名 SimpleExpandableListAdapter sela = new SimpleExpandableListAdapter( this, gruops, R.drawable.groups, new String[]{"group"}, new int[]{R.id.textGroup}, childs, R.drawable.childs, new String[]{"child"}, new int[]{R.id.textChild} ); //加入列表 setListAdapter(sela); } } //最后, 如果想响应各操作的话, 就要重载下面的方法 //列表内容按下 @Override public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) { // TODO Auto-generated method stub return super.onChildClick(parent, v, groupPosition, childPosition, id); }//二级标题按下 @Override public boolean setSelectedChild(int groupPosition, int childPosition, boolean shouldExpandGroup) { // TODO Auto-generated method stub return super.setSelectedChild(groupPosition, childPosition, shouldExpandGroup); }
//一级标题按下 @Override public void setSelectedGroup(int groupPosition) { // TODO Auto-generated method stub super.setSelectedGroup(groupPosition); }
再最后, 运行你的模拟器就可以看见啦。
将上面的ExpandableListView控件化.
控件化比较简单我们只要用普通的Activity类就可以了, 不用再继承ExpandableListView.
只需要在成员变量中添加
private ExpandableListView expandList;
然后在添加内容时改成
expandList.setAdapter(sela);
就可以了。 当然, 响应事件Listener也可以自己添加。
附:另一个例子
ExpandableListView的用法与ListView和GridView,Gallery 类似,都是通过一个Adapter来显示.
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"> <ExpandableListView android:id="@+id/elv" android:indicatorRight="160dp" android:layout_width="fill_parent" android:layout_height="fill_parent"> </ExpandableListView> <!-- indicatorRight 设置那个小图标右边缘与 ExpandableListView左边缘的间距--> </LinearLayout>
package com.test; import java.util.ArrayList; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseExpandableListAdapter; import android.widget.ExpandableListView; import android.widget.TextView; import android.widget.LinearLayout.LayoutParams; public class ElvAdapter extends BaseExpandableListAdapter { ArrayList<ElvObject> objs; Context context; ElvAdapter(Context context,ArrayList<ElvObject> objs) { this.objs=objs; this.context=context; } @Override public Object getChild(int groupPosition, int childPosition) { // TODO Auto-generated method stub return objs.get(groupPosition).childs.get(childPosition); } @Override public long getChildId(int groupPosition, int childPosition) { // TODO Auto-generated method stub return childPosition; } @Override public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { //子元素的View TextView tv=new TextView(context); tv.setText(objs.get(groupPosition).childs.get(childPosition)); tv.setLayoutParams(new ExpandableListView.LayoutParams(ExpandableListView.LayoutParams.FILL_PARENT,ExpandableListView.LayoutParams.WRAP_CONTENT)); return tv; } @Override public int getChildrenCount(int groupPosition) { // TODO Auto-generated method stub return objs.get(groupPosition).childs.size(); } @Override public Object getGroup(int groupPosition) { // TODO Auto-generated method stub return objs.get(groupPosition); } @Override public int getGroupCount() { // TODO Auto-generated method stub return objs.size(); } @Override public long getGroupId(int groupPosition) { // TODO Auto-generated method stub return groupPosition; } @Override public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { //分组的View TextView tv=new TextView(context); tv.setText(objs.get(groupPosition).groupName); ExpandableListView.LayoutParams params=new ExpandableListView.LayoutParams(ExpandableListView.LayoutParams.FILL_PARENT,60); tv.setLayoutParams(params); return tv; } @Override public boolean hasStableIds() { // TODO Auto-generated method stub return false; } @Override public boolean isChildSelectable(int groupPosition, int childPosition) { // TODO Auto-generated method stub return true; } }class ElvObject{ String groupName=""; ArrayList<String> childs=new ArrayList<String>(); ElvObject(String groupName,ArrayList<String> childs) { this.groupName=groupName; this.childs=childs; } }
package com.test; import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; import android.widget.ExpandableListView; public class AndroidTestActivity extends Activity { /** Called when the activity is first created. */ ExpandableListView elv; ElvAdapter adapter; ArrayList<ElvObject> objs=new ArrayList<ElvObject>(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); elv=(ExpandableListView)findViewById(R.id.elv); adapter=new ElvAdapter(this,objs); elv.setAdapter(adapter); ArrayList<String> list=new ArrayList<String>(); list.add("aaa"); list.add("bbb"); list.add("ccc"); objs.add(new ElvObject("英文",list)); ArrayList<String> list2=new ArrayList<String>(); list2.add("111"); list2.add("222"); list2.add("333"); list2.add("444"); objs.add(new ElvObject("数字",list2)); } }
本文向大家介绍JavaScript实现QQ列表展开收缩扩展功能,包括了JavaScript实现QQ列表展开收缩扩展功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现QQ列表展开收缩扩展展示的具体代码,供大家参考,具体内容如下 效果图: 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
我使用引导表来处理数据库中的数据。 我使用分页功能,只发送回用户使用限制和偏移选项请求的行数。 我还使用表控件扩展来方便地过滤结果。但是,当我使用select控件与data filter control=“select”一起进行筛选时,条目只是在该结果集中返回的条目。 当我应用其他过滤器时,列表将增长。我想使用API,并让它从服务器为该列表预加载所有可能项目的列表,以允许通过这些选项进行过滤。 虽
用法 列表控制分为如下四种: 状态 主操作(包括文本字符串) 次要操作 次要信息 列表标题的元素要容易分辨,首先要注意阅读顺序,所以,状态和主操作放在标题列表的左边。在这里,列表里面的文本内容也被认为是主操作的操作目标的一部分。 不要把两个展示图标和操作图标放在一起,比如复选框和头像 如果列表的主操作是做导航作用的,那么就不要使用icon。列表它本身以及它的上下文就已经可以让用户明白这个列表的用处
在学习了 ScrollView 及 Adapter 两节内容之后,大家应该对 ListView 有了一些基本的了解,它是一个列表样式的 ViewGroup,将若干 item 按行排列。ListView 是一个很基本的控件也是 Android 中最重要的控件之一。它可以帮助我们完成多个 View 的垂直排列并支持滚动显示效果,而它比 ScrollView 更灵活也更易扩展,Adapter 作为 UI
本文向大家介绍Javascript通过overflow控制列表闭合与展开的方法,包括了Javascript通过overflow控制列表闭合与展开的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Javascript通过overflow控制列表闭合与展开的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。
本文向大家介绍Cocos2d-x UI开发之CCControlColourPicker控件类使用实例,包括了Cocos2d-x UI开发之CCControlColourPicker控件类使用实例的使用技巧和注意事项,需要的朋友参考一下 CCControlColourPicker实现颜色拾取器的功能。关于控件使用时的一些配置,请参见文章:UI开发之控件类-CCControlButton。下边来看源代