Android常用控件之GridView与ExpandableListView的用法

概述

1、GridView：与ListView相比，可以显示多列，xml布局时其属性numColumns可以设置显示的列数。
2、ExpandableListView：与ListView相比，可以让每一列单元都拥有子列表。

内容

GridView

显示3列和多行的图片以及名称
布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#000000"
                android:layout_margin="15dp"
                android:orientation="vertical">

    <GridView
        android:id="@+id/grid_view"
        android:background="#88000000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numColumns="3">

    </GridView>

</LinearLayout>

每个表单元的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_centerHorizontal="true"
              android:gravity="center_horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
        android:id="@+id/item_imageview"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <TextView
        android:id="@+id/item_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

先写一个Fruit类

public class Fruit {
    private String name;
    private int img;

    public Fruit(String name, int img) {
        this.name = name;
        this.img = img;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }

}

接着建立一个GridView的适配器

public class FruitGridAdapter extends BaseAdapter {
    private List<Fruit> mFruits;
    private LayoutInflater mInflater;

    public FruitGridAdapter(List<Fruit> mFruits, LayoutInflater mInflater) {
        this.mFruits = mFruits;
        this.mInflater = mInflater;
    }

    @Override
    public int getCount() {
        return mFruits.size();
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        if(convertView==null){
            viewHolder = new ViewHolder();
            convertView = mInflater.inflate(R.layout.grid_item,null);
            viewHolder.imageView = (ImageView) convertView.findViewById(R.id.item_imageview);
            viewHolder.textView = (TextView) convertView.findViewById(R.id.item_textview);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }
        Fruit fruit = mFruits.get(position);
        viewHolder.imageView.setImageResource(fruit.getImg());
        viewHolder.textView.setText(fruit.getName());
        return convertView;
    }

    class ViewHolder{
        ImageView imageView;
        TextView textView;
    }
}

主活动

public class MainActivity extends Activity {
    private List<Fruit> mFruits;
    private LayoutInflater mInflater;
    private GridView gridView;
    private FruitGridAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = (GridView) findViewById(R.id.grid_view);
        mInflater = this.getLayoutInflater();

        mFruits = new ArrayList<>();
        Fruit apple = new Fruit("apple", R.mipmap.a_logo1);
        Fruit pear = new Fruit("pear", R.mipmap.image);
        Fruit pineapple = new Fruit("pineapple", R.mipmap.pk);
        Fruit grape = new Fruit("grape", R.mipmap.ic_launcher);
        for (int i = 0; i < 20; i++) {
            mFruits.add(apple);
            mFruits.add(pear);
            mFruits.add(pineapple);
            mFruits.add(grape);
        }
        mAdapter = new FruitGridAdapter(mFruits,mInflater);
        gridView.setAdapter(mAdapter);
    }

}

结果演示

ExpandableListView

写一个可以显示各个班级信息和班级学生信息的活动
布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@mipmap/search_frame"
              android:orientation="vertical">

    <ExpandableListView
        android:id="@+id/expandable_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp">

    </ExpandableListView>

</LinearLayout>

主单元项班级的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#55ff0000"
              android:gravity="center_horizontal"
              android:orientation="horizontal">

    <TextView
        android:id="@+id/clazz_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"/>

    <TextView
        android:id="@+id/clazz_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"/>

    <TextView
        android:id="@+id/students_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"/>
</LinearLayout>

子单元项学生的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#8800ffff"
              android:gravity="center_horizontal"
              android:orientation="horizontal">

    <TextView
        android:id="@+id/student_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"/>

    <TextView
        android:id="@+id/student_sex"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"/>

    <TextView
        android:id="@+id/student_age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"/>

</LinearLayout>

首先写个班级类

public class Clazz {
    private String clazzName;
    private String clazzNum;
    private List<Student> students;

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

    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 sex;
    private String age;

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

    public String getStudentName() {
        return studentName;
    }

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

    public String getSex() {
        return sex;
    }

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

    public String getAge() {
        return age;
    }

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

适配器

public class MyExpAdapter extends BaseExpandableListAdapter {
    private List<Clazz> mClazzs;
    private LayoutInflater mInflater;

    public MyExpAdapter(List<Clazz> mClazzs, LayoutInflater mInflater) {
        this.mClazzs = mClazzs;
        this.mInflater = mInflater;
    }

    @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 isExpanded, View convertView, ViewGroup parent) {

        GroupViewHolder gvh = null;
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.clazz_item, null);
            gvh = new GroupViewHolder();
            gvh.clazzName = (TextView) convertView.findViewById(R.id.clazz_name);
            gvh.clazzNum = (TextView) convertView.findViewById(R.id.clazz_num);
            gvh.studentsNum = (TextView) convertView.findViewById(R.id.students_num);
            convertView.setTag(gvh);
        } else {
            gvh = (GroupViewHolder) convertView.getTag();
        }

        Clazz clazz = mClazzs.get(groupPosition);
        gvh.clazzName.setText(clazz.getClazzName());
        gvh.clazzNum.setText(clazz.getClazzNum());
        gvh.studentsNum.setText(clazz.getStudents().size() + "人");
        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

        ChildViewHolder cvh = null;
        if(convertView==null) {
            cvh = new ChildViewHolder();
            convertView = mInflater.inflate(R.layout.students_item, null);
            cvh.studentName = (TextView) convertView.findViewById(R.id.student_name);
            cvh.studentSex = (TextView) convertView.findViewById(R.id.student_sex);
            cvh.studentAge = (TextView) convertView.findViewById(R.id.student_age);
            convertView.setTag(cvh);
        }else{
            cvh = (ChildViewHolder) convertView.getTag();
        }

        Student student = mClazzs.get(groupPosition).getStudents().get(childPosition);
        cvh.studentName.setText(student.getStudentName());
        cvh.studentSex.setText(student.getSex());
        cvh.studentAge.setText(student.getAge());
        return convertView;
    }

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

    private class GroupViewHolder {
        TextView clazzName;
        TextView clazzNum;
        TextView studentsNum;
    }

    private class ChildViewHolder {
        TextView studentName;
        TextView studentSex;
        TextView studentAge;
    }
}

主活动

public class MainActivity extends Activity {
    private List<Clazz> mClazzs;
    private ExpandableListView mExpandableListView;
    private MyExpAdapter mMyExpAdapter;
    private LayoutInflater mInflater;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mExpandableListView = (ExpandableListView)findViewById(R.id.expandable_listview);
        initData();
        mInflater = getLayoutInflater();
        mMyExpAdapter = new MyExpAdapter(mClazzs,mInflater);

        mExpandableListView.setAdapter(mMyExpAdapter);
    }

    private void initData() {
        mClazzs = new ArrayList<>();
        Clazz clazz1 = new Clazz("一班","201501");
        Clazz clazz2 = new Clazz("二班","201502");
        Clazz clazz3 = new Clazz("三班","201503");
        Clazz clazz4 = new Clazz("四班","201504");

        List<Student> students = new ArrayList<>();
        Student zhangsan = new Student("张三","男","21");
        Student lisi = new Student("李四","女","20");
        Student wangwu = new Student("王五","男","22");
        Student zhaoliu = new Student("赵六","女","19");
        students.add(zhangsan);
        students.add(lisi);
        students.add(wangwu);
        students.add(zhaoliu);

        clazz1.setStudents(students);
        clazz2.setStudents(students);
        clazz3.setStudents(students);
        clazz4.setStudents(students);

        mClazzs.add(clazz1);
        mClazzs.add(clazz2);
        mClazzs.add(clazz3);
        mClazzs.add(clazz4);

    }
}

结果演示