ListView的使用与优化

在实际开发中，会经常需要在程序中以列表的形式向用户呈现数据，并支持滑动点击等事件，那么此时我们就需要用到ListView这一控件。这篇博客就围绕ListView的使用方法和优化方法展开:

四种Adapter

一个ListView通常有两个功能：首先是把数据填充到（自定义）布局文件呈现出来，第二是支持用户点击交互。第一个功能很好理解，第二个功能实际上我们也只需要实现一个OnItemClickListener的接口即可。

使用ListView需要的三种必备元素：

一，自定义或者用户提供的布局文件
二，数据来源
三，连接数据和视图之间的adapter

前两项都很好理解，重点就在于最后一项adapter的设计与使用。Android为我们提供了四种可用的Adapter，分别适应不同的场景:

• ArrayAdapter 用来绑定一个数组，支持泛型操作
• SimpleAdapter 用来绑定在xml中定义的控件对应的数据
• SimpleCursorAdapter 用来绑定游标得到的数据
• BaseAdapter 通用的基础适配器

BaseAdapter最灵活，在实际项目中使用的最多，唯一的缺点是需要重写的方法最多。这篇博客着重介绍使用BaseAdapter。

直接上代码：

public class MainActivity extends AppCompatActivity {

    private ListView mListView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //寻找控件
        mListView = (ListView) findViewById(R.id.list);
        //初始化adapter，第二个参数是数据源
        MyAdapter mMyAdapter = new MyAdapter(this, Ipsum.getData());
        //为ListView设置点击事件
        mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Log.v("MyAdapter", "You clicked " + position + " listview item");
            }
        });
        mListView.setAdapter(mMyAdapter);
    }
}

然后是MainActivity和ListView每一个Item的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.seven.hzxubowen.listviewtest.MainActivity">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/list_item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        />

    <TextView
        android:id="@+id/list_item_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/list_item_title"
        android:textSize="15sp"
        />

    <Button
        android:id="@+id/list_item_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Click me"
        android:focusable="false"
        />
</RelativeLayout>

接着是继承自BaseAdapter的自定义Adapter, 需要注意的是，我们需要重写四个方法，分别是getCount，getItem，getItemId以及getView。其中最重要的getView方法，我们所做的优化也在这里体现。

public class MyAdapter extends BaseAdapter {

    private LayoutInflater mLayoutInflater;
    private ArrayList<HashMap<String, Object>> mDataList;

    public MyAdapter(Context context, ArrayList<HashMap<String, Object>> dataList){
        mLayoutInflater = LayoutInflater.from(context);
        mDataList = dataList;
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent){
        ViewHolder mViewHolder;
        Log.v("BaseAdapter", "getView " + position + " " + convertView);
        //判断是否需要缓存
        if(convertView == null){
            //实例化自定义布局
            convertView = mLayoutInflater.inflate(R.layout.list_item, null);
            mViewHolder = new ViewHolder();
            mViewHolder.mTitleText = (TextView) convertView.findViewById(R.id.list_item_title);
            mViewHolder.mContentText = (TextView) convertView.findViewById(R.id.list_item_content);
            mViewHolder.mButton = (Button) convertView.findViewById(R.id.list_item_button);
            convertView.setTag(mViewHolder);
        }else{
            //通过tag找到缓存的布局
            mViewHolder = (ViewHolder) convertView.getTag();
        }
        //设置布局中的控件 
        mViewHolder.mTitleText.setText(mDataList.get(position).get("ItemTitle").toString());
        mViewHolder.mContentText.setText(mDataList.get(position).get("ItemContent").toString());
        mViewHolder.mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.v("BaseAdapter", "you clicked " + position + " button");
            }
        });

        return convertView;
    }

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

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


    class ViewHolder{
        TextView mTitleText;
        TextView mContentText;
        Button mButton;
    }

}

下面讲一下，如何通过viewHolder优化ListView的使用体验的。需要注意的是，在getView函数中，我们可以直接加载实例布局，这样的话依然可以达到预想的效果。但是如果listView中的数据源过多（假设是3000）那么我们就需要绘制3000次，并且在滑动的过程中需要不断的绘制，在实际使用中，会造成卡顿。所以我们需要使用一些技巧，来优化用户体验。

ViewHolder模式是提高ListView效率的一个很重要的方法。ViewHolder模式充分利用ListView的视图缓存机制，避免了每次在调用getView()的时候都去通过findViewById()实例化控件。
在MyAdapter中，我在每一次需要getView()时（即用户通过该滑动，是屏幕上出现新的item）都打印了此时converView的情况，如下图:


可以看到，当屏幕出现前十一项数据时，此时都是第一次出现在屏幕中，所以convertView都是空。而当用户滑动屏幕，使ListView出现后面的数据时，convertView都有自己的值了，说明缓存已经起到了效果。注意观察标注有红线的log，发现convertView的值是可以一一对应的，这就说明，我们只绘制了前十一项数据所需要的view，当用户滑动，是后面数据呈现时，是复用了前面所绘制的view，只是根据我们缓存在ViewHolder中对控件的引用，去更改控件的值。这就使得ListView所需要绘制的Item大大减少，从而达到优化用户体验的目的。