OpenGL ES 入門: 番外篇之 UIView 元件

since: 2012/04/06
update: 2012/04/07

A. 說明
    1. 目的: 要在本專案功能上加上 UIView 元件, ex: UIButton, UIToolBar ...

    2. 嘗試用加入 storyboard / xib 的方式, 發現畫面都會被 OpenGL ES 覆蓋掉.

    3. 因此決定, 全用 coding 的方式來處理.

    4. 方式有二種:
        a. 在 viewController 上新加入一個要放 UIView 元件的 subview, 接著在此 subview
            上放上原本的 glView, 並限制 glView 的大小, 如此可以保證 glView 上所繪製的
            東西不會被其它 UIView 元件所覆蓋到.  

        b. 或著, 直接在 glView 上, 加上你所需要的 UIView 元件. 這樣會覆蓋到部分的
             OpenGL ES 畫面, 但不需要去調整背景色, 來讓畫面一致.

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

B. 開啓 AppDelegate.h 檔案, 修改如下:
#import <UIKit/UIKit.h>
//@add
#import "ViewController.h"
#import "GLView.h"

@interface AppDelegate : UIResponder <UIApplicationDelegate>
{
    UIWindow *window;
    //@add
    ViewController *viewController;
    GLView *glView;
   
    //@add for UIView overlay
    UILabel *label;   
    UIToolbar *toolbar;
}

@property (strong, nonatomic) UIWindow *window;
//@add
@property (strong, nonatomic) ViewController *viewController;
@property (strong, nonatomic) GLView *glView;

//@add for UIView overlay
@property (strong, nonatomic) UILabel *label;   
@property (strong, nonatomic) UIToolbar *toolbar;

//@add for UIView overlay
//
// Action methods for toolbar buttons
- (void)addButtonPressed:(id)sender; // Add
- (void)actionButtonPressed:(id)sender; // Action
- (void)cameraButtonPressed:(id)sender; // Camera

@end

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

C. 開啓 AppDelegate.m 檔案, 修改如下:
....
//@add for UIView overlay
@synthesize label = _label;
@synthesize toolbar = _toolbar;
....
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSLog(@"step 01. AppDelegate => didFinishLaunchingWithOptions");
    /*
    CGRect screenBounds = [[UIScreen mainScreen] bounds];
     ....
     return YES;
    */

    //@update for UIView overlay
    CGRect screenBounds = [[UIScreen mainScreen] bounds];
   
    self.window = [[UIWindow alloc] initWithFrame:screenBounds];
    self.viewController = [[ViewController alloc] init];
    self.window.rootViewController = viewController;
   
   
    //@add UIView overlay
    UIView *myUIView = [[UIView alloc] initWithFrame:screenBounds];
    // 將背景色設成跟 OpenGL 的背景色相同(在此為不透明灰)
    myUIView.backgroundColor = [UIColor colorWithRed:0.7f green:0.7f blue:0.7f alpha:1.0];

    self.viewController.view = myUIView;
   
   
    //@add label
    self.label = [[UILabel alloc] init];
    self.label.frame = CGRectMake(10, 10, 300, 40);
    self.label.textAlignment = UITextAlignmentCenter;
    self.label.text = @"Press Button";
   
    [myUIView addSubview:self.label];
   
   
    //@add toolbar
    self.toolbar = [UIToolbar new];
    self.toolbar.barStyle = UIBarStyleDefault;
    [self.toolbar sizeToFit];
    self.toolbar.frame = CGRectMake(0, 430, 320, 50);
   
    //@buttons
    // Add
    UIBarButtonItem *addItem = [[UIBarButtonItem alloc]
                                initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
                                target:self
                                action:@selector(addButtonPressed:)];
   
    // Action
    UIBarButtonItem *actionItem = [[UIBarButtonItem alloc]
                                   initWithBarButtonSystemItem:UIBarButtonSystemItemAction
                                   target:self
                                   action:@selector(actionButtonPressed:)];
   
    // Camera
    UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc]
                                   initWithBarButtonSystemItem:UIBarButtonSystemItemCamera
                                   target:self
                                   action:@selector(cameraButtonPressed:)];
   
    //Use this to put space in between your toolbox buttons
    UIBarButtonItem *flexItem = [[UIBarButtonItem alloc]
                                 initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                 target:nil
                                 action:nil];
   
    //Add buttons to the array
    NSArray *items = [NSArray arrayWithObjects: addItem, flexItem, actionItem, flexItem, cameraItem, nil];
   
    //add array of buttons to toolbar
    [self.toolbar setItems:items animated:NO];
   
    [myUIView addSubview:self.toolbar];
   

    //@for glView: 原始寬高 320 x 480, 須扣除 UIView 所佔的高度  
    self.glView = [[GLView alloc] initWithFrame:CGRectMake(0, 40, 320, 390)]; 
   
    //@add for delegate
    self.glView.delegate = self.viewController;


    [myUIView addSubview:self.glView];
   

    [self.window addSubview:self.viewController.view];
    [self.window makeKeyAndVisible];
   
    return YES;
}
....
//@add for UIView overlay
//
// Action methods for toolbar buttons

// Add
- (void)addButtonPressed:(id)sender
{
    self.label.text = @"Add";
}

// Action
- (void)actionButtonPressed:(id)sender
{
    self.label.text = @"Take Action";
}

// Camera
- (void)cameraButtonPressed:(id)sender
{
    self.label.text = @"Camera";
}
....

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

D. 編譯並執行
     1. 按下: "新增"

     2. 按下: "動作"

     3. 按下: "相機"

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

E. 直接在 glView 上, 加上你所需要的 UIView 元件
    1. 開啓 AppDelegate.h 檔案, 修改如下:
....
//@add for UIView overlay
//
// Action methods for toolbar buttons
- (void)addButtonPressed:(id)sender; // Add
- (void)actionButtonPressed:(id)sender; // Action
- (void)cameraButtonPressed:(id)sender; // Camera
- (void)myButtonPressed:(id)sender; // myButton
....

    2. 開啓 AppDelegate.m 檔案, 修改如下:
....
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
....
    [myUIView addSubview:self.glView];
   
   
    //@add button for glView
    UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    [myButton addTarget:self
               action:@selector(myButtonPressed:)
     forControlEvents:UIControlEventTouchDown];
   
    [myButton setTitle:@"myButton" forState:UIControlStateNormal];
    myButton.frame = CGRectMake(10, 340.0, 160.0, 40.0);
    [self.glView addSubview:myButton];
   
   
    [self.window addSubview:self.viewController.view];
    [self.window makeKeyAndVisible];
   
    return YES;
}
....
// myButton
- (void)myButtonPressed:(id)sender
{
    self.label.text = @"myButton";
}
....

    3. 編譯並執行:
        按下 glView 上的 button