/* syntax highlight */ /* end of syntax highlight */

2011年1月5日 星期三

iphone app 開發 (四十一) 表格檢視 (Table view)

Bookmark and Share

本篇文章我們來談「表格」Table 這個元件,表格是我們在做 App 很常用的技巧,而且也很好理解,你一定要來學看看!

螢幕快照 2011-01-05 下午5.26.15

首先我們必須知道表格分為 (1) 群組式表格 (2) 無格式表格 (3) 索引式表格。群組式表格可以把列歸為幾類,如下面第一張圖,無格式表格(plain table) 則沒有分類,會直接呈列表格中的內容,如下面第二張圖,第三種是索引式表格 (indexed table) ,則會有索引在右邊

image image image

 

我們可以開始來實做一個 Table 看看

本篇先介紹最基本的表格觀念

共分為幾個部份

 

第一部份:設計畫面

第二部份:撰寫程式碼

第三部份:編譯

 

 

第一部份:設計畫面

開啟專案請選擇 View-Based Applcation

第一步驟請打開你的 ViewController.xib 檔,並放進一個 TableView 的元件,如下圖

image

 

再來請先設定其委派機制,請打開 Inspector 的第二個 tab ,並將 DataSource 與 Delegate 拉線到 File’s Owner 上面,建立關係

image

 

到此我們的畫面就完成了,夠簡單吧

不過因為我們在下面的部份還有在每一列前面加上一個 icon ,所以請你放一個 icon 進專案當中,命名為 rowIcon.png

 

 

第二部份:撰寫程式碼

 

請在 header 檔部份輸入以下程式碼,其中重點是我們宣告了一個 listData 的 NSArray ,負責我們的 Row 參數部份

#import <UIKit/UIKit.h>

@interface tableTestViewController : UIViewController <UITableViewDelegate , UITableViewDataSource> {
    NSArray *listData;
}

@property (nonatomic,retain) NSArray *listData;

@end

 

再來進到 implement 檔部份

第一步先設定 ViewDidLoad 即 App 開始必須 load 進記憶體的部份

@synthesize listData;

-(void)viewDidLoad{
    NSArray *array = [[NSArray alloc] initWithObjects:@"row1",@"row2",@"row3",@"row4",@"row5",nil];
    self.listData = array;
    [array release];
    [super viewDidLoad];
}

 

然後是第一個函式,負責回傳共有幾筆資料

-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [self.listData count]; //回傳有幾筆資料要呈現
}

 

下面這個函式是負責創造每一個 Cell (即每一個 Row) ,每一行的功用我都有標記起來

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ //在繪製每一列時會呼叫的方法
    static NSString *TableIdentifier = @"tableidentifier"; //設定一個就算離開畫面也還是抓得到的辨識目標
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:TableIdentifier];
    //呼叫以下方法以避免當已經沒有表格要呈現的時候
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:TableIdentifier] autorelease];
    }
    //放入每列前圖片
    UIImage *image = [UIImage imageNamed:@"rowIcon.png"];
    cell.imageView.image = image;
    //用 row 變數去得知現在繪製的是哪一列
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    //更改字體大小
    cell.textLabel.font = [UIFont boldSystemFontOfSize:15];
    //判斷表格內容並顯示說明文字
    if (row == 0) {
        cell.detailTextLabel.text = @"this is detail text";
    }
    return cell;
}

 

用以下的方法可以調整每列的高度

//調整每列的高度 , 如果要客製化, 只要用 if (row==0) 判斷即可
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 50;
}

 

下面的方法則是回傳使用者點選了哪一列的參數

//用以下方法來記錄使用者點選了哪一列
-(NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    return indexPath;
}

 

下面的方法則是建立了一個互動,告知使用者點選到哪一列

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    NSUInteger row = [indexPath row];
    NSString *rowValue = [listData objectAtIndex:row]; //用 NSString 去記錄使用者點選的 row
    NSString *message = [[NSString alloc] initWithFormat:@"you pressed row %@",rowValue];
    //用一個 alert 去告訴使用者現在正在點選的 Row
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"ROW SELECTED" message:message delegate:nil cancelButtonTitle:@"I GOT IT" otherButtonTitles:nil];
    [alert show];
    [message release];
    [alert release];
    //讓選取的效果消失
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

 

 

 

第三部份:編譯

如果成功編譯的話,你應該可以看到以下成果,表格共有5列,每列前面有一個小 icon ,每列的高度是我們設定的,且每列還有一個 detailText 的小字說明,當使用者點選其中某一個 Row 的時候告知使用者它他點到哪個 Row ,當使用者點選 I GOT IT 的時候退回表格的畫面,且消除掉使用者點選的紀錄。

螢幕快照 2011-01-05 下午5.26.15 螢幕快照 2011-01-05 下午5.26.23

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...