Xamarin.Android 開發筆記系列(1) - ListView的運用
開發 Xamarin.Android 的過程中遇到許許多多問題，也參考了許許多多的文章，作為回饋，希望把它紀錄下來，自己作為筆記，也供大家參考。
yasuoyuhao - 2018/01/29
Listview是一種可重複利用的資源View，雖然現在主流都使用Recyclerview，但Listview的使用是初入Android領域的必備知識呦。
Listview需要一個Adapter來裝資料，再把資料抽出來放到Listview來顯示。
首先我們區要先建立一個Model來當作Adapter的基礎。
- 建立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代表的是標題，副標題，還有加載圖。
- 製作Listview Layout
- 新開一個XML資源檔。
- 加入一個Listview的元件。
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/TaskFunc_listView"
android:divider="@null"
android:background="@color/transparent" />
- 新開一個XML資源檔。
- 這邊是載入每個Listview中的Layout，我喜歡把它叫做Cell。
<?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="wrap_content">
<android.support.percent.PercentRelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@drawable/TaskListCell_Style"
android:id="@+id/detailForProgressBar_PercentRelativeLayout"
android:layout_marginLeft="16.5dp"
android:layout_marginRight="15.5dp"
android:minWidth="25px"
android:minHeight="25px"
android:elevation="1dp"
android:layout_marginBottom="8dp">
<ImageView
android:src="@android:drawable/ic_menu_gallery"
android:layout_width="31dp"
android:layout_height="match_parent"
android:id="@+id/funcIcno_ImageView"
android:layout_marginLeft="16dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
app:layout_aspectRatio="100%"
android:layout_centerVertical="true"
android:paddingTop="5dp"
android:paddingLeft="6dp"
android:paddingBottom="5dp"
android:paddingRight="6dp"
android:background="@drawable/taskfunclistview_cell_image_style" />
<TextView
android:text="施工進度"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/funcTitle_TextView"
android:layout_toRightOf="@+id/funcIcno_ImageView"
android:textColor="#273f5e"
android:textSize="16sp"
android:layout_marginLeft="8dp"
android:layout_centerVertical="true" />
<TextView
android:text="20/3,000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/funcSubTitle_TextView"
android:layout_alignParentRight="true"
android:textColor="#a4aabc"
android:textSize="16sp"
android:fontFamily="sans-serif"
android:textStyle="normal"
android:lineSpacingExtra="0sp"
android:gravity="end"
android:layout_marginRight="16dp"
android:layout_centerVertical="true" />
</android.support.percent.PercentRelativeLayout>
</LinearLayout>
-
長這樣子
cell
layout到這邊就大功告成了！
- 建立Adpter
- 新建一個Adpter控制Listview資料
public class CPCTaskFuncAdapter : BaseAdapter<Task_Func_Model>
{
List<Task_Func_Model> items;
Activity context;
public CPCTaskFuncAdapter(Activity context, List<Task_Func_Model> 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<TextView>(Resource.Id.funcTitle_TextView);
TextView funcSubTitle = view.FindViewById<TextView>(Resource.Id.funcSubTitle_TextView);
// 功能icon
ImageView funcIcnoImage = view.FindViewById<ImageView>(Resource.Id.funcIcno_ImageView);
funcTitle.Text = cpcTaskFuncInfo.FuncTitle;
funcSubTitle.Text = cpcTaskFuncInfo.FuncSubTitle;
funcIcnoImage.SetImageResource(cpcTaskFuncInfo.Image_Resource_Drawable);
return view;
}
}
- 建立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<Task_Func_Model> dataFromCPCTaskFunc = new List<Task_Func_Model>();
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Create your application here
InitView();
}
private void InitView()
{
SetContentView(Resource.Layout.TaskFunc_ListView);
taskFuncTableView = FindViewById<ListView>(Resource.Id.TaskFunc_listView);
taskFuncTableView.FastScrollEnabled = true;
SetupTaskFuncListView();
}
/// <summary>
/// if need add function, place go to Task_Func_Model, and Add CPC_Intent_Func_Model_Type.
/// </summary>
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
