ListView有CheckBox，滑動混亂問題解決

相信很多人都遇到過這樣的問題，ListView中有checkbox,我們開始選中幾個，但是一滑動，發現後面也有被選中的，再往上滑動，整個列表的選中狀態都亂了，就好像這樣：

那麼我們需要想個辦法解決這個問題，常用辦法就是用一個Map把選中狀態的位置記錄在Map中，然後在繪製ListView時，通過Map裏面的值進行判斷哪些被勾選了，這樣就不會亂了。

佈局文件

因爲功能比較簡單，我就直接上代碼了，代碼裏面也有註釋：
activity_main.xml

<?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"
    tools:context="com.sunao.yuandemo.MainActivity">

    <ListView
        android:id="@+id/lv_check"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:dividerHeight="5dp"
        />
</RelativeLayout>

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/tv_item"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1"/>
    <CheckBox
        android:id="@+id/cb_check"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

實現辦法

先看ListView的適配器的代碼：
CheckBoxListViewAdapter.xml

/**
 * Created by yuankundong on 2016/02/29.
 */
public class CheckBoxListViewAdapter extends BaseAdapter{

    private Context context;
    private LayoutInflater inflater;
    private List<String> itemList = new ArrayList<String>();

    //用於標記被選中的checkbox
    private  Map<Integer, Boolean> isCheckedMap = new HashMap<>();

    public CheckBoxListViewAdapter(Context context){
        this.context = context;
        inflater = LayoutInflater.from(context);
    }


    //給ListView設置數據源用的方法
    public void setItems(List<String> itemList) {
        this.itemList.clear();
        this.itemList = itemList;
        notifyDataSetChanged();
    }
    @Override
    public int getCount() {
        return itemList.size();
    }

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

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

    @Override
    public View getView(final int i, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (convertView == null) {

            holder = new ViewHolder();

            convertView = inflater.inflate(R.layout.item, parent, false);
            holder.tvItem = (TextView) convertView.findViewById(R.id.tv_item);
            holder.checkBox = (CheckBox) convertView.findViewById(R.id.cb_check);

            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

            holder.tvItem.setText(itemList.get(i));

        //判斷是否記錄了勾選了的Checkbox
        if (isCheckedMap.get(i) != null && isCheckedMap.get(i)) {
            holder.checkBox.setChecked(true);
        } else {
            holder.checkBox.setChecked(false);
        }
        holder.checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                CheckBox checkBox = (CheckBox) v.findViewById(R.id.cb_check);
                if (checkBox.isChecked()) {
                    isCheckedMap.put(i, true);

                }else {
                    isCheckedMap.remove(i);
                }

            }
        });

        return convertView;
    }

    class ViewHolder {
        TextView tvItem;
        CheckBox checkBox;
        }
}

控制CheckBox不混亂的主要辦法，就是一開始，我實例了一個Map，往下看，在getView方法中，我又給CheckBox設置了點擊事件，當CheckBox是選中狀態的時候，就添加到map中，否則從map中移除：

holder.checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                CheckBox checkBox = (CheckBox) v.findViewById(R.id.cb_check);
                if (checkBox.isChecked()) {
                    isCheckedMap.put(i, true);

                }else {
                    isCheckedMap.remove(i);
                }

            }
        });

這樣，我們在繪製ListView的時候做的判斷就能保證CheckBox的選中狀態不會亂掉了。

if (isCheckedMap.get(i) != null && isCheckedMap.get(i)) {
            holder.checkBox.setChecked(true);
        } else {
            holder.checkBox.setChecked(false);
        }

下面是MainActivity的代碼：
MainActivity.xml

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    private CheckBoxListViewAdapter checkBoxListViewAdapter;

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

        //初始化listView控件
        listView = (ListView) findViewById(R.id.lv_check);

        //實例化適配器，設置適配器
        checkBoxListViewAdapter = new CheckBoxListViewAdapter(this);
        listView.setAdapter(checkBoxListViewAdapter);

        //數據源
        List<String> data = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            data.add("當前是" + i);
        }

        //設置數據
        checkBoxListViewAdapter.setItems(data);


    }
}

這樣，我們就解決了ListView有CheckBox時，滑動混亂的問題，效果如下：

下載點這裏