プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

はじめてのカメラアプリ vol.19 UI編 スタンプ選択画面作成

2013.12.24 火曜日 07:43:18

a0001_013324_m_02

前回は「えっ、今更ページ遷移の仕方?!」と思わせてしまい、失礼しました。
でも、ほとんどコードを書くこと無く、storyboardのみで遷移が実現することには驚きでした。
あとは個人的にスライドでページ遷移するのが、まさにスマホアプリという感じで気分良かったです。

さて今回、スライドはしないですが、インターフェース周りです。スタンプの選択画面を作ってみようと思います。

インスタンス宣言

まず、インスタンス宣言をします。
今回は、上から順にスタンプを並べるウィンドウになるものをstampPanel、ウィンドウを閉じるボタンをstampPanelClose、スタンプをstampThumb1として宣言します。

@property (nonatomic, weak)  IBOutlet UIView *stampPanel;
@property (nonatomic, weak)  IBOutlet UIView *stampPanelClose;
@property (nonatomic, weak)  IBOutlet UIButton *stampThumb1;

オブジェクトの生成

オブジェクト生成部分の記述です。
画像パーツとして、「close_1.png」「icon_1.png」が設定してありますので、プロジェクトのフォルダに40×40の画像を2つ用意しておいてください。

- (void)viewDidLoad
{
    [super viewDidLoad];

    // スタンプの表示パネル生成
    UIView *stampPanel = [[UIView alloc] initWithFrame:CGRectMake(0, 120, 320, 300)];
    stampPanel.backgroundColor = [UIColor lightGrayColor];
    _stampPanel = stampPanel;
    [self.view addSubview:_stampPanel];
    
    // スタンプの表示パネルの、クローズボタンを生成
    UIButton *stampPanelClose = [[UIButton alloc] initWithFrame:CGRectMake(275, 5, 40, 40)];
    stampPanelClose.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"close_1.png"]];
     [stampPanelClose addTarget:self action:@selector(stampPanelClose:) forControlEvents:UIControlEventTouchUpInside];
    [_stampPanel addSubview:stampPanelClose];
    
    // スタンプ生成ボタン
    UIButton *stampThumb1 = [[UIButton alloc] initWithFrame:CGRectMake(20, 20, 40, 40)];
    stampThumb1.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"icon_1.png"]];
    //stampThumb1.delegate = self;
    [stampThumb1 addTarget:self action:@selector(stampMake1:) forControlEvents:UIControlEventTouchUpInside];
    _stampThumb1 = stampThumb1;
    [_stampPanel addSubview:_stampThumb1];
    
    stampPanel.hidden = YES;
}

ボタンのアクションを設定

続いて、@implementation ViewControllerの下部に、以下を記述します。

- (IBAction)stampPanelBtn:(id)sender {
    // スタンプパネルの表示
    _stampPanel.hidden = NO;
}

-(void)stampPanelClose:(UIButton*)stampPanelCloseBtn{
// スタンプパネルを隠す
    _stampPanel.hidden = YES;
}

-(void)stampMake1:(UIButton*)stamp1{
    //スタンプを生成
    UIImage *imageData = [UIImage imageNamed:@"icon_1.png"];
    UIImageView *viewObject = [[UIImageView alloc] initWithFrame:(CGRect){100,100,40,40}];
    viewObject.image = imageData;

    viewObject.tag = 1;
    [self.view addSubview:viewObject];
    _stampPanel.hidden = YES;
}

storyboardにUIButtonを配置し、stampPanelBtnとアウトレット接続を行えば完成です。
ボタンを押すとsubviewが表示されて、スタンプが選択できます。右上のcloseボタンを押すとsubviewを閉じます。

スタンプは変数化して沢山並べたいのですが、それはまた次回です!

今回の参考サイトはこちらです。ありがとうございました!
プログラムで複数配置したUIButtonで、どのUIButtonが押されたか判別したい

Category:Development , Project , Xcode , はじめてのカメラアプリ     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project