[Xamarin.iOS] 客製化UITableCell表格

2014-08-11

2011
0
Xamarin
2015-03-01

摘要:[Xamarin.iOS] 客製化UITableCell表格

這篇研究在如何用拖拉控制項的方式，來設計一個客製化的UITableCell。

範例下載

1. 在iOS的UI Storyboard裏面，我們要拖拉一個UITableView到設計畫面中。

在UITableView裏面包含著UITableCell，在這個Cell裏面，我放置了一個UIImageView還有兩個UILabel。

除此之外，要記得幫這個UITableCell設定一個識別名稱。

2. 建立對應UITableCell的類別

在上一個步驟新增的控制項屬性要建立Name的時候，可以看到後面有一個警告訊息，

說明我們必須要為這些控制項建立一個相依的UITableView Cell類別。再緊告視窗裡面輸入你要命名的名稱，Xamarin會自動幫忙建立起這個類別。

參考下方程式碼，我建立了一個類別名稱叫做myCell。


namespace CustomCell
{
	partial class myCell : UITableViewCell
	{
		public myCell (IntPtr handle) : base (handle){}

		public myCell(){}

		//建立三個方法，來指定值給畫面上的控制項
		public void mylabeltitle(String title)
		{
			this.myLabel.Text = title;
		}

		public void mylabeldetail(String detail)
		{
			this.myLabelDetail.Text = detail;
		}

		public void myImageview(String image)
		{
			this.myImage.Image =  UIImage.FromFile(image);
		}


	}
}

3. 建立資料類別

在專案中建立一個資料類別。這個類別是稍後要用來建立要在UITableView上面顯示資料的類別。


	public class User{
		public string title;
		public string detail;
		public string image;
	}

4. 建立負責處理UITableView資料與操作的類別


public class TableSource : UITableViewSource {
	//這個UITableView接收的資料型別
	List tableItems;
	string cellIdentifier = "Cell";
	
        //在建構子的部分傳入資料型別
	public TableSource (List items)
	{
		tableItems = items;
	}

	//告知這個UITableView一共有多少資料
	public override int RowsInSection (UITableView tableview, int section)
	{
		return tableItems.Count;
	}
				
	public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
	{
		//建立一個Cell，這邊使用我們自建的myCell類別
		myCell cell = (myCell)tableView.DequeueReusableCell (cellIdentifier);
		// if there are no cells to reuse, create a new one
		if (cell == null)
			cell = new myCell ();

		//呼叫Cell方法，將值帶入
		cell.mylabeltitle(tableItems[indexPath.Row].title);
		cell.mylabeldetail(tableItems [indexPath.Row].detail);
		cell.myImageview(tableItems [indexPath.Row].image);
		return cell;
	}
}

5. 建立資料

在主畫面對應到的ViewController的Viewdidload方法中，撰寫下方程式來建立UITableView上要顯示的資料


public override void ViewDidLoad ()
{
	base.ViewDidLoad ();
	//建立一個資料集合，資料型別為User
	tableItems = new List{
		new User{title = "title1",detail="detail1",image="a.jpg"},
		new User{title = "title2",detail="detail2",image="a.jpg"},
		new User{title = "title3",detail="detail3",image="a.jpg"},
		new User{title = "title4",detail="detail4",image="a.jpg"},
		new User{title = "title5",detail="detail5",image="a.jpg"},
	};
	//將資料指定給UItable
	this.myTable.Source = new TableSource(tableItems);
}

6. 編譯這一個App

編譯這個App，可以看到UITableCell載入了我用畫面設計的

範例程式下載：https://github.com/twbenlu/XamarinCustomCell

參考資料

Customizing a Table's Appearance

http://developer.xamarin.com/guides/ios/user_interface/tables/part_3_-_customizing_a_table's_appearance/

回首頁