我們繼續(xù)學(xué)習(xí)Table View的內(nèi)容，這次主要是針對(duì)UITableViewCell，在前一篇的例子中我們已經(jīng)使用過(guò)UITableViewCell，一個(gè)默認(rèn)的UITableViewCell包含imageView、textLabel、detailTextLabel等屬性，但是很多時(shí)候這些默認(rèn)的屬性并不能滿足需要，其實(shí)更多的時(shí)候我們想自己制定UITableViewCell的內(nèi)容，這篇學(xué)習(xí)的就是制定自己的UITableViewCell。
UITableViewCell繼承自UIView，因此它可以加載任意的subView在上面，基于這一點(diǎn)，我們就可以定制自己的UITableViewCell了。制定UITableViewCell有2種方法，一種是寫(xiě)代碼生成UITableViewCell控件上的內(nèi)容，另一種是拖控件到一個(gè)UITableViewCell控件上，這兩種方法都會(huì)用一個(gè)例子來(lái)進(jìn)行說(shuō)明。
首先我們使用code的方法，來(lái)定制自己的UITableViewCell
1）創(chuàng)建一個(gè)新的項(xiàng)目，template選擇Single View application，命名為Cells 
2）添加Table View，連接delegate和data source到File's Owner 選中BIDController.xib文件，從Object Library中拖一個(gè)Table View到view上，然后選中view中的table view，打開(kāi)Connections Inspector，拖動(dòng)dataSource和delegate右邊的小圓圈到File's Owner上 
3）添加Cell 在PRoject navigator中選中Cells文件夾，然后command+N，添加一個(gè)新的文件。在彈出的對(duì)話框中，左邊選擇Cocoa Touch，右邊選擇Objective-C，然后點(diǎn)擊Next 
在下一個(gè)對(duì)話框中把Class命名為BIDNameAndColorCell，Subclass of選擇UITableViewCell，然后點(diǎn)擊Next 
在下一個(gè)對(duì)話框中選擇Create，完成創(chuàng)建 
BIDNameAndColor文件繼承自UITableViewCell，我們將先對(duì)其進(jìn)行定制，添加一些我們需要的控件，當(dāng)BIDViewController中調(diào)用table cell的時(shí)候，就直接調(diào)用這個(gè)文件即可。
4）添加BIDNameAndColorCell代碼 打開(kāi)BIDNameAndColorCell.h文件，添加如下代碼
#import <UIKit/UIKit.h>@interface BIDNameAndColorCell : UITableViewCell@property (copy, nonatomic) NSString *name;@property (copy, nonatomic) NSString *color;@end我們將在table view cell中顯示2個(gè)字符串，一個(gè)是name，另一個(gè)是color，顯示的內(nèi)容會(huì)從之后定義的NSArray中讀取。（注意，我們這里使用的是copy，而不是通常使用的strong，使用copy的好處是不會(huì)改變?cè)械淖址械膬?nèi)容，當(dāng)然在這里我們也不會(huì)改變字符串的內(nèi)容，你如果使用了strong也問(wèn)題不大，不過(guò)書(shū)上的建議是如果一個(gè)property是NSString，最好使用copy）
接著編輯BIDNameAndColorCell.m文件，添加下面的code
#import "BIDNameAndColorCell.h"#define kNameValueTag 1#define kColorValueTag 2@implementation BIDNameAndColorCell@synthesize name;@synthesize color;首先添加2個(gè)常量kNameValueTag和kColorValueTag，這2個(gè)常量用來(lái)標(biāo)識(shí)table view cell中的name和color。接著就是name和color的synthesize了，和之前例子中的一樣。
下面修改BIDNameAndColorCell.m中已存在的initWithStyle:reuseIdentifier:方法
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{ self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { // Initialization code CGRect nameLabelRect = CGRectMake(0, 5, 70, 15); UILabel *nameLabel = [[UILabel alloc] initWithFrame:nameLabelRect]; nameLabel.textAlignment = UITextAlignmentRight; nameLabel.text = @"Name:"; nameLabel.font = [UIFont boldSystemFontOfSize:12]; [self.contentView addSubview:nameLabel]; CGRect colorLabelRect = CGRectMake(0, 26, 70, 15); UILabel *colorLabel = [[UILabel alloc] initWithFrame:colorLabelRect]; colorLabel.textAlignment = UITextAlignmentRight; colorLabel.text = @"Color:"; colorLabel.font = [UIFont boldSystemFontOfSize:12]; [self.contentView addSubview:colorLabel]; CGRect nameValueRect = CGRectMake(80, 5, 200, 15); UILabel *nameValue = [[UILabel alloc]initWithFrame:nameValueRect]; nameValue.tag = kNameValueTag; [self.contentView addSubview:nameValue]; CGRect colorValueRect = CGRectMake(80, 25, 200, 15); UILabel *colorValue = [[UILabel alloc]initWithFrame:colorValueRect]; colorValue.tag = kColorValueTag; [self.contentView addSubview:colorValue]; } return self;}上面的代碼應(yīng)該還是比較容易理解的吧，創(chuàng)建了4個(gè)UILabel，設(shè)置完UILabel的屬性后，把他們加入到UITableViewCell中，table view cell有一個(gè)默認(rèn)的view叫做contentView，contenView負(fù)責(zé)容納其他的subView，因此上面code中所創(chuàng)建的4個(gè)UILabel都會(huì)添加到contentView中，使用的語(yǔ)句是[self.contentView addSubview:colorValue]
再說(shuō)一下上面創(chuàng)建的4個(gè)UILabel在這個(gè)例子中的作用，nameLabel和colorLabel的作用是純粹的Label，它們的值不會(huì)在改變，在這只它們屬性的使用已經(jīng)分別為它們賦值了。nameValue和colorValue這2個(gè)label是用來(lái)顯示NSArray中的值的，這也是為什么只有這2個(gè)label會(huì)有property，因?yàn)樗鼈冃枰淖冎?。另外在code中還未這2個(gè)label制定了tag，這個(gè)tag的具體作用是通過(guò)它來(lái)標(biāo)識(shí)具體的label，添加下面的code，就會(huì)有所了解。
- (void)setName:(NSString *)n { if(![n isEqualToString:name]) { name = [n copy]; UILabel *nameLabel = (UILabel *)[self.contentView viewWithTag:kNameValueTag]; nameLabel.text = name; }}- (void)setColor:(NSString *)c { if(![c isEqualToString:color]) { color = [c copy]; UILabel *colorLabel = (UILabel *)[self.contentView viewWithTag:kColorValueTag]; colorLabel.text = color; }}@synthesize會(huì)幫我們自動(dòng)創(chuàng)建get和set方法，但在這里我們需要自己寫(xiě)set方法，因此通過(guò)上面的code來(lái)覆蓋系統(tǒng)自動(dòng)為我們生成的set方法。2個(gè)set方法的實(shí)現(xiàn)是一樣的。首先比較新賦值的字符串和舊的字符串是否一樣，如果不一樣就進(jìn)行賦值。然后需要解釋的就是這句話 UILabel *colorLabel = (UILabel *)[self.contentView viewWithTag:kColorValueTag]; 如果找到table view cell中的控件？即使使用剛才我們創(chuàng)建的2個(gè)常量，因?yàn)槊恳粋€(gè)控件的tag值都是不一樣的，因此根據(jù)tag值就可以很方便的找到我們需要的控件，viewWithTag返回的類型是(UIView *)，所以我們將類型強(qiáng)制轉(zhuǎn)換成(UILable *)，就可以得到我們需要的Label了，然后對(duì)Label進(jìn)行賦值。
5）添加BIDViewController代碼 打開(kāi)BIDViewController.h，添加如下代碼
#import <UIKit/UIKit.h>@interface BIDViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>@property (strong, nonatomic) NSArray *computers;@end很簡(jiǎn)單，不解釋。
打開(kāi)BIDViewController.m，添加如下代碼
#import "BIDViewController.h"#import "BIDNameAndColorCell.h"@implementation BIDViewController@synthesize computers;......- (void)viewDidLoad{ [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSDictionary *row1 = [[NSDictionary alloc] initWithObjectsAndKeys: @"MacBook", @"Name", @"White", @"Color", nil]; NSDictionary *row2 = [[NSDictionary alloc] initWithObjectsAndKeys: @"MacBook Pro", @"Name", @"Silver", @"Color", nil]; NSDictionary *row3 = [[NSDictionary alloc] initWithObjectsAndKeys: @"iMac", @"Name", @"Silver", @"Color", nil]; NSDictionary *row4 = [[NSDictionary alloc] initWithObjectsAndKeys: @"Mac Mini", @"Name", @"Silver", @"Color", nil]; NSDictionary *row5 = [[NSDictionary alloc] initWithObjectsAndKeys: @"Mac Pro", @"Name", @"Silver", @"Color", nil]; self.computers = [[NSArray alloc] initWithObjects:row1, row2, row3, row4, row5, nil];}- (void)viewDidUnload{ [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.computers = nil;}首先我們引入BIDNameAndColor的頭文件，之后我們將會(huì)創(chuàng)建它的實(shí)例，在viewDidLoad中，創(chuàng)建了5個(gè)NSDictionary，用于保存name和color名值對(duì)，使用的方法是initWithObjectsAndKeys，就是說(shuō)下面的內(nèi)容前一個(gè)作為object，后一個(gè)作為key，舉個(gè)例子，最后一個(gè)NSDictionary中，@"Mac Pro"就是object，@"Name"就是key。最后將5個(gè)NSDictionary保存到NSArray中（computers中）
在添加下面的code
#pragma mark -#pragma mark Table Data Source Methods- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.computers count];}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellTableIdentifier = @"CellTableIdentifier"; BIDNameAndColorCell *cell = [tableView dequeueReusableCellWithIdentifier:CellTableIdentifier]; if(cell == nil) { cell = [[BIDNameAndColorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellTableIdentifier]; } NSUInteger row = [indexPath row]; NSDictionary *rowData = [self.computers objectAtIndex:row]; cell.name = [rowData objectForKey:@"Name"]; cell.color = [rowData objectForKey:@"Color"]; return cell;}tableView:numberOfRowsInSection: 返回section中的行數(shù) tableView:cellForRowAtIndexPath: 這個(gè)方法稍微有些不同，它吃創(chuàng)建了一個(gè)BIDNameAndColorCell的對(duì)象，而不是創(chuàng)建默認(rèn)的UITableViewCell，這樣就可以直接使用我們自己定義的cell了，這里雖然也指定了UITableViewCellStyleDefault，但是不會(huì)起作用，因?yàn)槲覀冏约憾x了cell
之后的代碼應(yīng)該很好理解，很直觀。
6）編譯運(yùn)行 
7）使用UITableViewCell控件，創(chuàng)建項(xiàng)目，添加table view，連接File's Owner 現(xiàn)在我們使用第二種方法來(lái)定制UITableViewCell，最終的效果和上面的例子一樣，創(chuàng)建一個(gè)新的項(xiàng)目，同樣選擇Single View Application，命名為Cells2 
添加Table View，連接delegate和data source到File's Owner
8）添加BIDNameAndColorCell文件并編輯 和上面的例子一樣，添加BIDNameAndColorCell文件 
打開(kāi)BIDNameAndColorCell.h文件，添加如下代碼
#import <UIKit/UIKit.h>@interface BIDNameAndColorCell : UITableViewCell <UITableViewDelegate, UITableViewDataSource>@property (copy, nonatomic) NSString *name;@property (copy, nonatomic) NSString *color;@property (strong, nonatomic) IBOutlet UILabel *nameLabel;@property (strong, nonatomic) IBOutlet UILabel *colorLabel;@end和之前有所不同的是，我們多添加了2個(gè)Outlet，因?yàn)橹笠砑觴ib，因此這2個(gè)outlet會(huì)指向xib上了2個(gè)UILabel
打開(kāi)BIDNameAndColorCell.m文件，添加如下代碼
#import "BIDNameAndColorCell.h"@implementation BIDNameAndColorCell@synthesize name;@synthesize color;@synthesize nameLabel;@synthesize colorLabel;- (void)setName:(NSString *)n { if(![n isEqualToString:name]) { name = [n copy]; nameLabel.text = name; }}- (void)setColor:(NSString *)c { if(![c isEqualToString:color]) { color = [c copy]; colorLabel.text = color; }}我們重新定義了setName和setColor，這里不需要使用tag，因?yàn)槲覀冎苯邮褂胦utlet就可以找到我們需要的UILabel，另外我們也沒(méi)在initWithStyle:reuseIdentifier中創(chuàng)建4個(gè)Label，因?yàn)槲覀儠?huì)在之后UITableViewCell控件中添加。
9）添加xib 在Project navigator中鼠標(biāo)右鍵單擊Cells2文件夾，然后選擇New File...，在填出的對(duì)話框中左邊選擇User Interface，右邊選擇Empty，點(diǎn)擊Next 
之后的Device Family中選擇iphone，點(diǎn)擊Next 
命名為BIDNameAndColorCell.xib，點(diǎn)擊Create 
在Project navigator中選中BIDNameAndColorCell.xib文件，因?yàn)槲覀儎?chuàng)建的是Empy，因此GUI中什么都沒(méi)有，在Object library中找到Table View Cell 
拖到GUI中 
選中view中的table view cell，打開(kāi)Attributes inspector，找到Identifier，并設(shè)置為CellTableIdentifier 
這個(gè)Identifier就是之前我們code中用到過(guò)的Identifier 
10）向table view cell中添加控件 往table view cell中拖4個(gè)UILable 
將左上方的UILabel命名為"Name:"，然后設(shè)置為粗體（在attribute inspector中設(shè)置） 
將左下方的UILabel命名為"Color:"，然后設(shè)置為粗體（在attribute inspector中設(shè)置） 將右上方的UILabel拉到右邊出現(xiàn)輔助線的位置 將右下方的UILabel拉到右邊出現(xiàn)輔助線的位置 設(shè)置完成后的樣子如下 
（不必將右邊2個(gè)Label的文字去掉，程序運(yùn)行是會(huì)為它們重新賦值）
11）關(guān)聯(lián) 接著我們將BIDNameAndColorCell.xib和BIDNameAndColorCell文件關(guān)聯(lián)起來(lái)，選中GUI中的view，打開(kāi)Identify inspector，將Class指定為BIDNameAndColorCell 
還是選中view，切換到connections inspector，里面有colorLabel和nameLabel 
將colorLabel和nameLabel拖到view中對(duì)應(yīng)的UILabel上，關(guān)聯(lián)起來(lái)（最右邊的2個(gè)label） 
12）寫(xiě)代碼 打開(kāi)BIDViewController.h文件，添加如下代碼
#import <UIKit/UIKit.h>@interface BIDViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>@property (strong, nonatomic) NSArray *computers;@end這個(gè)和上一個(gè)例子一樣，不解釋了，打開(kāi)BIDViewController.m文件，添加如下代碼
#import "BIDViewController.h"#import "BIDNameAndColorCell.h"@implementation BIDViewController@synthesize computers;......- (void)viewDidLoad{ [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSDictionary *row1 = [[NSDictionary alloc] initWithObjectsAndKeys: @"MacBook Air", @"Name", @"Silver", @"Color", nil]; NSDictionary *row2 = [[NSDictionary alloc] initWithObjectsAndKeys: @"MacBook Pro", @"Name", @"Silver", @"Color", nil]; NSDictionary *row3 = [[NSDictionary alloc] initWithObjectsAndKeys: @"iMac", @"Name", @"Silver", @"Color", nil]; NSDictionary *row4 = [[NSDictionary alloc] initWithObjectsAndKeys: @"Mac Mini", @"Name", @"Silver", @"Color", nil]; NSDictionary *row5 = [[NSDictionary alloc] initWithObjectsAndKeys: @"Mac Pro", @"Name", @"Silver", @"Color", nil]; self.computers = [[NSArray alloc] initWithObjects:row1, row2, row3, row4, row5, nil];}- (void)viewDidUnload{ [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.computers = nil;}#pragma mark -#pragma mark Table View Data Source Methods- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.computers count];}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellTableIdentifier = @"CellTableIdentifier"; static BOOL nibsRegistered = NO; if(!nibsRegistered) { UINib *nib = [UINib nibWithNibName:@"BIDNameAndColorCell" bundle:nil]; [tableView registerNib:nib forCellReuseIdentifier:CellTableIdentifier]; nibsRegistered = YES; } BIDNameAndColorCell *cell = [tableView dequeueReusableCellWithIdentifier:CellTableIdentifier]; NSUInteger row = [indexPath row]; NSDictionary *rowData = [self.computers objectAtIndex:row]; cell.name = [rowData objectForKey:@"Name"]; cell.color = [rowData objectForKey:@"Color"]; return cell;}我們所要關(guān)心的就是tableView:cellForRowAtIndexPath這個(gè)方法中的if語(yǔ)句這段代碼：
if(!nibsRegistered) { UINib *nib = [UINib nibWithNibName:@"BIDNameAndColorCell" bundle:nil]; [tableView registerNib:nib forCellReuseIdentifier:CellTableIdentifier]; nibsRegistered = YES; }
UINib通過(guò)xib文件的名字找到xib文件，然后tableView會(huì)調(diào)用這個(gè)xib文件，nibsRegistered保證只有第一次調(diào)用這個(gè)方法的時(shí)候會(huì)去尋找并載入xib，之后則不會(huì)。
13）編譯運(yùn)行 編譯運(yùn)行程序，得到的結(jié)果和之前的一個(gè)程序應(yīng)該是一樣的 
14）總結(jié) 這篇文章使用2種方式定制了UITableViewCell，一種是代碼實(shí)現(xiàn)，另一種是傳統(tǒng)的拖控件實(shí)現(xiàn)，2種方法應(yīng)該說(shuō)各有利弊，不一定拖控件就是好的，我應(yīng)該已經(jīng)預(yù)感到以后的界面布局應(yīng)該都使用寫(xiě)代碼來(lái)實(shí)現(xiàn)，已經(jīng)有好幾個(gè)博友通過(guò)我的例子學(xué)習(xí)但是得到的界面上面控件的布局出現(xiàn)了差錯(cuò)，目前的原因是他們使用的模擬器和我的不一樣，我使用的是iPhone 5.0 Simulator，他們可以是用其他的模擬器，但是我覺(jué)得照成差錯(cuò)的原因是因?yàn)閷W(xué)習(xí)到現(xiàn)在我們都是使用拖控件的方法來(lái)布局的，這個(gè)會(huì)造成差錯(cuò)，如果都是用code來(lái)實(shí)現(xiàn)布局，那么情況應(yīng)該會(huì)變得一致。
下一篇的內(nèi)容會(huì)講到Table View的Section、index、搜索欄等等，內(nèi)容比較多也比較實(shí)用，實(shí)現(xiàn)的效果如下 
我會(huì)盡快寫(xiě)完放上來(lái)的，謝謝大家的關(guān)注，有任何問(wèn)題大家留言吧，如果我知道的話，我會(huì)盡量回答，謝謝！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
