仿QQ联系人可折叠列表

作者: 莫语莫雨 | 来源:发表于2018-11-30 16:01 被阅读3次
    QQ手机联系人有一个联系人列表折叠的功能,这个功能怎么实现的呢?其实很简单 Screenshot_2018-11-30-15-52-35-262_com.tencent.mo.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)
        }
    }
    

    相关文章

      网友评论

        本文标题:仿QQ联系人可折叠列表

        本文链接:https://www.haomeiwen.com/subject/vtphcqtx.html