UITableView 系列一 :基本使用方法 (显示,删除,添加图片,添加样式等) (实例)
基本概念:
?
1. UITableView 的 Style 预设有两种:Plain 及 Grouped。
Plain:
?
Grouped:
?
2. 装在 UITableView 里面的元素是 UITableViewCell。
Cell的结构图:
?
3. 而 UITableViewCell 预设有4种样式 Style:
UITableViewCellStyleDefault:预设使用这种,若左侧ImageView没图的话,只有一行字(textLable.text)。
?
UITableViewCellStyleValue1:左侧为textLable.text并且左对齐,右侧为detailTextLable.text并且右对齐。
?
UITableViewCellStyleValue2:左侧为detailTextLable.text,右侧为textLable.text并且左对齐。
?
UITableViewCellStyleSubtitle:跟UITableViewCellStyleDefault大致相同,detailTextLable.text出现在textLable.text下方。
?
textLable和detailTextLable都包含在contentView里面。
?
来源:http://skyx.wordpress.com/2012/01/09/ios-uitableview-use-and-summary/
?
UITableView 基本使用方法 (一) - 如何顯示資料
?

UITableView 是 iOS 中,非常重要的使用者介面 ,仔细观察 iOS App 中,除了游戏类的 App 以外,几乎都会用上 UITableview, 因为使用 UITableView 的目的就是要呈现数十笔甚至上百笔的资料给使用者,透过 UITableView ,使用者可以透过捲动画面,来获得或是查询想要的资料,本文将介绍 UITableView 的基本使用方法。
?
?在 Xcode 中,开启一个 Single View Application, Device Family 为iPhone,取消 “Use Storyboard” 和 "Include Unit Tests".
?
在xib文件中,拖入 Table View,并且使 Outlets 下的 dataSource 和 delegate 与 File's Owner相连。
?
ViewController.h
#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>{ NSArray *items;}@property (nonatomic,retain) NSArray *items;@end?
ViewController.m
@synthesize items;- (void)viewDidLoad{ [super viewDidLoad];// Do any additional setup after loading the view, typically from a nib. // Set up the NSArray self.items = [[NSArray alloc] initWithObjects:@"Item 1",@"Item 2",@"Item 3", @"Item 4",@"Item 5",@"Item 6",@"Item 7",@"Item 8",@"Item 9",@"Item 10",@"Item 11",@"Item 12", nil];}#pragma mark - TableView Methods- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return [self.items count]; // or self.items.count;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ // Step 1: Check to see if we can reuse a cell from a row that has just rolled off the screen UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"]; // Step 2: If there are no cells to reuse, create a new one if(cell == nil) cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"]; // Add a detail view accessory cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton; // Step 3: Set the cell text cell.textLabel.text = [items objectAtIndex:indexPath.row]; // Step 4: Return the cell return cell;}?
或者添加图片
?
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ // Step 1: Check to see if we can reuse a cell from a row that has just rolled off the screen UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"]; // Step 2: If there are no cells to reuse, create a new one if(cell == nil) cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"]; // Add a detail view accessory cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton; // Step 3: Set the cell text cell.textLabel.text = [items objectAtIndex:indexPath.row]; //每一行row進來都判定一下,分別依次選用不同的圖片 switch (indexPath.row) { case 0: cell.imageView.image = [UIImage imageNamed:@"image0.png"]; break; case 1: cell.imageView.image = [UIImage imageNamed:@"image1.png"]; break; case 2: cell.imageView.image = [UIImage imageNamed:@"image2.png"]; break; default: cell.imageView.image = [UIImage imageNamed:@"common.png"]; break; } //設字體、顏色、背景色什麼的 cell.textLabel.backgroundColor = [UIColor clearColor]; cell.detailTextLabel.backgroundColor = [UIColor clearColor]; cell.textLabel.textColor = [UIColor colorWithRed:54.0/255.0 green:161.0/255.0 blue:219.0/255.0 alpha:1]; cell.detailTextLabel.textColor = [UIColor colorWithRed:135.0/255.0 green:135.0/255.0 blue:135.0/255.0 alpha:1]; //設定textLabel的最大允許行數,超過的話會在尾未以...表示 cell.textLabel.numberOfLines = 2; // Step 4: Return the cell return cell;}?视频:?http://www.youtube.com/watch?v=sTM7nxup_xc&feature=related
?
解释如下:
?
要设定 UITableView 欲显示资料的部份,首先找到 numberOfSectionsInTableView: 方法。在此方法中,需要设定将会呈现多少个 section,也就是对 UITableView 做分类,在此实作中,没有需要用到两个以上的分类,因此我们设定回传值为 1 ,完整的方法设定如下:
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; }??再来设定有多少列要显示在 UITableView 上面,在 tableView: numberOfRowsInSection: 方法中,我们告知 UITableView 将有多少笔资料要显示给使用者,完整方法设定如下:
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { //阵列中所包含的物件个数,即为要显示的资料数量,也就是多少列 return [self.tableViewArray count]; }??最后在 UITableView 当中,我们要告知每一个 UITableViewCell 需要输出什么样的资料,在此范例中,我们是以字串做为资料的显示,因此我们将 tableViewArray 中的每一个字串指定给每一列,在 tableView: cellForRowAtIndexPath:方法中,我们输入以下程式码:
// 设定以下字串的用意是设定一个标籤,来进行重复使用 UITableViewCell 的工作 static NSString *CellIdentifier = @"Cell"; //询问 tableView 是否有可以重复利用的 UITableViewCell UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; //若无则产生一个新的 UITableViewCell if (cell == nil) { //产生 UITableViewCell 的同时,设定 UITableViewCell 的形态,并且赋予标籤,以利重复使用 UITableViewCell cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease]; } //设定 UITableViewCell 中 textLable 的文字,根据 indexPath.row 来给定在 tableViewArray 中的字串 cell.textLabel.text = [self.tableViewArray objectAtIndex:indexPath.row]; return cell;??上列方法中,由于 UITableView 一次包含数十个 UITableViewCell, 并且进行上下捲动,当 UITableViewCell 数量有上百笔的时候,不可能一次产生数百个 UITableViewCell 加入到 UITableView 当中,因此 Apple 使用了可以重复利用 UITableViewCell 的机制,赋予 UITableViewCell 可以重复使用的标籤,当 UITableViewCell 因捲动而不在画面上的时候,就会先呼叫 UITableView 有无可以重复使用的 UITableViewCell,这样可以节省记忆体的使用量。
?
以上完成后,即可显示出 UITableView 并显示阵列中的字串在每一个 UITableViewCell 上。最后必须要说明的是,使用 UITableViewController 时,其 tableViewController.view 所回传的物件并非 UIView 而是 UITableView,因为在 XIB 档中,File's Owner 的 view outlet 是与 UITableView 相连接的。
?
UITableView 基本使用法 (二) - 删除资料列
?


?在上一篇 UITableView 基本使用法 (一) 中,我们介绍了如何让 UITableView 呈现我们需要的资料,在接下来的文章中,将介绍如何删除资料列。
?
?在介绍如何删除资料列之前,应该先回顾一下 MVC design pattern, 也就是 Model - View - Controller 的设计样式。UITableView 也是遵循这样的 design pattern, 在 UITableView 基本使用法 (一) 中,我们使用阵列也就是我们的 Model 来存放字串资料,然后透过 UITableViewController 来变更 UITableView 的显示内容,同样地,在删除 UITableView 中的资料列时,也代表着我们将阵列中的资料删除,倘若我们不变更阵列的内容,也就是我们不对阵列进行物件的删除,然后直接要求 UITableView 进行显示资料的删除时,得到的结果就是 crash!因此,进行资料列的删除首要是先对 Model 也就是阵列内容进行删除,然后再执行 UITableView 的显示资料删除,而进行 Model 以及 View 内容变更的正是 UITableViewController, 如此符合 MVC 的精神。
?
?回归正题,依据之前的 UITableView 基本使用法 (一) Xcode 专案,回到 UITableViewController subclass, 原本在 viewDidLoad 中,我们使用 NSArray 来产生阵列,但是 NSArray 无法进行物件的新增与删除,因此,必须将 阵列重新宣告为 NSMutableArray, 因为我们将利用 NSMutableArray 中的 removeObjectAtIndex: 方法来移除物件。在 viewDidLoad 中重新设定阵列的宣告,程式码如下:
?
.h
#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>{ NSMutableArray *items;}@property (nonatomic,retain) NSMutableArray *items;@end?@synthesize items; - (void)viewDidLoad { [super viewDidLoad]; //设定包含六个 NSString 字串的阵列 self.items = [[NSMutableArray alloc] initWithObjects:@"First", @"Second", @"Third",@"Fourth",@"Five",@"Six",nil]; }??再来置入以下方法,此方法为设定是否 UITableView 能否被进行编辑,在此方法中回传 YES , 代表 UITableView 起始删除功能。
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath { return YES; }??当我们起始删除功能之后,就可以利用手指划过 UITableViewCell 来进行删除的动作。接下来,置入以下方法,tableView: commitEditingStyle: forRowAtIndexPath:,此方法为根据 UITableView 回传的编辑模式,进行对应的处理方法。
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { if (editingStyle == UITableViewCellEditingStyleDelete) { //先行删除阵列中的物件 [self.items removeObjectAtIndex:indexPath.row]; //删除 UITableView 中的物件,并设定动画模式 [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade]; } }?注意:NSMutableArray 和 NSArray 的区别
?
来源:http://furnacedigital.blogspot.com/2011/08/uitableview_22.html
?
其他方法:
?
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;//这个方法返回指定的 row 的高度。??
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;//这个方法返回指定的 section的header view 的高度。??
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;//这个方法返回指定的 section的footer view 的高度。??
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;//返回指定的row 的cell。这个地方是比较关键的地方,一般在这个地方来定制各种个性化的 cell元素。这里只是使用最简单最基本的cell 类型。其中有一个主标题 cell.textLabel 还有一个副标题cell.detailTextLabel, 还有一个 image在最前头 叫cell.imageView. 还可以设置右边的图标,通过cell.accessoryType 可以设置是饱满的向右的蓝色箭头,还是单薄的向右箭头,还是勾勾标记。??
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section//返回指定的 section 的header的高度??
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section//返回指定的section 的 header 的 title,如果这个section header 有返回view,那么title就不起作用了。??
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section//返回指定的 section header 的view,如果没有,这个函数可以不返回view??
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath//当用户选中某个行的cell的时候,回调用这个。但是首先,必须设置tableview的一个属性为可以select 才行。??
TableView.allowsSelection=YES; cell.selectionStyle=UITableViewCellSelectionStyleBlue; //如果不希望响应select,那么就可以用下面的代码设置属性:TableView.allowsSelection=NO;?
//下面是响应select 点击函数,根据哪个section,哪个row 自己做出响应就好啦。- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {if (indexPath.section == 1) {return;}else if(indexPath.section==0){switch (indexPath.row) {//聊天case 0:{[self onTalkToFriendBtn];}break;default:break;}}else {return ;}}?//如何让cell 能够响应 select,但是选中后的颜色又不发生改变呢,那么就设置 cell.selectionStyle = UITableViewCellSelectionStyleNone;
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ //cell被选中后的颜色不变 cell.selectionStyle = UITableViewCellSelectionStyleNone;}??
//如何设置tableview 每行之间的 分割线self.tableView.separatorStyle=UITableViewCellSeparatorStyleSingleLine;//如果不需要分割线,那么就设置属性为 UITableViewCellSeparatorStyleNone 即可。
?
//如何设置 tableview cell的背景颜色- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ //设置背景颜色cell.contentView.backgroundColor=[UIColor colorWithRed:0.957 green:0.957 blue:0.957 alpha:1];}?- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath//这个函数响应,用户点击cell 右边的 箭头(如果有的话)?
//如何设置tableview 可以被编辑,首先要进入编辑模式:[TableView setEditing:YES animated:YES];
??如果要退出编辑模式,肯定就是设置为NO
?
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath//返回当前cell 要执行的是哪种编辑,下面的代码是 返回 删除 模式?
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath{ return UITableViewCellEditingStyleDelete;}?-(void) tableView:(UITableView *)aTableView commitEditingStyle:(UITableViewCellEditingStyle) editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath//通知告诉用户编辑了 哪个cell,对应上面的代码,我们在这个函数里面执行删除cell的操作。?
-(void) tableView:(UITableView *)aTableViewcommitEditingStyle:(UITableViewCellEditingStyle) editingStyleforRowAtIndexPath:(NSIndexPath *)indexPath{ [chatArray removeObjectAtIndex:indexPath.row];[chatTableView reloadData];}??- (UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath;//获得 某一行的CELL对象?
?
?
来源:http://blog.csdn.net/tangaowen/article/details/6438362
?
?
?