Filter4Cam 實作: 17. 功能按鈕 UI 介面

since: 2012/06/30
update: 2012/06/30

A. 說明:
     1. 先將 "濾鏡" 以外的功能按鈕 UI 排好, 之後再一一實作, 先不考慮 "美觀"
         與 "程式碼架構(重整)".

     2. UI 上的功能, 目前有四個: "拍照", "鏡頭切換", "閃光燈", 與 "觀察者模式".
       
-----------------------------------------------------------------------------------

B. 開啟 ViewController.h 檔案, 修改如下:
// step 1:
....
@interface ViewController : GLKViewController <AVCaptureVideoDataOutputSampleBufferDelegate, UITableViewDelegate, UITableViewDataSource>
{
....
    //@add for Camera Overlay UI
    UIImageView *filterLensImageView;   
    UITableView *filterListTableView;
    UIButton *saveButton;   // "拍照" 按鈕
    UIButton *switchButton; // "鏡頭切換" 按鈕
    UIButton *torchButton;  // "閃光燈" 按鈕
    UIButton *observerButton; // "觀察者模式" 按鈕
....
}

// step 2:
....
//@add for Camera Overlay UI
@property (nonatomic, strong) UIImageView *filterLensImageView;
@property (nonatomic, strong) UITableView *filterListTableView;
@property (nonatomic, strong) UIButton *saveButton;
@property (nonatomic, strong) UIButton *switchButton;
@property (nonatomic, strong) UIButton *torchButton;
@property (nonatomic, strong) UIButton *observerButton;
....

// step 3:
....
//@add: functional buttons 
- (void)savePhoto; // "拍照"
- (void)switchCameras; // "鏡頭切換"
- (void)switchLight; // "閃光燈切換"
- (void)switchObserver; // "觀察者模式"

@end

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

C. 開啟 ViewController.m 檔案, 修改如下:
// step 1:
....
//@add for Camera Overlay UI
@synthesize filterLensImageView = _filterLensImageView;
@synthesize filterListTableView = _filterListTableView;
@synthesize saveButton = _saveButton;
@synthesize switchButton = _switchButton;
@synthesize torchButton = _torchButton;
@synthesize observerButton = _observerButton;

// step2:
....
//@add: "拍照" 按鈕 
- (UIButton *)saveButton
{
    if (_saveButton == nil) {
        _saveButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [_saveButton setTitle:@"Save" forState:UIControlStateNormal];
        [_saveButton addTarget:self action:@selector(savePhoto) forControlEvents:UIControlEventTouchUpInside];

        [_saveButton setOpaque:NO];
        [_saveButton setAlpha:0.7];
    }
   
    return _saveButton;
}

//@add: "鏡頭切換" 按鈕
- (UIButton *)switchButton
{
    if (_switchButton == nil) {
        _switchButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [_switchButton setTitle:@"Switch" forState:UIControlStateNormal];
        [_switchButton addTarget:self action:@selector(switchCameras) forControlEvents:UIControlEventTouchUpInside];

        [_switchButton setOpaque:NO];
        [_switchButton setAlpha:0.7];
    }

    return _switchButton;
}

//@add: "閃光燈切換" 按鈕
- (UIButton *)torchButton
{
    if (_torchButton == nil) {
        _torchButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [_torchButton setTitle:@"Torch" forState:UIControlStateNormal];
        [_torchButton addTarget:self action:@selector(switchLight) forControlEvents:UIControlEventTouchUpInside];

        [_torchButton setOpaque:NO];
        [_torchButton setAlpha:0.7];
    }

    return _torchButton;
}

//@add: "觀察者模式" 按鈕
- (UIButton *)observerButton
{       
    if (_observerButton == nil) {
        _observerButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [_observerButton setTitle:@"Observe" forState:UIControlStateNormal];
        [_observerButton addTarget:self action:@selector(switchObserver) forControlEvents:UIControlEventTouchUpInside];

        [_observerButton setOpaque:NO];
        [_observerButton setAlpha:0.7];
    }

    return _observerButton;
}

// step 03:
....
- (void)cameraOverlay
{  
    [self.view addSubview:self.filterLensImageView];
    [self.view addSubview:self.saveButton];
    [self.view addSubview:self.switchButton];
    [self.view addSubview:self.torchButton];
    [self.view addSubview:self.observerButton];
....
}

// step 04:
....
//@add: "拍照"
- (void)savePhoto
{
    //@TODO
    NSLog(@"savePhoto");
}

//@add: "鏡頭切換"
- (void)switchCameras
{
    //@TODO
    NSLog(@"switchCameras");
}

//@add: "閃光燈切換"
- (void)switchLight
{
    //@TODO
    NSLog(@"switchLight");
}

//@add: "觀察者模式"
- (void)switchObserver
{
    //@TODO
    NSLog(@"switchObserver");
}

....
// step 05:

....

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
....
    //@update
    // 設備垂直擺放
    if (interfaceOrientation == UIDeviceOrientationPortrait)
    {
        [self.filterLensImageView setFrame:CGRectMake(20, 120, 280, 280)];
       
        //@add for Button
        [self.saveButton setFrame:CGRectMake(10, 420, 66, 40)];
        [self.switchButton setFrame:CGRectMake(87, 420, 66, 40)];
        [self.torchButton setFrame:CGRectMake(164, 420, 66, 40)];
        [self.observerButton setFrame:CGRectMake(241, 420, 66, 40)];
....
    }
    // 設備垂直 180 度擺放
    else if (interfaceOrientation == UIDeviceOrientationPortraitUpsideDown) {       
        [self.filterLensImageView setFrame:CGRectMake(20, 120, 280, 280)];
       
        //@add for Button
        [self.saveButton setFrame:CGRectMake(10, 420, 66, 40)];
        [self.switchButton setFrame:CGRectMake(87, 420, 66, 40)];
        [self.torchButton setFrame:CGRectMake(164, 420, 66, 40)];
        [self.observerButton setFrame:CGRectMake(241, 420, 66, 40)];
....
    }
    // 設備水平向右擺放
    else if (interfaceOrientation == UIDeviceOrientationLandscapeRight) {       
        [self.filterLensImageView setFrame:CGRectMake(120, 20, 280, 280)];
       
        //@add for Button
        [self.saveButton setFrame:CGRectMake(406, 32, 66, 40)];
        [self.switchButton setFrame:CGRectMake(406, 104, 66, 40)];
        [self.torchButton setFrame:CGRectMake(406, 176, 66, 40)];
        [self.observerButton setFrame:CGRectMake(406, 248, 66, 40)];
....
    }
    // 設備水平向左擺放
    else if (interfaceOrientation == UIDeviceOrientationLandscapeLeft) {       
        [self.filterLensImageView setFrame:CGRectMake(120, 20, 280, 280)];
       
        //@add for Button
        [self.saveButton setFrame:CGRectMake(406, 32, 66, 40)];
        [self.switchButton setFrame:CGRectMake(406, 104, 66, 40)];
        [self.torchButton setFrame:CGRectMake(406, 176, 66, 40)];
        [self.observerButton setFrame:CGRectMake(406, 248, 66, 40)];
....
    }
    // 其它 (UIDeviceOrientationFaceUp, UIDeviceOrientationFaceDown,
    // UIDeviceOrientationUnknown)
    else {
        [self.filterLensImageView setFrame:CGRectMake(120, 20, 280, 280)];
       
        //@add for Button
        [self.saveButton setFrame:CGRectMake(406, 32, 66, 40)];
        [self.switchButton setFrame:CGRectMake(406, 104, 66, 40)];
        [self.torchButton setFrame:CGRectMake(406, 176, 66, 40)];
        [self.observerButton setFrame:CGRectMake(406, 248, 66, 40)];
....
    }
....
}

....

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

D. 編譯並執行