ios開發 UITableView with xib 以及自定義TableViewCell

原文網址：http://blog.csdn.net/m_changgong/article/details/8115137 作者：張燕廣

1、創建一個Single View Application工程，命名為：TableViewDemo，如下圖

2、修改ViewController.xib，添加一個Table View控件，連接操作，如下

3、視圖控制器ViewController，需要實現協議UITableViewDataSource、UITableViewDelegate中的必須實現的方法，

在工程目錄依次展開Frameworks->UIKit.framework->Headers，然后打開UITableView.h，搜索找到協議UITableViewDataSource、UITableViewDelegate的定義，如下

4、修改ViewController.h，如下

 

<span style="font-family:Microsoft YaHei;font-size:18px;">//
//  ViewController.h
//  TableViewDemo
//
//  Created by Zhang Yanguang on 12-10-25.
//  Copyright (c) 2012年 MyCompanyName. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property(nonatomic,retain)NSMutableArray *apps;

@end
</span>

 

5、修改ViewController.m，如下

 

<span style="font-family:Microsoft YaHei;font-size:18px;">//
//  ViewController.m
//  TableViewDemo
//
//  Created by Zhang Yanguang on 12-10-25.
//  Copyright (c) 2012年 MyCompanyName. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize apps;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //加載數據
    [self loadData];
}

//模擬加載數據
-(void)loadData{
    apps = [[NSMutableArray alloc]init];
    for(int i=0;i<8;i++){
        [apps insertObject:[NSString stringWithFormat:@"App-%d",(i+1)] atIndex:i];
    }
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    apps = nil;
    // Release any retained subviews of the main view.
}

-(void)dealloc{
    [super dealloc];
    [apps release];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

#pragma mark table view datasource methods 
//可選實現的方法，默認為1
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;{
    return 1;
}

//必須實現的方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [apps count];
}

//必須實現的方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    //
    NSString *myTableViewCellIdentifier = @"myTableViewCellIdentifier";
    UITableViewCell *cell = [[UITableView alloc]dequeueReusableCellWithIdentifier:myTableViewCellIdentifier];//備注1
    if(cell==nil){
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:myTableViewCellIdentifier]; //備注2
    }
    NSString *imageName = [NSString stringWithFormat:@"%d",[indexPath row]+1];
    //cell.image = [UIImage imageNamed:imageName]; //這種用法已經廢棄
    cell.imageView.image = [UIImage imageNamed:imageName];
    cell.textLabel.text = [apps objectAtIndex:[indexPath row]];
    cell.textLabel.textAlignment = UITextAlignmentLeft;
    cell.textLabel.font = [cell.textLabel.font fontWithSize:30];
    
    tableView.separatorColor = [UIColor clearColor];  //將分割線去掉
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;   //顯示內容后面的箭頭
    return cell;
}

//可選實現的方法
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
    return @"Header";
}

//可選實現的方法
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
    return @"Footer";
}

#pragma mark table view data delegate methods
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 50;
}
@end</span>

 

備注1、備注2，代碼解釋：

1)表中的每一行都擁有一個子視圖，即一個UITableViewCell類的實例
2）對於一個擁有大量數據的表，如果UITableView為表中的每一行都分配一個UITableViewCell的實例，而不管該行是否正在顯示，這無疑將帶來大量內容開銷。當然，UITableView並不是這樣設計的。
3）只有當前顯示的行才被分配UITableViewCell的實例，因滾動操作已離開屏幕的表視圖單元（UITableViewCell的實例）將被放置在一個可以被重用的單元序列中。
 如果系統運行比較緩慢，表視圖就從該序列中刪除這些單元，以釋放存儲空間；
 只要有可用的存儲空間，表視圖就會重新獲取這些單元，以便以后再次使用。
4）//當一個表單視圖滾出屏幕時，另一個表單視圖就會從另一邊滾動到屏幕上，如果滾動到屏幕上的新行重新使用從屏幕上滾動下來的那些單元格中的某一個單元格，系統就會避免與不斷創建和釋放那些視圖相關的開銷。
 5）為了使用此機制，需要一個標識符(identifier)來標示可重用的單元格
 6）表第一次初始化時肯定沒有可重用的表單元，所以需要初始分配：
 cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:myTableViewCellIdentifier];
 reuseIdentifier參數即標示該表單元可重用的標示符

6、編譯、運行，效果如下

點擊下載本文源代碼

 

如何用圖片自定義Table Separeator分割線
一般地，利用類似[tableView setSeparatorColor:[UIColor redColor]];語句即可修改cell中間分割線的顏色。那又如何用一個圖片作為分割線背景呢？可以嘗試如下：
方法一：
先設置cell separatorColor為clear，然后把圖片做的分割線添加到自定義的custom cell上。

tableView.separatorColor = [UIColor clearColor];

方法二：
在cell里添加一個像素的imageView后將圖片載入進，之后設置tableView.separatorStyle = UITableViewCellSeparatorStyleNone

 

自定義首行Cell與其上面導航欄間距

tableView.tableHeaderView = [[[UIView alloc] initWithFrame:CGRectMake(0,0,5,20)] autorelease];

 

自定義表格視圖單元格

應用程序是否可以更好看？我們將通過自定義表格單元格使其更好看。到目前為止，我們使用的默認樣式顯示表單元格，而且縮略圖的位置和大小是固定的。如果你想就像下面的屏幕顯示的那樣使縮略圖更大並附上每個菜的准備時間，怎么辦？

不同風格的自定義表格視圖單元格

設計單元格

在這種情況下，你必須創建和設計自己的表格單元格。返回到Xcode。在項目瀏覽器中，右鍵單擊“SimpleTable”文件夾並選擇“New File ...”。

為了設計我們自己的表格單元格，我們要創建一個新的表格單元格界面生成器。在這種情況下，我們只需要啟動一個“空”的用戶界面。點擊“下一步”繼續。

選擇一個空的Interface Builder文檔

當提示選擇設備系列時，選擇“iPhone”，然后單擊“下一步”繼續。保存的文件為“SimpleTableCell”。

一旦該文件被創建時，你就能在Project Navigator中找到它。選擇“SimpleTableCell.xib”切換到界面生成器。我們要設計的自定義表格單元格的外觀。

在對象庫中，選擇“Table View Cell（表格視圖單元格）”，將其拖動到界面生成器的設計區域。

為了容納更大的縮略圖，我們要改變單元格的高度。只要按住下/上側的單元格邊緣並縮放到高度78。

或者，您也可以使用“Size Inspector”改變高度。

表查看單元格的尺寸督察

下一步，選擇“Attributes Inspector（屬性檢查器）“的上半部分的通用區域來為自定義單元格“SimpleTableCell”設置“Identifier（標識符）”。這個標識符將在后面的代碼中使用。

表格單元格視圖配置好之后，我們將往他里面放其他元素。選擇“Image View”，並把它拖到表視圖單元格。

image view用於顯示縮略圖。您可以調整其大小，使其適合單元格。參考數值，我設置的高度和寬度為69像素。

接下來，我們將添加三個標簽：Name（姓名），Prep Time(准備時間)和Time(時間)。“Name”標簽將用於顯示配方的名稱。“Prep Ｔime”是一個靜態的標簽，只顯示“准備時間”。最后，“Time”的標簽是一個動態的標簽被用於顯示實際的具體菜餚的准備時間。

要添加一個標簽，在Object library（對象庫）中選擇“標簽”，將其拖動到單元格中。您可以雙擊標簽以更改其名稱。

和上面所顯示的做比較，您可能會發現您的字體大小和樣式是不同的。要更改字體樣式，只需選擇標簽並選擇“Attribute Inspector（屬性檢查器）”。從這里，你可以改變“字體”和最小字體大小的設置。您也可以通過檢查更改文本顏色和對齊方式。

您的最終設計應該類似於這樣：

創建一個類的自定義單元格

到目前為止，我們已經設計了表格單元格。但如何才能改變自定義單元格的標簽值嗎？我們要為自定義表視圖單元格創建一個新的類。這個類代表了自定義單元格的底層數據模型。

就像以前一樣，右鍵單擊“SimpleTable的項目瀏覽器”文件夾中，然后選擇“新建文件”。

選擇一個新的文件模板

選擇該選項后，Xcode會提示你選擇一個模板。我們要創建一個新的自定義表格視圖單元格類，選擇“Objective-C類”下的“Cocoa Touch”，然后單擊“下一步”。

為您的項目創建新的文件

類名填寫“SimpleTableCell”，選中"Subclass of "里的“UITableViewCell”。

單擊“下一步”，保存的文件在SimpleTable項目文件夾，並單擊“創建”繼續。Xcode將在Project Navigator中創建兩個名為“SimpleTableCell.h”文件和“SimpleTableCell.m”。

正如前面提到的中，SimpleTableCell類作為自定義單元格的數據模型。在單元格中，我們有三個值是可變的：thumbnail image view（縮略圖圖像視圖），name label（名稱標簽）和time label（時間標簽）。在這個類里，我們將添加三個屬性來表示這些動態值。

打開“SimpleTableCell.h”中添加以下屬性：

@property (nonatomic, weak) IBOutlet UILabel *nameLabel;
@property (nonatomic, weak) IBOutlet UILabel *prepTimeLabel
@property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;

現在，打開“SimpleTableCell.m”，以下“@implementation SimpleTableCell”下面添加以下代碼：

@synthesize nameLabel = _nameLabel;
@synthesize prepTimeLabel = _prepTimeLabel;
@synthesize thumbnailImageView = _thumbnailImageView;

建立連接

保存更改並選擇“SimpleTableCell.xib”回到Interface Builder中。現在我們可以在類的屬性和Label/ ImageView之間創建連接。

首先，選擇單元格，在“Identity Inspector”中把類改為“SimpleTableCell”，這樣就可以在單元格視圖和我們之前創建的類之間建立聯系。

現在，我們要建立的連接的屬性。右鍵單擊"Objects"下的“SimpleTableCell”，以顯示“Outlets”查詢器。單擊並按住“nameLabel”旁邊的圓圈，並將其拖動到Label – Name”對象。Xcode會自動建立連接。

為“prepTimeLabel”和“thumbnailImageView”重復上述操作：

View”:

• 連接“prepTimeLabel” 和“Label – Time”
• 連接“thumbnailImageView” 和“ImageView”

當你建立所有的連接后，它看起來應該是這樣的：

更新SimpleTableViewController

我們已經完成了自定義表格單元格的設計和編碼。最后，我們來到最后修改的部分 - 確認自定義單元格放在SimpleTableViewController中。

讓我們重溫在“SimpleTableView.m”的代碼：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableItem";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }

    cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    return cell;
}

 

我們先前使用默認的表視圖單元格（即UITableViewCell）顯示的表項。為了使用我們的自定義表格單元格，我們必須改變在“SimpleTableView.m”代碼：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil) 
    {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];
    } 
    
    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];
    
    return cell;
}

 

通過導入#import“SimpleTableCell.h”，“SimpleTableViewController”知道"SimpleTableCell是什么並可以利用它。

最后，由於表格單元格的高度改為78，在“@end”前面添加下面的代碼。

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

現在，點擊“Run”按鈕和您的SimpleTable的應用程序看起來應該象下面這樣：

 自定義表格視圖單元格（不使用xib）

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) {
        UIImage *defaultImage = [UIImage imageNamed:@"hotelImageDefault.png"];
        hotelImage = [[UIImageView alloc] initWithFrame:CGRectMake(7, 7, 56, 56)];
        hotelImage.image = defaultImage;
        hotelImage.layer.masksToBounds = YES;
        hotelImage.layer.cornerRadius = 6.0;
        
        titleText = [[UILabel alloc] initWithFrame:CGRectMake(71, 5, 209, 25)];
        titleText.font = [UIFont fontWithName:@"Arial" size:17.0f];
        titleText.backgroundColor = [UIColor clearColor];
        addressText = [[UILabel alloc] initWithFrame:CGRectMake(71, 30, 209, 30)];
        addressText.font = [UIFont fontWithName:@"Arial" size:14.0f];
        addressText.numberOfLines = 2;
        addressText.textColor = [UIColor darkGrayColor];
        addressText.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:hotelImage];
        [self.contentView addSubview:titleText];
        [self.contentView addSubview:addressText];        
    }
    return self;
}