iOS App開發(fā)中使用及自定義UITableViewCell的教程
UITableView用來以表格的形式顯示數(shù)據(jù)。關(guān)于UITableView，我們應(yīng)該注意：
（1）UITableView用來顯示表格的可見部分，UITableViewCell用來顯示表格的一行。
（2）UITableView并不負(fù)責(zé)存儲(chǔ)表格中的數(shù)據(jù)，而是僅僅存儲(chǔ)足夠的數(shù)據(jù)使得可以畫出當(dāng)前可見部分。
（3）UITableView從UITableViewDelegate協(xié)議獲取配置信息，從UITableViewDataSource協(xié)議獲得數(shù)據(jù)信息。
（4）所有的UITableView實(shí)現(xiàn)時(shí)實(shí)際上只有一列，但是我們可以通過向UITableViewCell中添加子視圖，使得它看起來有好幾列。
（5）UITableView有兩種風(fēng)格：
① Grouped：每一組看起來像是圓矩形；
② Plain：這是默認(rèn)風(fēng)格，可以修改成Indexed風(fēng)格。
UITableViewCell使用實(shí)例
在下邊的小例子中，我們將先實(shí)現(xiàn)顯示一列數(shù)據(jù)，然后在每行添加圖像，之后再看看UITableViewCell的四種分別是什么樣的。最后再進(jìn)行其他操作，比如設(shè)置縮進(jìn)、修改字體大小和行高等。
1、運(yùn)行Xcode 4.2，新建一個(gè)Single View Application，名稱為Table Sample：
2、單擊ViewController.xib，使用Interface Builder給視圖添加一個(gè)UITableView控件，并使其覆蓋整個(gè)視圖：
3、選中新添加的UITableView控件，打開Connection Inspector，找到delegate和datasource，從它們右邊的圓圈拉線到File's Owner圖標(biāo)：
4、單擊ViewController.h，在其中添加代碼：
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>
@property (strong, nonatomic) NSArray *listData;
@end
5、單擊ViewController.m，在其中添加代碼：
5.1 在@implementation后面添加代碼：
@synthesize listData;
5.2 在viewDidLoad方法中添加代碼：
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSArray *array = [[NSArray alloc] initWithObjects:@"Tree", @"Flower",
@"Grass", @"Fence", @"House", @"Table", @"Chair",
@"Book", @"Swing" , nil];
self.listData = array;
}
5.3 在viewDidUnload方法中添加代碼：
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.listData = nil;
}
5.4 在@end之前添加代碼：
#pragma mark -
#pragma mark Table View Data Source Methods
//返回行數(shù)
- (NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section {
return [self.listData count];
}
//新建某一行并返回
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *TableSampleIdentifier = @"TableSampleIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
TableSampleIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:TableSampleIdentifier];
}
NSUInteger row = [indexPath row];
cell.textLabel.text = [listData objectAtIndex:row];
return cell;
}
上面的第二個(gè)方法中，
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: TableSampleIdentifier];
這個(gè)語句根據(jù)標(biāo)識(shí)符TableSampleIdentifier尋找當(dāng)前可以重用的UITableViewCell。當(dāng)某行滑出當(dāng)前可見區(qū)域后，我們重用它所對應(yīng)的UITableViewCell對象，那么就可以節(jié)省內(nèi)存和時(shí)間。
如果執(zhí)行詞語后，cell為nil，那我們再創(chuàng)建一個(gè)，并設(shè)置去標(biāo)識(shí)符為TableSampleIdentifier：
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier];
這里UITableViewCellStyleDefault是表示UITableViewCell風(fēng)格的常數(shù)，除此之外，還有其他風(fēng)格，后面將會(huì)用到。
注意參數(shù)(NSIndexPath *)indexPath，它將行號row和部分號section合并了，通過[indexPath row];獲取行號。之后給cell設(shè)置其文本：
cell.textLabel.text = [listData objectAtIndex: row];
6、運(yùn)行一下：
7、給每一行添加圖片：
7.1 將圖片資源添加到工程：拖到工程中，前面的文章有提到。
7.2 在cellForRowAtIndexPath方法的return語句之前添加代碼：
UIImage *image = [UIImage imageNamed:@"blue.png"];
cell.imageView.image = image;
UIImage *highLighedImage = [UIImage imageNamed:@"yellow.png"];
cell.imageView.highlighedImage = highLighedImage;
7.3 運(yùn)行，效果如下：
可以看到，每行左邊都出現(xiàn)一張圖片。當(dāng)選中某行，其圖片改變。
8、設(shè)置行的風(fēng)格：
表示UITableViewCell風(fēng)格的常量有：
UITableViewCellStyleDefault
UITableViewCellStyleSubtitle
UITableViewCellStyleValue1
UITableViewCellStyleValue2
這幾種風(fēng)格的區(qū)別主要體現(xiàn)在Image、Text Label以及Detail Text Label。
為了體現(xiàn)風(fēng)格，在cellForRowAtIndexPath方法的return語句之前添加代碼：
cell.detailTextLabel.text = @"Detail Text";
然后將
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier];
中的UITableViewCellStyleDefault依次換成上面提到的四個(gè)風(fēng)格常量，并運(yùn)行，效果分別如下：
UITableViewCellStyleDefault
UITableViewCellStyleSubtitle
UITableViewCellStyleValue1
UITableViewCellStyleValue2
9、設(shè)置縮進(jìn)：
將所有行的風(fēng)格改回UITableViewCellStyleDefault，然后在@end之前添加代碼如下：
#pragma mark Table Delegate Methods
- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath {
NSUInteger row = [indexPath row];
return row;
}
這里將第row行縮進(jìn)row，如下圖所示：
10、操縱行選擇：
在@end之前添加代碼：
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NSUInteger row = [indexPath row];
if (row%2 == 0) {
return nil;
}
return indexPath;
}
上面的方法在選擇某行之前執(zhí)行，我們可以在這個(gè)方法中添加我們想要的操作。這里，我們實(shí)現(xiàn)的是，如果選擇的行號（從0開始計(jì)）是偶數(shù)，則取消選擇。
在@end之前添加代碼：
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NSUInteger row = [indexPath row];
NSString *rowValue = [listData objectAtIndex:row];
NSString *message = [[NSString alloc] initWithFormat:
@"You selected %@", rowValue];
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@"Row Selected!"
message:message
delegate:nil
cancelButtonTitle:@"Yes I Did"
otherButtonTitles:nil];
[alert show];
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
當(dāng)選擇某行之后，就彈出一個(gè)Alert，用來顯示我們所做的選擇。
運(yùn)行一下，你會(huì)發(fā)現(xiàn)第0、2等行無法選擇。選擇奇數(shù)行時(shí)會(huì)彈出提示：
而且關(guān)閉提示框后，選擇的那行也被取消了選擇，用的語句
[tableView deselectRowAtIndexPath:indexPath animated:YES];
11、設(shè)置字體大小和表格行高：
11.1 在cellForRowAtIndexPath方法中的return之前添加代碼，用于設(shè)置字體和大?。?br />
cell.textLabel.font = [UIFont boldSystemFontOfSize:50];
11.2 在@end之前添加代碼，用于設(shè)置行高：
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 70;
}
運(yùn)行，看看效果：
可任意自定義的UITableViewCell
UITableView的強(qiáng)大更多程度上來自于可以任意自定義UITableViewCell單元格。通常，UITableView中的Cell是動(dòng)態(tài)的，在使用過程中，會(huì)創(chuàng)建一個(gè)Cell池，根據(jù)每個(gè)cell的高度（即tableView:heightForRowAtIndexPath:返回值），以及屏幕高度計(jì)算屏幕中可顯示幾個(gè)cell。而進(jìn)行自定義TableViewCell無非是采用代碼實(shí)現(xiàn)或采用IB編輯nib文件來實(shí)現(xiàn)兩種方式，本文主要收集代碼的方式實(shí)現(xiàn)各種cell自定義。
1.如何動(dòng)態(tài)調(diào)整Cell高度
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];
label.tag = 1;
label.lineBreakMode = UILineBreakModeWordWrap;
label.highlightedTextColor = [UIColor whiteColor];
label.numberOfLines = 0;
label.opaque = NO; // 選中Opaque表示視圖后面的任何內(nèi)容都不應(yīng)該繪制
label.backgroundColor = [UIColor clearColor];
[cell.contentView addSubview:label];
[label release];
}
UILabel *label = (UILabel *)[cell viewWithTag:1];
NSString *text;
text = [textArray objectAtIndex:indexPath.row];
CGRect cellFrame = [cell frame];
cellFrame.origin = CGPointMake(0, 0);
label.text = text;
CGRect rect = CGRectInset(cellFrame, 2, 2);
label.frame = rect;
[label sizeToFit];
if (label.frame.size.height > 46) {
cellFrame.size.height = 50 + label.frame.size.height - 46;
}
else {
cellFrame.size.height = 50;
}
[cell setFrame:cellFrame];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [self tableView:tableView cellForRowAtIndexPath:indexPath];
return cell.frame.size.height;
}
2.如何用圖片自定義Table Separeator分割線
一般地，利用類似[tableView setSeparatorColor:[UIColor redColor]];語句即可修改cell中間分割線的顏色。那又如何用一個(gè)圖片作為分割線背景呢？可以嘗試如下：
方法一：
先設(shè)置cell separatorColor為clear，然后把圖片做的分割線添加到自定義的custom cell上。
方法二：
在cell里添加一個(gè)像素的imageView后將圖片載入進(jìn)，之后設(shè)置tableView.separatorStyle = UITableViewCellSeparatorStyleNone
3.自定義首行Cell與其上面導(dǎo)航欄間距
tableView.tableHeaderView = [[[UIView alloc] initWithFrame:CGRectMake(0,0,5,20)] autorelease];
4.自定義UITableViewCell的accessory樣式
默認(rèn)的accessoryType屬性有四種取值：UITableViewCellAccessoryNone、UITableViewCellAccessoryDisclosureIndicator、UITableViewCellAccessoryDetailDisclosureButton、UITableViewCellAccessoryCheckmark。如果想使用自定義附件按鈕的其他樣式，則需使用UITableView的accessoryView屬性來指定。
UIButton *button;
if(isEditableOrNot) {
UIImage *image = [UIImage imageNamed:@"delete.png"];
button = [UIButton buttonWithType:UIButtonTypeCustom];
CGRect frame = CGRectMake(0.0,0.0,image.size.width,image.size.height);
button.frame = frame;
[button setBackgroundImage:image forState:UIControlStateNormal];
button.backgroundColor = [UIColor clearColor];
cell.accessoryView = button;
}else{
button = [UIButton buttonWithType:UIButtonTypeCustom];
button.backgroundColor = [UIColor clearColor];
cell.accessoryView = button;
}
以上代碼僅僅是定義了附件按鈕兩種狀態(tài)下的樣式，問題是現(xiàn)在這個(gè)自定義附件按鈕的事件仍不可用。即事件還無法傳遞到UITableViewDelegate的accessoryButtonTappedForRowWithIndexPath方法上。當(dāng)我們在上述代碼中在加入以下語句：
后，雖然可以捕捉到每個(gè)附件按鈕的點(diǎn)擊事件，但我們還無法進(jìn)行區(qū)別到底是哪一行的附件按鈕發(fā)生了點(diǎn)擊動(dòng)作！因?yàn)閍ddTarget:方法最多允許傳遞兩個(gè)參數(shù)：target和event，這兩個(gè)參數(shù)都有各自的用途了（target指向事件委托對象，event指向所發(fā)生的事件）?？磥碇灰揽緾ocoa框架已經(jīng)無法做到了。
但我們還是可以利用event參數(shù)，在自定義的btnClicked方法中判斷出事件發(fā)生在UITableView的哪一個(gè)cell上。因?yàn)閁ITableView有一個(gè)很關(guān)鍵的方法indexPathForRowAtPoint，可以根據(jù)觸摸發(fā)生的位置，返回觸摸發(fā)生在哪一個(gè)cell的indexPath。而且通過event對象，正好也可以獲得每個(gè)觸摸在視圖中的位置。
// 檢查用戶點(diǎn)擊按鈕時(shí)的位置，并轉(zhuǎn)發(fā)事件到對應(yīng)的accessory tapped事件
- (void)btnClicked:(id)sender event:(id)event
{
NSSet *touches = [event allTouches];
UITouch *touch = [touches anyObject];
CGPoint currentTouchPosition = [touch locationInView:self.tableView];
NSIndexPath *indexPath = [self.tableView indexPathForRowAtPoint:currentTouchPosition];
if(indexPath != nil)
{
[self tableView:self.tableView accessoryButtonTappedForRowWithIndexPath:indexPath];
}
}
這樣，UITableView的accessoryButtonTappedForRowWithIndexPath方法會(huì)被觸發(fā)，并且獲得一個(gè)indexPath參數(shù)。通過這個(gè)indexPath參數(shù)，我們即可區(qū)分到底哪一行的附件按鈕發(fā)生了觸摸事件。
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath
{
int *idx = indexPath.row;
//這里加入自己的邏輯
}
- IOS UITableView和UITableViewCell的幾種樣式詳細(xì)介紹
- IOS UITableViewCell詳解及按鈕點(diǎn)擊事件處理實(shí)例
- 全面解析iOS應(yīng)用中自定義UITableViewCell的方法
- 詳解ios中自定義cell，自定義UITableViewCell
- 詳解IOS UITableViewCell 的 imageView大小更改
- UITableViewCell在編輯狀態(tài)下背景顏色的修改方法
- 詳解iOS tableViewCell自適應(yīng)高度 第三發(fā)類庫
- iOS中使用UItableviewcell實(shí)現(xiàn)團(tuán)購和微博界面的示例
- iOS優(yōu)化UITableViewCell高度計(jì)算的一些事兒
- 你應(yīng)該知道的tableViewCell行高計(jì)算處理
相關(guān)文章
這篇文章主要介紹了Objective-C中字符串的拼接方法小結(jié),除了依靠NSString,文中還介紹了在宏里拼接字符串的方法,需要的朋友可以參考下2016-02-02
iOS中UILabel text兩邊對齊的實(shí)現(xiàn)代碼
本文通過一段實(shí)例代碼給大家介紹了ios中uilabel text兩邊對齊的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
這篇文章主要介紹了IOS圖片設(shè)置毛玻璃效果的相關(guān)資料,需要的朋友可以參考下2016-03-03
iOS開發(fā)教程之UIRefreshControl使用的踩坑指南
UIRefreshControl是iOS6自帶的UITableView下拉刷新控件。下面這篇文章主要給大家介紹了關(guān)于iOS開發(fā)教程之UIRefreshControl使用的踩坑指南，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
UIScrollView是一個(gè)非常重要的控件,其可以展示比設(shè)備屏幕更大區(qū)域的內(nèi)容,我們可以通過手指滑動(dòng)來查看內(nèi)容視圖的每一部分內(nèi)容,也可以通過手指捏合來對內(nèi)容視圖進(jìn)行縮放操作，我們每天開發(fā)中都不斷顯式或隱式地與UIScrollView打交道，下面給大家詳細(xì)介紹UIScrollView控件。2016-09-09
詳解iOS 關(guān)于字體根據(jù)不同屏幕尺寸等比適配的問題
這篇文章主要介紹了詳解iOS 關(guān)于字體根據(jù)不同屏幕尺寸等比適配的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
IOS輕松幾步實(shí)現(xiàn)自定義轉(zhuǎn)場動(dòng)畫
這篇文章將講述幾個(gè)步驟實(shí)現(xiàn)轉(zhuǎn)場動(dòng)畫的自定義方式，并且給出了示例代碼，畢竟代碼才是我們的語言，這樣比較容易上手。下面來一起看看吧。2016-09-09
詳解iOS的UI開發(fā)中控制器的創(chuàng)建方法
這篇文章主要介紹了iOS的UI開發(fā)中控制器的創(chuàng)建方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11
本篇文章給大家分享了在IOS中Deep Linking的用法以及代碼實(shí)例，有興趣的朋友跟著學(xué)習(xí)下吧。2018-01-01
這篇文章主要介紹了iOS撥打電話的3種實(shí)現(xiàn)方式 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06