~楓花雪岳~: [X.Andriod] 自訂 ListView

星期一, 6月 27, 2016

[X.Andriod] 自訂 ListView

這篇官網文章內 Part 3 - Customizing a ListView's Appearance 有內建 ListView 的效果資料可以參考，實務上大概不會這麼幸運，直接套內建的就行，練習建立自訂的 ListView

Main.axml：就只有一個 ListView 控件

<?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">
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView1" />
</LinearLayout>

CustomListItem.axml：相當於 ListView Item，放一個 ImageView 並在 TableLayout 內放進四個 TextView

<?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">
    <ImageView
        android:src="@android:drawable/ic_menu_gallery"
        android:layout_width="match_parent"
        android:layout_height="123.0dp"
        android:id="@+id/imPhoto" />
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tableLayout1"
        android:stretchColumns="*">
        <TableRow
            android:id="@+id/tableRow1">
            <TextView
                android:text="姓名"
                android:layout_column="0"
                android:id="@+id/txtName"
                android:textSize="20dp" />
            <TextView
                android:text="性別"
                android:id="@+id/txtGender"
                android:textSize="20dp" />
        </TableRow>
        <TableRow
            android:id="@+id/tableRow2">
            <TextView
                android:text="到職日"
                android:layout_column="0"
                android:id="@+id/txtHireDate"
                android:textSize="20dp" />
            <TextView
                android:text="生日"
                android:id="@+id/txtBirthDate"
                android:textSize="20dp" />
        </TableRow>
    </TableLayout>
</LinearLayout>

MainActivity.cs

namespace ListViewBase
{
    [Activity(Label = "ListViewBase", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);

            List<Personalinfo> data = new List<Personalinfo>();
            data.Add(new Personalinfo() { Name = "JT", Gender = "男", HireDate = new DateTime(2008, 12, 11), BirthDate = new DateTime(1981, 12, 11), Photo = Resource.Drawable.ListView1 });
            data.Add(new Personalinfo() { Name = "SH", Gender = "女", HireDate = new DateTime(2011, 11, 11), BirthDate = new DateTime(1980, 1, 9) , Photo = Resource.Drawable.ListView2 });
            data.Add(new Personalinfo() { Name = "TY", Gender = "男", HireDate = new DateTime(2016, 6, 27), BirthDate = new DateTime(2014, 5, 5), Photo = Resource.Drawable.ListView3 });

            CustomeAdapter adapter = new CustomeAdapter(this, data);
            ListView list = FindViewById<ListView>(Resource.Id.listView1);
            list.Adapter = adapter;
        }
    }

    public class CustomeAdapter : BaseAdapter<Personalinfo>
    {
        private Activity _Context;
        private List<Personalinfo> _Data;

        public CustomeAdapter(Activity context, List<Personalinfo> data)
        {
            this._Context = context;
            this._Data = data;
        }

        public override int Count
        {
            get
            {
                return _Data.Count;
            }
        }

        public override Personalinfo this[int position]
        {
            get
            {
                return _Data[position];
            }
        }

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

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            View v = convertView;
            if (v == null)
                v = _Context.LayoutInflater.Inflate(Resource.Layout.CustomListItem, null);

            v.FindViewById<TextView>(Resource.Id.txtName).Text = $"姓名：{_Data[position].Name}";
            v.FindViewById<TextView>(Resource.Id.txtGender).Text = $"性別：{_Data[position].Gender}";
            v.FindViewById<TextView>(Resource.Id.txtBirthDate).Text = $"生日：{_Data[position].BirthDate.ToString("yyyy/MM/dd")}";
            v.FindViewById<TextView>(Resource.Id.txtHireDate).Text = $"到職日：{_Data[position].HireDate.ToString("yyyy/MM/dd")}";
            v.FindViewById<ImageView>(Resource.Id.imPhoto).SetImageResource(_Data[position].Photo);

            return v;
        }
    }

    public class Personalinfo
    {
        public string Name { get; set; }
        public string Gender { get; set; }
        public DateTime HireDate { get; set; }
        public DateTime BirthDate { get; set; }
        public int Photo { get; set; }
    }
}

Drawable 內圖片和 Resource.Designer

要把圖片加進 Drawable 內時發現，檔案名稱假如是 ListView-1.JPG、ListView-2.JPG 和 ListView-3.JPG 時，Project build 後 ID 都不會出現在 Resource.Designer 內，改成 ListView1.JPG、ListView2.JPG 和 ListView3.JPG 就 OK，避免檔案名稱內有符號囉

~楓花雪岳~

星期一, 6月 27, 2016

[X.Andriod] 自訂 ListView

沒有留言:

張貼留言