Xamarin.Android 開發筆記系列(1) - Listview的運用

Xamarin.Android 開發筆記系列(1) - ListView的運用
開發 Xamarin.Android 的過程中遇到許許多多問題，也參考了許許多多的文章，作為回饋，希望把它紀錄下來，自己作為筆記，也供大家參考。
yasuoyuhao - 2018/01/29

Listview是一種可重複利用的資源View，雖然現在主流都使用Recyclerview，但Listview的使用是初入Android領域的必備知識呦。

Listview需要一個Adapter來裝資料，再把資料抽出來放到Listview來顯示。

官方文件參考

首先我們區要先建立一個Model來當作Adapter的基礎。

1. 建立Model

• 新建一個C#檔

public struct Task_Func_Model
    {
        public String FuncTitle { get; set; }
        public String FuncSubTitle { get; set; }
        public int Image_Resource_Drawable { get; set; }
    }

這邊Model代表的是標題，副標題，還有加載圖。

---

2. 製作Listview Layout

• 新開一個XML資源檔。
• 加入一個Listview的元件。

• 新開一個XML資源檔。
• 這邊是載入每個Listview中的Layout，我喜歡把它叫做Cell。

• 長這樣子

  
  
  

  cell

layout到這邊就大功告成了！

---

3. 建立Adpter

• 新建一個Adpter控制Listview資料

public class CPCTaskFuncAdapter : BaseAdapter
    {

        List items;
        Activity context;

        public CPCTaskFuncAdapter(Activity context, List items)
        {
            this.items = items;
            this.context = context;
        }

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

        public override Task_Func_Model this[int index]
        {
            get
            {
                return items[index];
            }
        }

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


        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            View view = convertView;

            // 將剛剛做好的cell讀進來。

            if (view == null)
            {
                view = context.LayoutInflater.Inflate(Resource.Layout.TaskFunc_Cell_Layout, null);
            }

            var cpcTaskFuncInfo = items[position];


            // 功能TitleView
            TextView funcTitle = view.FindViewById(Resource.Id.funcTitle_TextView);
            TextView funcSubTitle = view.FindViewById(Resource.Id.funcSubTitle_TextView);

            // 功能icon
            ImageView funcIcnoImage = view.FindViewById(Resource.Id.funcIcno_ImageView);

            funcTitle.Text = cpcTaskFuncInfo.FuncTitle;
            funcSubTitle.Text = cpcTaskFuncInfo.FuncSubTitle;
            funcIcnoImage.SetImageResource(cpcTaskFuncInfo.Image_Resource_Drawable);
            
            
            return view;
        }

    }

---

4. 建立Activity

• 新建一個Activity控制Listview頁面

[Activity(Label = "Task_Func_Activity", ScreenOrientation = ScreenOrientation.Portrait)]

    public class Task_Func_Activity : AppCompatActivity
    {
        private ListView taskFuncTableView;
        private CPC_Intent_Data_Model task_List_DataModel;
        private List dataFromCPCTaskFunc = new List();

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your application here
            InitView();
        }

        private void InitView()
        {
            SetContentView(Resource.Layout.TaskFunc_ListView);

            taskFuncTableView = FindViewById(Resource.Id.TaskFunc_listView);
            taskFuncTableView.FastScrollEnabled = true;

            SetupTaskFuncListView();
        }

        /// 

        /// if need add function, place go to Task_Func_Model, and Add CPC_Intent_Func_Model_Type.
        /// 
        private void SetupTaskFuncListView()
        {

            int number = Enum.GetNames(typeof(CPC_Intent_Func_Model_Type)).Count();

            for (int i = 0; i < number; i++)
            {
                var intTo_FuncType = (CPC_Intent_Func_Model_Type)Enum.ToObject(typeof(CPC_Intent_Func_Model_Type), i);
                var func_Model = new CPC_Intent_Func_Model(intTo_FuncType);
                var task_Func_Model = new Task_Func_Model
                {
                    FuncTitle = func_Model.funcTitle,
                    FuncSubTitle = func_Model.funcSubTitle,
                    Image_Resource_Drawable = func_Model.Image_Resource_Drawable
                };

                dataFromCPCTaskFunc.Add(task_Func_Model);
            }
// 建立model並且放入資料，再交給adapter做管理。
            var adapter = new CPCAndroidCustomizeCPCAdapter.CPCTaskFuncAdapter(this, dataFromCPCTaskFunc);
            taskFuncTableView.Adapter = adapter;
        }
}

所有的步驟都做完了，馬上執行畫面吧！

---

大功告成！

• 畫面應該要長這樣子：

listview

p.s.其中有需多資源檔，您可以自己去搜尋替換呦，如果你有更好的意見，歡迎寫下你的想法留言交流。

yasuoyuhao 2018/01/29