Android UI设计——ExpandableListView控件

最新推荐文章于 2021-05-25 17:22:01 发布

小_爽

最新推荐文章于 2021-05-25 17:22:01 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android UI设计系列文章标签： android expandablelistview ui设计

本文链接：https://blog.youkuaiyun.com/To_be_Designer/article/details/48028649

Android UI设计系列专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了Android中的ExpandableListView组件，通过示例展示了如何创建分组及子项的数据结构，并提供了自定义Adapter的具体实现代码。

ExpandableListView

　　ExpandableListView是一种双层显示的View，为什么这么说呢，以我们的QQ为例，打开我们的QQ，我们首先会有一个联系人的分组，点击分组我们会看到分组内联系人的列表。这就是一种双层显示的View。ExpandableListView相当于两层的ListView嵌套。
　　
　　ExpandableListView的使用与ListView类似，只不过ExpandableListView在创建Adapter的时候需要重写两倍的ListView重写的方法（原因就是：ExpandableListView相当于两层的ListView嵌套）。ExpandableListView在创建Adapter需要继承BaseExpandableListAdapter。下面来看一下具体的代码：

创建数据。我们以班级为分组。分别创建4个班，然后每个班有不同的学生。

//班级类
public class Clazz {
    private String clazzName;
    private String clazzNum;
    private List<Student> students;

    /*
    定义一个初始化的构造器。
     */

    public Clazz(String clazzName, String clazzNum) {
        this.clazzName = clazzName;
        this.clazzNum = clazzNum;
    }

    public String getClazzName() {
        return clazzName;
    }

    public void setClazzName(String clazzName) {
        this.clazzName = clazzName;
    }

    public String getClazzNum() {
        return clazzNum;
    }

    public void setClazzNum(String clazzNum) {
        this.clazzNum = clazzNum;
    }

    public List<Student> getStudents() {
        return students;
    }

    public void setStudents(List<Student> students) {
        this.students = students;
    }
}

//学生类

public class Student {
    private String studentName;
    private String age;
    private String sex;
    private String label;

    /*
    定义初始化的构造器
     */

    public Student(String label, String studentName, String age, String sex) {
        this.label = label;
        this.studentName = studentName;
        this.age = age;
        this.sex = sex;
    }

    public String getStudentName() {
        return studentName;
    }
    public void setStudentName(String studentName) {
        this.studentName = studentName;
    }

    public String getAge() {
        return age;
    }
    public void setAge(String age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getLabel() {
        return label;
    }
    public void setLabel(String label) {
        this.label = label;
    }
}

自定义Adapter以及布局，将数据添加到布局中。

学生布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center|left">

    <ImageView
        android:id="@+id/imageview_student"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/a_mall_04"/>
    <TextView
        android:id="@+id/textview_student_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="学生姓名"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="10dp">
        <TextView
            android:id="@+id/textview_student_age"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="学生年龄"/>
        <TextView
            android:id="@+id/textview_student_sex"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="学生性别"/>
    </LinearLayout>
    <TextView
        android:id="@+id/textview_student_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="学生签名"/>

</LinearLayout>

这里写图片描述
班级布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center|left">

    <TextView
        android:id="@+id/textview_clazz_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="班级名称"
        android:layout_marginLeft="50dp"/>
    <TextView
        android:id="@+id/textview_clazz_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="班级编号"
        android:layout_marginLeft="10dp"/>
    <TextView
        android:id="@+id/textview_student_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="班级人数"
        android:layout_marginLeft="10dp"/>
</LinearLayout>

这里写图片描述

自定义的Adapter

public class MyExpandableListViewAdapter extends BaseExpandableListAdapter {

    private LayoutInflater mInflater;
    private List<Clazz> mClazzs;
    /*
    定义一个构造器
     */
    public MyExpandableListViewAdapter(LayoutInflater mInflater, List<Clazz> mClazzs) {
        this.mInflater = mInflater;
        this.mClazzs = mClazzs;
    }

    @Override
    public int getGroupCount() {
        return mClazzs.size();
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return mClazzs.get(groupPosition).getStudents().size();
    }

    @Override
    public Object getGroup(int groupPosition) {
        return groupPosition;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public boolean hasStableIds() {
        return false;
    }
    //将班级数据添加到组布局中
    @Override
    public View getGroupView(int groupPosition, boolean b, View convertview, ViewGroup viewGroup) {
        GroupViewHolder groupViewHolder = null;

        if(convertview == null){
            convertview = mInflater.inflate(R.layout.item_parent_view,null);
            groupViewHolder = new GroupViewHolder();
            groupViewHolder.textViewClazzName = (TextView) convertview.findViewById(R.id.textview_clazz_name);
            groupViewHolder.textViewClazzNum = (TextView) convertview.findViewById(R.id.textview_clazz_num);
            groupViewHolder.textViewClazzStudentNum = (TextView) convertview.findViewById(R.id.textview_student_num);

            convertview.setTag(groupViewHolder);
        }else{
            groupViewHolder = (GroupViewHolder) convertview.getTag();
        }

        Clazz clazz = mClazzs.get(groupPosition);
        groupViewHolder.textViewClazzName.setText(clazz.getClazzName());
        groupViewHolder.textViewClazzNum.setText(clazz.getClazzNum());
        groupViewHolder.textViewClazzStudentNum.setText(""+clazz.getStudents().size());

        return convertview;
    }
    class GroupViewHolder{
        TextView textViewClazzName;
        TextView textViewClazzNum;
        TextView textViewClazzStudentNum;

    }
    //将学生数据添加到自布局中
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean b, View convertview, ViewGroup viewGroup) {
        ChildViewHolder childViewHolder = null;

        if(convertview == null){
            convertview = mInflater.inflate(R.layout.item_child_view,null);
            childViewHolder = new ChildViewHolder();
            childViewHolder.textViewStudentName = (TextView) convertview.findViewById(R.id.textview_student_name);
            childViewHolder.textViewStudentAge = (TextView) convertview.findViewById(R.id.textview_student_age);
            childViewHolder.textViewStudentSex = (TextView) convertview.findViewById(R.id.textview_student_sex);
            childViewHolder.textViewStudentLabel = (TextView) convertview.findViewById(R.id.textview_student_label);

            convertview.setTag(childViewHolder);
        }else{
            childViewHolder = (ChildViewHolder) convertview.getTag();
        }

        Clazz clazz = mClazzs.get(groupPosition);
        Student student = clazz.getStudents().get(childPosition);
        childViewHolder.textViewStudentName.setText(student.getStudentName());
        childViewHolder.textViewStudentAge.setText(student.getAge());
        childViewHolder.textViewStudentSex.setText(student.getSex());
        childViewHolder.textViewStudentLabel.setText(student.getLabel());

        return convertview;
    }
    class ChildViewHolder{
        TextView textViewStudentName;
        TextView textViewStudentAge;
        TextView textViewStudentSex;
        TextView textViewStudentLabel;

    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return false;
    }
}

初始化数据，并将View添加到ExpandableListView中。

public class MainActivity extends Activity {

    private ExpandableListView mExpandableListView;
    private List<Clazz> mClazzs;

    private LayoutInflater mInflater;
    private MyExpandableListViewAdapter mMyAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mExpandableListView = (android.widget.ExpandableListView) findViewById(R.id.expandablelistview);
        initData();

        mInflater = getLayoutInflater();
        mMyAdapter = new MyExpandableListViewAdapter(mInflater,mClazzs);
        mExpandableListView.setAdapter(mMyAdapter);
    }
    /*
    初始化数据
     */
    private void initData() {
        mClazzs = new ArrayList<Clazz>();
        //初始化一班
        Clazz clazz1 = new Clazz("一班","201501");
        List<Student> clazz1Students = new ArrayList<Student>();
        Student clazz1_Student1 = new Student("生命在于运动","张三","17","男");
        clazz1Students.add(clazz1_Student1);
        Student clazz1_Student2 = new Student("生命在于运动","李四","19","女");
        clazz1Students.add(clazz1_Student2);
        Student clazz1_Student3 = new Student("生命在于运动","王五","17","男");
        clazz1Students.add(clazz1_Student3);
        Student clazz1_Student4 = new Student("生命在于运动","赵六","20","男");
        clazz1Students.add(clazz1_Student4);
        Student clazz1_Student5 = new Student("生命在于运动","马奇","18","女");
        clazz1Students.add(clazz1_Student5);
        clazz1.setStudents(clazz1Students);
        mClazzs.add(clazz1);

        //初始化二班
        Clazz clazz2 = new Clazz("二班","201502");

        List<Student> clazz2Students = new ArrayList<Student>();
        Student clazz2_Student1 = new Student("生命在于运动","张三","17","男");
        clazz2Students.add(clazz2_Student1);
        Student clazz2_Student2 = new Student("生命在于运动","李四","19","女");
        clazz2Students.add(clazz2_Student2);
        Student clazz2_Student3 = new Student("生命在于运动","王五","17","男");
        clazz2Students.add(clazz2_Student3);
        Student clazz2_Student4 = new Student("生命在于运动","赵六","20","男");
        clazz2Students.add(clazz2_Student4);
        Student clazz2_Student5 = new Student("生命在于运动","马奇","18","女");
        clazz2Students.add(clazz2_Student5);
        clazz2.setStudents(clazz2Students);
        mClazzs.add(clazz2);

        //初始化三班
        Clazz clazz3 = new Clazz("三班","201503");
        List<Student> clazz3Students = new ArrayList<Student>();
        Student clazz3_Student1 = new Student("生命在于运动","张三","17","男");
        clazz3Students.add(clazz3_Student1);
        Student clazz3_Student2 = new Student("生命在于运动","李四","19","女");
        clazz3Students.add(clazz3_Student2);
        Student clazz3_Student3 = new Student("生命在于运动","王五","17","男");
        clazz3Students.add(clazz3_Student3);
        Student clazz3_Student4 = new Student("生命在于运动","赵六","20","男");
        clazz3Students.add(clazz3_Student4);
        Student clazz3_Student5 = new Student("生命在于运动","马奇","18","女");
        clazz3Students.add(clazz3_Student5);
        clazz3.setStudents(clazz3Students);
        mClazzs.add(clazz3);

        //初始化四班
        Clazz clazz4 = new Clazz("四班","201504");

        List<Student> clazz4Students = new ArrayList<Student>();
        Student clazz4_Student1 = new Student("生命在于运动","张三","17","男");
        clazz4Students.add(clazz4_Student1);
        Student clazz4_Student2 = new Student("生命在于运动","李四","19","女");
        clazz4Students.add(clazz4_Student2);
        Student clazz4_Student3 = new Student("生命在于运动","王五","17","男");
        clazz4Students.add(clazz4_Student3);
        Student clazz4_Student4 = new Student("生命在于运动","赵六","20","男");
        clazz4Students.add(clazz4_Student4);
        Student clazz4_Student5 = new Student("生命在于运动","马奇","18","女");
        clazz4Students.add(clazz4_Student5);
        clazz4.setStudents(clazz4Students);
        mClazzs.add(clazz4);
    }
}