Xamarin Android - ListViews Part 2 of 2

Continuing on from an older post, we will modify our listview to display 2 columns.  Ultimately, we will put an image in the left column and text in the right column.  Currently we have created an ArrayAdapter which takes a list/collection of strings and displays each row in a template.  The template was defined in a layout TextViewItem.axml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textItem"
    android:textSize="44sp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

What we have was an ArrayAdapter which required the above row definition with a collection of strings.  This worked fine to display the ToString() of either the string collection you provided or the object collection you used in the definition.

Moving forward this post will use a more advanced row template to display a string or an object collection.  This ultimately gives us more flexibility.  To do this we will create a custom Adapter which manages the displays aspect of the listview.  By doing this we can provide a collection of objects and then through our custom adapter we can position each property within our new row template.  Our new row template TextViewItem2.axml will be defined by the following.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <LinearLayout
        android:orientation="horizontal"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout1">
        <TextView
            android:id="@+id/textItem1"
            android:textSize="44sp"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent" />
        <TextView
            android:id="@+id/textItem2"
            android:textSize="44sp"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent" />
    </LinearLayout>
</LinearLayout>

Here you can see we have a LinearLayout parent and a LinearLayout (horizontal orientation) established to display 2 textviews side by side.

Now to the adapter, as mentioned above we have to build out a custom adapter as this adapter will be responsible for take each item in our collection and mapping our object properties to specific controls in the above textviewitem template.

   public class AboutScreenAdapter : BaseAdapter<MyDetail>
    {
        List<MyDetail> _items;
        Activity _context;
        public AboutScreenAdapter(Activity context, List<MyDetail> items) : base()
        {
            this._context = context;
            this._items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override MyDetail this[int position]
        {
            get { return _items[position]; }            
        }

        public override int Count
        {
            get { return _items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            View view = convertView; // re-use an existing view, if one is available
            if (view == null) // otherwise create a new one
                view = _context.LayoutInflater.Inflate(Resource.Layout.TextViewItem2, null);
            
            //view.FindViewById<TextView>(Android.Resource.Id.text).Text = items[position];

            view.FindViewById<TextView>(Resource.Id.textItem1).Text = _items[position].Image;
            view.FindViewById<TextView>(Resource.Id.textItem2).Text = _items[position].Detail;
            return view;
        }
    }

Above you can see, we provide our object collection List<MyDetail> items and the row template is defined (bold) TextViewItem2 which is established by a layout in our layouts folder TextViewItem2.axml

image

Author

david

comments powered by Disqus

Categories

Recent Tweets

@jeffrey_doucet @Brian_Bancroft Canadians, self define themselves as NOT American, rather than being Proud Canadians
Retweeted by @dyardy Why do so many Canadians obsess over American policy that won’t impact us while being fairly ambivalent to day-to-d… twitter.com/i/web/status/9…
@melrobbins I was looking for 50$ earlier today, and still can't find it...ideas :)
Trump Watches Up To 8 Hours Of TV Per Day | HuffPost #SmartNews ===that explains everything huffingtonpost.com/entry/trump-te…
Retweeted by @dyardy Boston https://t.co/QmtMIF8P0F