2015年8月25日 星期二

Note: 建立 UITableView step-by-step

操作環境:Xcode 6.4 and Mac OS 10.10.4

建立一個新專案

選 Single View Application

Options

放置資料夾

點 Main.storyboard 及 View 會看到以下畫面

點擊 delete 刪除 view 後,拉出 table view

拉出 cell

拉出 ImageView and Label 放在 cell 內,這樣比較容易客製化

建立自己的 View Controller

連結 View 跟自己的 Controller

建立自己的 cell,看起像以下

一樣需要連結 View 上的 element 跟自己的 Cell

在自己的 Cell 程式碼內先加上 label 跟 image view 的 property,再來才能在 Storyboard 做連結。

連結 Label and Image View

CaTableViewController.m 就可以對這個 image view and label 做操作。在 CaTableViewController.m 內修改以下的參數做簡單的測試。
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    return 3;
}

把以下的 /* */ 兩個符號拿掉
/*
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:<#@"reuseIdentifier"#> forIndexPath:indexPath];
    
    // Configure the cell...
    
    return cell;
}
*/

這時要給自己的 Cell 一個 reuse identifier:

再來將程式改成如下, import 自己的 cell:

cellForRowAtIndexPath method 做初步修改:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    CaTableViewCell *cell = (CaTableViewCell *) [tableView dequeueReusableCellWithIdentifier:@"CellReuseIdentifier" forIndexPath:indexPath];
    
    // This cell may be nil.
     if (nil == cell) {
        cell = [[CaTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"CellReuseIdentifier"];
    }
    
    // Configure the cell... 
    // Label
    [cell.lbTitle setText:@"catest"];
    
    return cell;
}


跑起來的畫面:

接下來要給圖。先在實體資料夾下放圖,再從 Xcode 做連結:

程式內加上 image:
    // Configure the cell...
    // label
    [cell.lbTitle setText:@"catest"];
    // image view
    [cell.ivImage setImage:[UIImage imageNamed:@"info_black.png"]];
    
跑起來畫面:

修改 title 及 圖片:
先宣告兩個 Array

初始化這兩個 Arrays

number of rows 改判斷 array size

修改 cellForRowAtIndexPath method 的內容
    // Configure the cell...
    // label
    [cell.lbTitle setText:[titles objectAtIndex:[indexPath row]]];
    // image view
    [cell.ivImage setImage:[UIImage imageNamed:[images objectAtIndex:[indexPath row]]]];
    
執行畫面

判斷觸控 cell 的動作 (第一個 cell 是 0):
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // The row is deselected after it is tapped.
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    
    // Actions of each cell
    switch ([indexPath row]) {
        case 0:
            NSLog(@"%@", [NSString stringWithFormat:@"cell tapped=%@, image=%@", [titles objectAtIndex:[indexPath row]], [images objectAtIndex:[indexPath row]]]);
            break;
        case 1:
            NSLog(@"%@", [NSString stringWithFormat:@"cell tapped=%@, image=%@", [titles objectAtIndex:[indexPath row]], [images objectAtIndex:[indexPath row]]]);
            break;
        case 2:
            NSLog(@"%@", [NSString stringWithFormat:@"cell tapped=%@, image=%@", [titles objectAtIndex:[indexPath row]], [images objectAtIndex:[indexPath row]]]);

            break;
        default:
            break;
    }

}

沒有留言:

張貼留言