自定义多选列表视图Android

Question

I have been trying create a multiselected ListView like it looks on picture in this link: picture When user unchecked the checkbox in the top-left corner listviewItem layout must be changed to unchecked state. Now I use it:

public class ProcedureAdapter : BaseAdapter<Procedure>
{
    List<Procedure> items;
    Activity context;
    Dictionary<int, bool> CheckedItems = new Dictionary<int, bool>();
    public ProcedureAdapter(Activity context, List<Procedure> items)
        : base()
    {
        this.context = context;
        this.items = items;
        for (int i = 0; i < items.Count; i++)
        {
            CheckedItems.Add(i, false);
        }
    }
    public override long GetItemId(int position)
    {
        return position;
    }
    public override Procedure this[int position]
    {
        get { return items[position]; }
    }
    public override int Count
    {
        get { return items.Count; }
    }

    public void toggleCheck(int position)
    {
        if (CheckedItems.ContainsKey(position))
        {
            CheckedItems[position] = !CheckedItems[position];
            base.NotifyDataSetChanged();
        }
    }
    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        var item = items[position];
        View view = convertView;
        if (view == null) 
            view = context.LayoutInflater.Inflate(Resource.Layout.ProcedureListViewItem, null);

        if (!CheckedItems.ContainsKey(position))
            CheckedItems.Add(position, false);

        if (CheckedItems[position])
        {
            checkBox.Visibility = ViewStates.Visible;
            checkBox.Checked = true;
            ProcedureTypeImage.Visibility = ViewStates.Gone;
        }
        else
        {
            checkBox.Visibility = ViewStates.Gone;
            checkBox.Checked = false;
            ProcedureTypeImage.Visibility = ViewStates.Visible;
        }



        return view;
    }
}

In the activity:

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        var view = inflater.Inflate(Resource.Layout.ProceduresLayout, container, false);
        listView = view.FindViewById<ListView>(Resource.Id.listView1);
        listView.ItemLongClick += listView_ItemLongClick;
        procAdapter = new ProcedureAdapter(Activity, procedures);
        listView.Adapter = procAdapter;

        return view;
    }

    void listView_ItemLongClick(object sender, AdapterView.ItemLongClickEventArgs e)
    {
        procAdapter.toggleCheck(e.Position);
    }

but i faced with problem: how can I change layout when user unchecked the checkbox? I have tried processing CheckedChange event in the Adapter, but how I will know position of this ListViewItem? My solution seems to me not very good, please give me advice how can I do it better. I was wondering if you show to me a simple example on C# or Java. Thanks

Answer 1

I made a simple example that might help you. It's a list and each list item has a TextView and CheckBox. Text view is showing position in green or red color depending on if check box checked or not. It is simplified version of your problem. Don't know if it's best solution but it will work.

Only thing to note. Since views are being reused when you bind check box it can trigger CheckedChange event. That is why Tag is first changed when doing the binding.

using System.Globalization;
using Android.App;
using Android.Graphics;
using Android.Views;
using Android.Widget;
using Object = Java.Lang.Object;

namespace AndroidApplication1
{
    public class LvAdapter : BaseAdapter
    {
        private readonly Activity _context;
        public bool[] Bools = new bool[15];

        public LvAdapter(Activity context)
        {
            _context = context;
        }

        public override Object GetItem(int position)
        {
            return null;
        }

        public override long GetItemId(int position)
        {
            return position;
        }

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            ViewHolder vh;

            var view = convertView;
            if (view == null)
            {
                view = _context.LayoutInflater.Inflate(Resource.Layout.list_item, parent, false);
                vh = new ViewHolder();
                vh.Initialize(view, this);
                view.Tag = vh;
            }
            vh = view.Tag as ViewHolder;
            if (vh != null) vh.Bind(position, Bools);
            return view;
        }

        public override int Count
        {
            get { return Bools.Length; }
        }

        private class ViewHolder : Object
        {
            private TextView _text;
            private CheckBox _check;

            public void Initialize(View view, LvAdapter adapter)
            {
                _text = view.FindViewById<TextView>(Resource.Id.tvText);
                _check = view.FindViewById<CheckBox>(Resource.Id.cbCheck);

                _check.CheckedChange += (sender, args) =>
                {
                    var tagHoldr = (((View) sender).Tag) as TagHolder;
                    adapter.Bools[tagHoldr.Positon] = args.IsChecked;
                    tagHoldr.TextView.SetTextColor(args.IsChecked ? Color.Green : Color.Red);
                };
            }

            public void Bind(int position, bool[] bools)
            {
                _check.Tag = new TagHolder { Positon = position, TextView = _text };
                _text.Text = position.ToString(CultureInfo.InvariantCulture);
                _check.Checked = bools[position];
                _text.SetTextColor(bools[position] ? Color.Green : Color.Red);
            }
        }

        private class TagHolder : Object
        {
            public int Positon { get; set; }
            public TextView TextView { get; set; }
        }
    }
}