仿QQ联系人可折叠列表
2018-11-30 本文已影响3人
莫语莫雨
QQ手机联系人有一个联系人列表折叠的功能,这个功能怎么实现的呢?其实很简单
Screenshot_2018-11-30-15-52-35-262_com.tencent.mo.png
Screenshot_2018-11-30-15-57-43-280_com.clb.js.png
实现步骤
1.使用系统控件ExpandableListView来实现这个功能,ExpandableListView是一个系统的可折叠控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ExpandableListView
android:id="@+id/qq_list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
2.准备数据
private fun setListData() {
// 创建二个一级条目标题
val title_1 = HashMap<String, String>()
val title_2 = HashMap<String, String>()
val title_3 = HashMap<String, String>()
title_1["group"] = "林炳文"
title_2["group"] = "文炳林"
gruops.add(title_1)
gruops.add(title_2)
// 创建二级条目内容
// 内容一
val title_1_content_1 = HashMap<String, String>()
val title_1_content_2 = HashMap<String, String>()
val title_1_content_3 = HashMap<String, String>()
title_1_content_1["child"] = "工人"
title_1_content_2["child"] = "学生"
title_1_content_3["child"] = "农民"
val childs_1 = ArrayList<Map<String, String>>()
childs_1.add(title_1_content_1)
childs_1.add(title_1_content_2)
childs_1.add(title_1_content_3)
// 内容二
val title_2_content_1 = HashMap<String, String>()
val title_2_content_2 = HashMap<String, String>()
val title_2_content_3 = HashMap<String, String>()
title_2_content_1["child"] = "猩猩"
title_2_content_2["child"] = "老虎"
title_2_content_3["child"] = "狮子"
title_2_content_3["child"] = "狮子"
val childs_2 = ArrayList<Map<String, String>>()
childs_2.add(title_2_content_1)
childs_2.add(title_2_content_2)
childs_2.add(title_2_content_3)
childs.add(childs_1)
childs.add(childs_2)
setAdapter()
}
3.准备条目布局文件
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="40dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:textSize="25sp"
android:text="No data"/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/textChild"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="60dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="20sp"
android:text="No Data"
/>
</LinearLayout>
3.设置适配器
private fun setAdapter() {
//创建ExpandableList的Adapter容器 参数:
// 1.上下文
// 2.一级集合
// 3.一级样式文件
// 4. 一级条目键值
// 5.一级显示控件名
// 6. 二级集合
// 7. 二级样式
// 8.二级条目键值
// 9.二级显示控件名
val simpleExpandableListAdapter = SimpleExpandableListAdapter(
this,
gruops,
R.layout.groups,
arrayOf("group"),
intArrayOf(R.id.textGroup),
childs,
R.layout.childs,
arrayOf("child"),
intArrayOf(R.id.textChild)
)
qq_list.setAdapter(simpleExpandableListAdapter)
}
4.搞定!是的你没有看错,这就搞定了(如果你还想进行自定义其他的布局文件,需要继承并自定义适配器,然后也同样的简单)
Screenshot_2018-11-30-15-57-43-280_com.clb.js.png
总结
完整的逻辑代码
class QQContactActivity : Activity() {
var gruops = ArrayList<Map<String, String>>()
var childs = ArrayList<List<Map<String, String>>>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_qq_contact)
setListData()
}
private fun setListData() {
// 创建二个一级条目标题
val title_1 = HashMap<String, String>()
val title_2 = HashMap<String, String>()
val title_3 = HashMap<String, String>()
title_1["group"] = "林炳文"
title_2["group"] = "文炳林"
gruops.add(title_1)
gruops.add(title_2)
// 创建二级条目内容
// 内容一
val title_1_content_1 = HashMap<String, String>()
val title_1_content_2 = HashMap<String, String>()
val title_1_content_3 = HashMap<String, String>()
title_1_content_1["child"] = "工人"
title_1_content_2["child"] = "学生"
title_1_content_3["child"] = "农民"
val childs_1 = ArrayList<Map<String, String>>()
childs_1.add(title_1_content_1)
childs_1.add(title_1_content_2)
childs_1.add(title_1_content_3)
// 内容二
val title_2_content_1 = HashMap<String, String>()
val title_2_content_2 = HashMap<String, String>()
val title_2_content_3 = HashMap<String, String>()
title_2_content_1["child"] = "猩猩"
title_2_content_2["child"] = "老虎"
title_2_content_3["child"] = "狮子"
title_2_content_3["child"] = "狮子"
val childs_2 = ArrayList<Map<String, String>>()
childs_2.add(title_2_content_1)
childs_2.add(title_2_content_2)
childs_2.add(title_2_content_3)
childs.add(childs_1)
childs.add(childs_2)
setAdapter()
}
private fun setAdapter() {
//创建ExpandableList的Adapter容器 参数:
// 1.上下文
// 2.一级集合
// 3.一级样式文件
// 4. 一级条目键值
// 5.一级显示控件名
// 6. 二级集合
// 7. 二级样式
// 8.二级条目键值
// 9.二级显示控件名
val simpleExpandableListAdapter = SimpleExpandableListAdapter(
this,
gruops,
R.layout.groups,
arrayOf("group"),
intArrayOf(R.id.textGroup),
childs,
R.layout.childs,
arrayOf("child"),
intArrayOf(R.id.textChild)
)
qq_list.setAdapter(simpleExpandableListAdapter)
}
}