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 *)aTableView
commitEditingStyle:(UITableViewCellEditingStyle) editingStyle
forRowAtIndexPath:(NSIndexPath *)indexPath
{
    	[chatArray  removeObjectAtIndex:indexPath.row];
	[chatTableView  reloadData];
}

  

- (UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath;
//获得 某一行的CELL对象

 

 

 

来源：http://blog.csdn.net/tangaowen/article/details/6438362

 

 

 

评论

1 楼 wwwang89 2013-04-11  

commitEditingStyle