Filter4Cam 實作: 8. 濾鏡表單之一

since: 2012/03/20
update: 2012/03/20
reference: I touchs: Filter4Cam 學習之 Scroll Horizontally Tables: Part 1

基本 Table 架構

A. 說明
     1. 在此簡化架構, 僅供 iPhone 使用, 也讓將來的維護較容易.

     2. TableViewController 一般常伴隨 NavigationController 來使用; 由於在此專案
        當選取某個資料列(Row)後, 並不需要切換到別的頁面(只須切換濾鏡效果),
        因此可以不使用 NavigationController.

     3. 原本專案的 ViewController 是繼承 GLKViewController, 而非 TableViewController
         但是我們需要 TableView 的相關功能, 因此需要為 ViewController 新增二個
         Protocol: <UITableViewDelegate, UITableViewDataSource>, 供其依循並實作相關
         的方法. 

     4. 先完成設備垂直擺放(Orientation Portrait)的基本功能與 UI 配置, 之後再來調整
         其它方向的擺放.

---------------------------------------------------------------------------------

B. 開啓 ViewController.h 檔案, 修改如下:
....
//@interface ViewController : GLKViewController
//@interface ViewController : GLKViewController <AVCaptureVideoDataOutputSampleBufferDelegate>
//@update
@interface ViewController : GLKViewController <AVCaptureVideoDataOutputSampleBufferDelegate, UITableViewDelegate, UITableViewDataSource>
{
....
    //@add for Camera Overlay UI
    UIImageView *filterLensImageView;   
    UITableView *filterListTableView;
....
}
....
//@add for Camera Overlay UI
@property (nonatomic, strong) UIImageView *filterLensImageView;
@property (nonatomic, strong) UITableView *filterListTableView;
....

---------------------------------------------------------------------------------

C. 開啓 ViewController.m 檔案, 修改如下:
....
//@add for Camera Overlay UI
@synthesize filterLensImageView = _filterLensImageView;
@synthesize filterListTableView = _filterListTableView;
....
#pragma mark Getter
....
//@add
- (UITableView *)filterListTableView
{  
    if (_filterListTableView == nil) {
        _filterListTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 380, self.view.frame.size.width, 100) style:UITableViewStyleGrouped];
    }
   
    return _filterListTableView;
}
....
#pragma mark Table View

//@add
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

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

//@add
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
   
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
   
    if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
   
    cell.textLabel.text = @"Filter List Row";
   
    return cell;
}

//@add(此處應該不會用到)
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"Filter List Row => section:%d row:%d", [indexPath section], [indexPath row]);
}
....
//@add for setting camera Overlay
- (void)cameraOverlay
{   
    [self.filterLensImageView setFrame:CGRectMake(20, 80, 280, 280)];
    [self.view addSubview:self.filterLensImageView];
    //@add
    self.filterListTableView.delegate = self;
    self.filterListTableView.dataSource = self;
    [self.view addSubview:self.filterListTableView];
}
....

---------------------------------------------------------------------------------

D. 編譯並執行

   選擇不同的 row:
   2012-03-20 10:58:24.276 Filter4Cam[19443:707] Filter List Row => section:0 row:0
   2012-03-20 10:58:28.402 Filter4Cam[19443:707] Filter List Row => section:0 row:1