まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを。参照していないものに関しては、コピペ改変まったく問いません

iPhoneのカメラ画像の上にUIパーツを置く

お題の通り、iPhoneのカメラ画像の上にラベルをオーバーレイしたときのメモです。

Viewをひとつ追加してカメラ画像を表示させる部分を書く。最後に.cameraOverlayViewを追加するだけ。

具体的な手順は以下のようになります。
IBを使用すること前提で書いています。

1.サブクラスを追加する
 なんちゃらViewController.hとm(ここではARTestViewControllerとします)が入っているフォルダを右クリックして「New File」を選ぶ→Objective-C classを選んでサブクラスをUIViewにして名前をつけて追加する
ここでは名前をARUeViewにしました。

2.ARTestViewController.xibをクリック、Viewを追加する(Show the Object libraryをクリック、Objects→Viewを元からあるViewにドラックする)

3.新しく追加したViewを選択し、Show the Identity inspectorをクリック、Custom ClassのClassをARUeViewにする。このとき新しいViewの背景をClear color(透明)にしておくことを忘れずに

4.ARTestViewController.hに以下を追加する

@class ARueView;
@interface ARTestViewController : UIViewController
{
    IBOutlet ARueView *arueView;
}
@end

5.ARTestViewController.xibをクリック、以下のことを行います。
・元々あるViewにボタンを追加、ARue View上にラベルを追加する
・File's Ownerを右クリック、controlを押しながらarueViewとARue Viewを接続する

6.ここからカメラ画像を表示させる準備をします。

ARTestViewController.hに以下を付け足します。

-(IBAction)CameraOn:(id)sender;

7.ARTestViewController.xibを選択してFile's Ownerを右クリック、CameraOnとボタンを接続する

8.ARTestViewController.hに以下を追加する

@interface ARTestViewController : UIViewController  <UIImagePickerControllerDelegate>

{
    IBOutlet ARueView *arueView;
    UIImagePickerController *imagePicker;
}

9.ARTestViewController.mに以下を追加する

#import "ARTestViewController.h"
#import "ARueView.h"
....
- (void)viewDidLoad
{
    [super viewDidLoad];
    imagePicker = [[UIImagePickerController alloc] init];
 //UIパーツを置くView「ARueView」を非表示にしておく。表示したい場合は消す
    [arueView removeFromSuperview];
}
//カメラ画像表示+オーバーレイ
-(IBAction)CameraOn:(id)sender {
    
    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
        imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera;
        imagePicker.showsCameraControls = NO;
 //オーバーレイ
        imagePicker.cameraOverlayView = arueView;

        [self presentModalViewController:imagePicker animated:NO];
    }

}

...

- (void)dealloc {    
    [imagePicker release];
    [super dealloc];
}
@end

こんな感じ。
ソースファイルはこちらです。