iOS UI 選擇!列表式 UITableView

選擇!列表式 UITableView

UITableView 是繼承UISCrollView後再搭配一至多個UILabel所組成的,它能提供列表的資料顯示方式,以下為最基本的UITableView示範。

執行結果

Log

已選擇的cell編號: 2
cell值: 資料第三項

已選擇的cell編號: 3
cell值: 資料第四項

已選擇的cell編號: 0
cell值: 資料第一項

Swift 程式範例

//-----------start-----------
//
//  ViewController.swift
//
//

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    // Cell 資料使用陣列儲存,你也可以使用其他方式提供
    let dyItems: NSArray = ["資料第一項", "資料第二項", "資料第三項", "資料第四項"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // 取得Status Bard高度.
        let statusbarHeight: CGFloat = UIApplication.sharedApplication().statusBarFrame.size.height

        // 取得View的寬、高(給table view設定使用)
        let displayWidth: CGFloat = self.view.frame.width
        let displayHeight: CGFloat = self.view.frame.height

        // TableView初始化設定
        // y = statusbarHeight ,避免tableview蓋到statusbar (iOS7之後的關系,view的位置可以對到全螢幕)
        // width = displayWidth
        // height = displayHeight
        //
        let dyTableView: UITableView = UITableView(frame: CGRect(x: 0, y: statusbarHeight, width: displayWidth, height: displayHeight - statusbarHeight))

        // 初始化cell的樣式及名稱,告訴UITableView每個cell顯示的樣式,這裡指定只顯示預設(一行文字)
        dyTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "DyDataCell")

        // DataSource 設定self,必需寫好對應的function才能取得正確資料
        dyTableView.dataSource = self

        // Delegate 設定self,必需寫好對應的delegate function才能取得正確資訊
        dyTableView.delegate = self

        // 將建立好的tableview加入原先的View
        self.view.addSubview(dyTableView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    //點選cell後會呼叫此function告知哪個cell已經被選擇(0開始)
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        println("已選擇的cell編號: \(indexPath.row)")
        println("cell值: \(dyItems[indexPath.row])")
        print("\r\n")
    }

    //返回總共有多少cell筆數
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dyItems.count
    }

    //根據cellForRowAtIndexPath來取得目前TableView需要哪個cell的資料
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        // 取得tableView目前使用的cell
        let cell = tableView.dequeueReusableCellWithIdentifier("DyDataCell", forIndexPath: indexPath) as UITableViewCell

        // 將指定資料顯示於tableview提供的text
        cell.textLabel?.text = "\(dyItems[indexPath.row])"

        return cell
    }

}

//------------end------------

Objective-C 程式範例

標頭檔

//-----------start-----------
//
//  ViewController.h
//
//
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource,UITableViewDelegate>


@end

//------------end------------

程式檔

//-----------start-----------
//
//  ViewController.m
//
//
//

#import "ViewController.h"
#import <UIKit/UIKit.h>


@interface ViewController ()

@end

@implementation ViewController
{
    NSArray *dyItems;
    UITableView *dyTableView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    // Cell 資料使用陣列儲存,你也可以使用其他方式提供
    dyItems = @[@"資料第一項", @"資料第二項", @"資料第三項", @"資料第四項"];

    // 取得Status Bard高度.
    CGFloat statusbarHeight = UIApplication.sharedApplication.statusBarFrame.size.height;

    // 取得View的寬、高(給table view設定使用)
    CGFloat displayWidth = self.view.frame.size.width;
    CGFloat displayHeight = self.view.frame.size.height;

    // TableView初始化設定
    // y = statusbarHeight ,避免tableview蓋到statusbar (iOS7之後的關系,view的位置可以對到全螢幕)
    // width = displayWidth
    // height = displayHeight
    //
    dyTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, statusbarHeight, displayWidth, displayHeight - statusbarHeight)];

    // 初始化cell的樣式及名稱,告訴UITableView每個cell顯示的樣式,這裡指定只顯示預設(一行文字)
    UITableViewCell *tableViewCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"DyDataCell"];

    // 設定Cell名稱、樣式
    [dyTableView registerClass:tableViewCell.class forCellReuseIdentifier:tableViewCell.reuseIdentifier];

    // DataSource 設定self,必需寫好對應的function才能取得正確資料
    dyTableView.dataSource = self;

    // Delegate 設定self,必需寫好對應的delegate function才能取得正確資訊
    dyTableView.delegate = self;

    // 將建立好的tableview加入原先的View
    [self.view addSubview:dyTableView];


}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


//點選cell後會呼叫此function告知哪個cell已經被選擇(0開始)
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"已選擇的cell編號:%ld",indexPath.row);
    NSLog(@"cell值: %@",[dyItems objectAtIndex:indexPath.row]);
    NSLog(@"\r\n");
}

//返回總共有多少cell筆數
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return dyItems.count;
}

//根據cellForRowAtIndexPath來取得目前TableView需要哪個cell的資料
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    // 取得tableView目前使用的cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"DyDataCell" forIndexPath: indexPath];

    // 將指定資料顯示於tableview提供的text
    cell.textLabel.text = dyItems[indexPath.row];

    return cell;
}

@end
//------------end------------