Android|ListView的简单使用

ListView是什么

 ???? ​ListView 列表视图，把数据组成一项项独立的item以列表的方式展示出来。item的布局由自定义的模板布局来决定。其中展示的数据也必须由我们编写代码填充。

LisView的使用步骤

1. xml布局文件部分

 ????首先我们的布局文件（例如MainActivity所对应的activity_main.xml）中要有这个控件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/lv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

 ????预览这个布局文件，我们可以看到它默认的布局。可以看到item和subitem组成独立的一行，他们紧挨着垂直排列。如果你仔细看的话，可以看到他们之间用一条很细的直线分割。

 ????接下来，我们需要编写填充ListView每一行的模板布局文件了。在这个模板布局文件中，我们规定每一行的数据以何种布局展示出来。例如，我想ListView以下面这种布局展示出来。

 ????我们现在开始编写这个模板布局文件。就暂且起名为 listview_template.xml 吧。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/iv"
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:scaleType="centerCrop"
        android:background="#000"></ImageView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv1"
            android:layout_width="200dp"
            android:layout_height="33dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="这是第一行文字"
            android:textSize="16sp"/>
        <TextView
            android:id="@+id/tv2"
            android:layout_width="200dp"
            android:layout_height="33dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="这是第二行文字"
            android:textSize="16sp"/>
        <TextView
            android:id="@+id/tv3"
            android:layout_width="200dp"
            android:layout_height="33dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="这是第三行文字"
            android:textSize="16sp"/>
    </LinearLayout>
</LinearLayout>

 ????实现的效果是这样的。黑色的位置用于填充图片，文字过会我们也需要自己设置。

2. Java代码部分

 ????首先就是要在activity中获取ListView对象了。拿到这个对象后需要设置它的适配器(Adapter)。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取Listview控件对象
        ListView lv = findViewById(R.id.lv);
        //设置适配器(这个适配器必须继承android.widget.BaseAdapter类)
        lv.setAdapter(new MyListViewAdapter(this));
    }
}

 ????关于适配器，我的理解就是，你把零散的数据交给适配器(Adapter),它就可以根据定义好的模板适配出ListView想要的每一行item的布局。下面我们来编写这个适配器(MyListViewAdapter)。

public class MyListViewAdapter extends BaseAdapter {
    //这个对象用于实例化模板布局
    private LayoutInflater inflater;

    /**
     * 有参构造，使用适配器必须传入一个上下文对象
     * @param context
     */
    public MyListViewAdapter(Context context) {
        //注入LayoutInflater对象
        inflater = LayoutInflater.from(context);
    }

    /**
     * 设置ListView展示多少行，一般不写死。
     * 多少行数据需要从数据库查。
     * 这里我们为了简单演示就写20吧。
     * @return
     */
    @Override
    public int getCount() {
        return 20;
    }
    /**
     * 用于封装模板布局中的控件
     */
    static class ViewHolder {
        private ImageView iv;
        private TextView tv1;
        private TextView tv2;
        private TextView tv3;
    }
    /**
     * 为 ListView 的每一项 item 提供一个视图。
     * @param position
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        /*
            A ViewHolder keeps references to children views to avoid unneccessary calls
        to findViewById() on each row.
         */
        ViewHolder holder = null;
        /*
            When convertView is not null, we can reuse it directly, there is no need
        to reinflate it. We only inflate a new View when the convertView supplied
        by ListView is null.
        */
        if (convertView == null) {

            convertView = inflater.inflate(R.layout.listview_template,null);
            /*
             Creates a ViewHolder and store references to the four children views
            we want to bind data to.
             */
            holder = new ViewHolder();
            holder.iv = convertView.findViewById(R.id.iv);
            holder.tv1 = convertView.findViewById(R.id.tv1);
            holder.tv2 = convertView.findViewById(R.id.tv2);
            holder.tv3 = convertView.findViewById(R.id.tv3);
            //把ViewHolder存放view中，以便之后复用
            convertView.setTag(holder);

        } else {
            /*
                Get the ViewHolder back to get fast access to the TextView
             and the ImageView.
             */
            holder = (ViewHolder) convertView.getTag();
        }
        //填充数据
        holder.iv.setImageResource(R.drawable.pkq);//这里使用本地的一张图片
        holder.tv1.setText("皮卡丘,小精灵的一种。");
        holder.tv2.setText("脸颊两边有小小的电力袋。");
        holder.tv3.setText("遇到危险时就会放电。");

        return convertView;
    }

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

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

   

}

3. 运行项目

参考:Android Adapter以及getView()方法的理解