ListView控件的使用2

        前面讲到了ListView的简单用法，将一系列数据显示到屏幕上，但是那样可能有些单调，现在来对ListView的界面进行定制，让它来显示更加丰富的内容。这里我们就准备一组NBA球员的图片，分别用来对应之前显示的球员名字。

        首先，我们来定义一个实体类，作为ListView适配器的适配类型，新建Player类，代码如下：

       

Player类只有两个字段，name代表球员的名称，imageId代表对应球员的图片ID

然后需要给ListView的子项指定一个自定义的布局，在layout目录下新建player_item.xml，代码如下：

<?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">

    <ImageView
        android:id="@+id/player_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/player_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp" />

</LinearLayout>

其中，ImageView和TextView分别设置了子项布局的名称和图片的ID。TextView中还设置了在垂直方向上居中显示，距离左边界10dp。

现在适配器的实体类和子项布局都有了，接下来我们创建一个自定义的适配器，让这个适配器继承自ArrayAdapter，并将泛型指定为Player类，如下：

package com.example.listview3;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextClock;
import android.widget.TextView;

import java.util.List;

/**
 * Created by 79986 on 2017/3/13.
 */

public class PlayerAdapter extends ArrayAdapter<Player> {

    private int resourceId;

    //重写ArrayAdapter类的一组构造函数
    public PlayerAdapter(Context context , int textViewResourceId , List<Player> objects){
        super(context,textViewResourceId,objects);
        resourceId = textViewResourceId;
    }

    @Override  //重写getView方法，当子项被滚动到屏幕内的时候，会调用该方法
    public View getView(int position, View convertView, ViewGroup parent){
        Player player = getItem(position); //获取当前项的Player实例
        View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,
                false); //通过LayoutInflater来为子项加载我们传入的布局
        ImageView playerImage = (ImageView) view.findViewById(R.id.player_image); 
        TextView playerName = (TextView) view.findViewById(R.id.player_name);
        playerImage.setImageResource(player.getImageId());
        playerName.setText(player.getName());
        return view;
    }

}

调用View的findViewById方法来获取图片和名称的实例，再分别调用它们的两个set方法来设置显示的图片和文字，最后将布局返回就可以了，这样，我们的自定义适配器就完成了。

接下来我们修改MainActivity中的代码：

package com.example.listview3;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<Player> playerList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPlayers();// 初始化球员
        PlayerAdapter playerAdapter = new PlayerAdapter(MainActivity.this, R.layout.player_item,playerList);
        ListView listView = (ListView) findViewById(R.id.list_view3);
        listView.setAdapter(playerAdapter);
        
    }

    private void initPlayers(){
        for (int i=0; i<2; i++){
            Player curry = new Player("Curry",R.drawable.curry_pic);
            playerList.add(curry);
            Player durant = new Player("Durant",R.drawable.durant_pic);
            playerList.add(durant);
            Player thompson = new Player("Thompson",R.drawable.thompson_pic);
            playerList.add(thompson);
            Player green = new Player("Green",R.drawable.green_pic);
            playerList.add(green);
            Player barnes = new Player("Barnes",R.drawable.barnes_pic);
            playerList.add(barnes);
            Player igudala = new Player("Igudala",R.drawable.igudala_pic);
            playerList.add(igudala);
            Player liviston = new Player("Liviston",R.drawable.livisiton_pic);
            playerList.add(liviston);
            Player meagge = new Player("Meagge",R.drawable.meagge_pic);
            playerList.add(meagge);
            Player mikao = new Player("Mikao",R.drawable.mikao_pic);
            playerList.add(mikao);
            Player west = new Player("West", R.drawable.west_pic);
            playerList.add(west);

        }
    }
}

这里添加了一个initPlayers()方法，用来初始化球员的信息，在Player的构造函数中，将球员的姓名以及球员图片的ID传进去，然后把创建好的对象添加到playerList列表中，最后通过for循环来多现实几页数据。现在运行程序，显示如下：

这样，我们就将每个名字对应的图片添加进来了，我们在这一环节中，主要做的就是添加了一个Player的实体类，它的构造函数用于接受传递的数据。以及一个player_item.xml的布局文件，用来对子项布局进行名称和图片的加载。最后是创建一个自定义的适配器，用于传递数据给ListView控件。

重点： 上面我们已经完成了界面内容的丰富，但是还有一些细节需要优化，来提升程序的运行效率。

             可以看到，在PlayerAdapter类的getiVew()方法中，每当有子项滚动到屏幕内时，都加调用一次getView()方法，都会重新加载一遍，当ListView中有很多数据切屏幕快速滑动的时候，就有可能成为性能的瓶颈。现在我们来想办法优化一下。

             仔细观察会发现，getView()方法中还有一个参数convertView，这个参数用于将之前加载好的布局缓存起来，以便之后重用。那我们就可以这样来优化程序：

优化一：

@Override
public View getView(int position, View convertView, ViewGroup parent){
    Fruit fruit = getItem(position);  //获取滑动到屏幕内的fruit的实例
    View view;
    if(convertView == null){
        view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
    }else{
        view = convertView;
    }

             

看到PlayerAdapter这部分的代码，就是优化的部分，如果convertView为空，则使用layoutInflater去加载布局，如果不为空，就直接调用convertView缓存中的布局，这样我们就避免了每次都要重新调用getView()方法来加载布局，节省了时间以及提高了程序的运行效率

优化二：  经过上面的优化，现在我们已经不需要重复去加载布局了，但是每次在getView()方法中，还是会调用View的findViewById()方法来获取一次控件的实例。现在，我们来借助ViewHolder对这部分进行性能优化，修改PlayerAdapter自定义适配器中的代码：

@Override  //重写getView方法，当子项被滚动到屏幕内的时候，会调用该方法
public View getView(int position, View convertView, ViewGroup parent){
    Player player = getItem(position); //获取当前项的Player实例
    View view;
    ViewHolder viewHolder;
    if(convertView == null){
        view=LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
        viewHolder = new ViewHolder();
        viewHolder.playerImage = (ImageView) view.findViewById(R.id.player_image);
        viewHolder.playerName = (TextView) view.findViewById(R.id.player_name);
        view.setTag(viewHolder);  //将viewHolder存储在view中（图片和名称的实例）
    }else{
        view = convertView;
        viewHolder = (ViewHolder) view.getTag(); //不为空，就直接获取内部类中缓存过的实例
    }
    ImageView playerImage = (ImageView) view.findViewById(R.id.player_image);
    TextView playerName = (TextView) view.findViewById(R.id.player_name);
    playerImage.setImageResource(player.getImageId());
    playerName.setText(player.getName());
    return view;
}

//新增内部类，用于对控件的实例进行缓存
class ViewHolder{

    ImageView playerImage;

    TextView playerName;

}

主要还是对蓝色代码部分进行了优化，但是首先要现在下面新增一个内部类，用于对控件的实例进行缓存。蓝色代码部分就是针对布局是否加载过来进行判断的，相信这里也不难理解了。

现在通过这两步优化，我们的程序运行效率就要比之前提高了很多。

到这里，我们已经丰富了界面的内容，并且优化了程序的性能（运行效率），接下来，我们来添加一个点击事件，当我们点击任意一个子项的时候，弹出提示：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initPlayers();// 初始化球员
    PlayerAdapter playerAdapter = new PlayerAdapter(MainActivity.this, R.layout.player_item,playerList);
    ListView listView = (ListView) findViewById(R.id.list_view3);
    listView.setAdapter(playerAdapter);
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Player player = playerList.get(position);  //通过positon参数判断用户点击的是哪一个子项，然后获取对应的球员
            Toast.makeText(MainActivity.this, player.getName(),Toast.LENGTH_SHORT).show();
        }
    });
}

我们对MainActivity代码部分进行了修改，我们使用setOnItemClickListener（）方法为ListView注册了一个监听器，当用户点击任何一个子项时，就会回调onItemClick()方法。在这个方法中，通过position参数来确定用户点击的是哪一个子项，然后获取对应的球员，最后通过Toast来显示出来。 运行程序，如下：

到这里，关于控件ListView的使用以及优化问题，就先说到这里，后面可以深入的自行探讨。