[iOS] Objective-C 自訂UITableViewCell樣式

Step1 在Storyboard中拉出TableView和按下TableView Cell後要切換的View，並設定對應的class檔

TableView連結至ListController類別，並設定Storyboard ID為ListController

要切換的View連結至ViewController類別，並設定Storyboard ID為viewController

Step2 新增CustomCell.xib

新增File（File → New → File...），選擇View，並將檔案命名為CustomCell

開啟CustomCell.xib，把預設的View元件刪掉，然後從元件庫拖曳Table View Cell，並拉好想要的Cell內容排版

Step3 新增自訂Objective-C class給這個NIB檔

新增File（File → New → File...），選擇Cocoa Touch class

需要繼承UITableViewCell

Step4 回到CustomCell.xib，將Class連結到CustomTableViewCell

Step5 在CustomTableViewCell.h檔中，設定元件變數

	@interface CustomTableViewCell : UITableViewCell
	@property (weak, nonatomic) IBOutlet UILabel *devName;
	@property (weak, nonatomic) IBOutlet UILabel *info1;
	@property (weak, nonatomic) IBOutlet UILabel *info2;
	@property (weak, nonatomic) IBOutlet UILabel *info3;
	@property (weak, nonatomic) IBOutlet UILabel *info4;
	@property (weak, nonatomic) IBOutlet UILabel *info5;
	@property (weak, nonatomic) IBOutlet UILabel *info6;
	@end

view raw CustomTableViewCell.h hosted with ❤ by GitHub

Step6 在ListController.h中設定TableView的元件變數，且宣告一個陣列，負責儲存表格上要呈現的資料

	#import <UIKit/UIKit.h>
	@interface ListController : UIViewController{
	NSMutableArray *list;
	}
	@property (weak, nonatomic) IBOutlet UITableView *tableView;
	@end

view raw ListController.h hosted with ❤ by GitHub

Step7 在ListController.m  的viewDidLoad方法中設定TableView的兩個輸出口：dataSource、delegate，並初始化陣列資料

dataSource所連結到的View Controller用來提供表格上Cell的內容
delegate為指定哪一個View Controller需要處理使用者在表格上的操作

	- (void)viewDidLoad {
	[super viewDidLoad];
	_tableView.delegate = self;
	_tableView.dataSource = self;
	list = [[NSMutableArray alloc] init];
	[list addObject:[NSArray arrayWithObjects:@"Name1",@"info1",@"info2",@"info3",@"info4",@"info5",@"info6", nil]];
	[list addObject:[NSArray arrayWithObjects:@"Name2",@"info1",@"info2",@"info3",@"info4",@"info5",@"info6", nil]];
	[list addObject:[NSArray arrayWithObjects:@"Name3",@"info1",@"info2",@"info3",@"info4",@"info5",@"info6", nil]];
	[list addObject:[NSArray arrayWithObjects:@"Name4",@"info1",@"info2",@"info3",@"info4",@"info5",@"info6", nil]];
	}

view raw ListController.m hosted with ❤ by GitHub

Step8 在ListController.m中，實作tableView:numberOfRowsInSection:方法－通知Table View需要產生多少個Cell（儲存格）來顯示資料

	- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
	{
	return [list count];
	}

view raw ListController.m hosted with ❤ by GitHub

Step9 在ListController.m中，實作tableView:cellForRowAtIndexPath:方法－實際建立Cell，並將要呈現在Table View中的資料放進Cell中

1，利用dequeueReusableCellWithIdentifier:方法取得可再利用的Cell，不需要每次都花時間產生一個新的
2，載入CustomCell.xib檔，從中取得自訂儲存格，最後將資料放入Label內

	- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
	{
	static NSString *CellIdentifier = @"customCell";
	//自訂Cell的類別
	CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
	if (cell == nil){
	//載入CustomCell.xib檔
	NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:nil options:nil];
	for (UIView *view in views) {
	if ([view isKindOfClass:[CustomTableViewCell class]]){
	cell = (CustomTableViewCell *)view;
	}
	}
	}
	//填寫資料到Label元件中
	cell.devName.text = [[list objectAtIndex:indexPath.row] objectAtIndex:0];
	cell.info1.text = [[list objectAtIndex:indexPath.row] objectAtIndex:1];
	cell.info2.text = [[list objectAtIndex:indexPath.row] objectAtIndex:2];
	cell.info3.text = [[list objectAtIndex:indexPath.row] objectAtIndex:3];
	cell.info4.text = [[list objectAtIndex:indexPath.row] objectAtIndex:4];
	cell.info5.text = [[list objectAtIndex:indexPath.row] objectAtIndex:5];
	cell.info6.text = [[list objectAtIndex:indexPath.row] objectAtIndex:6];
	return cell;
	}

view raw ListController.m hosted with ❤ by GitHub

Step10 在ListController.m中，實作tableView:heightForRowAtIndexPath:方法－因為自訂的Cell有更改高度，所以要將高度改為與自訂Cell相同的高度

	- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
	{
	return 220;
	}

view raw ListController.m hosted with ❤ by GitHub

Step11 在ListController.m中，實作tableView:didSelectRowAtIndexPath:方法－設定Cell按下後的事件

按下後，會切換頁面至Storyboard上ID為"ViewController"的頁面

	- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
	{
	UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"Main" bundle: nil];
	UIViewController *vc ;
	switch (indexPath.row)
	{
	case 0:
	vc = [mainStoryboard instantiateViewControllerWithIdentifier: @"ViewController"];
	[self presentModalViewController:vc animated:YES];
	break;
	case 1:
	vc = [mainStoryboard instantiateViewControllerWithIdentifier: @"ViewController"];
	[self presentModalViewController:vc animated:YES];
	break;
	}
	}

view raw ListController.m hosted with ❤ by GitHub

執行結果：