iPhoneアプリ:カラービューワーをつくる

 iPhoneアプリの例としてカラービューワーを作ってみます。カラービューワーはスライダの値に応じてビューの色が変わるアプリです。Viewやスライダの使い方が学べます。

カラーエディタアプリ

 

プロジェクトの作成

まず、Single View Applicationでプロジェクトを作成します。

プロジェクトの作成

プロジェクト名などは好きにつけてください。

画面のレイアウト

 画面のレイアウトを行います。Main.storyboardを選択します。すると以下の様な画面が表示されます。

画面のレイアウト

右下の部品から「View」を選択しドラッグアンドドロップで画面に貼り付けます。

Viewの貼り付け

Viewの大きさは自由に設定してください。そして、Backgroundを「Light Gray Color」にしておきます。

バックカラーの設定

次にスライダを設置します。ドラッグアンドドロップで設置してください。ここでは3つのスライダを設定します。

スライダの設置

さらに、ラベルも設置しておきます。

ラベルの設置

最終的に以下のようなインターフェースになりました。

インターフェース

次に、配置に制約を追加します。まず、すべての部品を選んで、以下のように左右端を20で固定します。左右の固定端を赤色にして「Add 10 Constratints」を選択します。

配置の制約

そして、Viewの上のスペースと高さを固定します。そのためにViewを選択して同様に以下のように設定します。

高さの固定

同様にして、ラベルとスライダも設定します。

【ラベル】

ラベル

【スライダ】

スライダの設定

レイアウトの確認は以下のボタンで行えます。

画面の切替

iPhone 4sまでの4:3の画面とiphone5以降の16:9の画面を切り替えることができます。

ソースを書いていく

 レイアウトが完成したのでソースを書いていきます。部品とソースを対応づけるため、以下のボタンをおして画面を2つみえるようにします。

2画面

そして、ネクタイのようなボタンを押せば、mファイルかhファイルかを設定できます。ここではmファイルを選択します。

ソース

Viewとソースをつなげるために、コントロールを押しながらViewを「ソースの@interfaceの下」へドラッグアンドドロップします。そして、「Outlet」をえらびNameを「viewcol」とします。

つなげる

同様にして、ラベルやスライダもつなげます。すべてOutletでNameは

  • label
  • redSldr
  • greenSldr
  • blueSldr

とします。

 次にアクションを追加します。スライダをコントロールを押しながら「ソースの@endの上」にドラッグアンドドロップします。

アクションの追加

他の2つのスライダは上記の方法で作成されたコードの

「-(IBAction)sldrChanged:(id)sender{」

の上にコントロールを押しながらドラッグアンドドロップでつなげます。「Connect Action」が表示されるはずです。

 この追加されたコードはスライダを実行する際に読まれます。ですから、このコード部分に命令を書いていきます。

- (IBAction)sldrChanged:(id)sender {
    float r=self.redSldr.value;
    float g=self.greenSldr.value;
    float b=self.blueSldr.value;
    UIColor *color=[UIColor colorWithRed:r green:g blue:b alpha:1.0f];
    self.viewcol.backgroundColor=color;
    
    NSString *codeStr=[NSString stringWithFormat:@"%02x%02x%02x",(int)(r*255),(int)(g*255),(int)(b*255)];
    self.label.text=codeStr;
}

まず、「self.redSldr.value」でスライダの値を読み込みます。スライダの値は0-1で返されます。そして、colorの部分で色へ変換して、self.vewcol.backgroundColorでViewの色を設定します。最後にself.label.textに色情報をテキストとして出力します。%xで16進数に変換となり、%2xなら16進数に変換したものの二桁を表示することになります。

 以上で完成です。実行すれば、スライダの値に応じて窓の色が変わります。

著者:安井 真人(やすい まさと)