アプリ開発 時計 「時刻に合わせて画像がひょうじされる」をつくろう

URU×2 の備忘録: アプリ開発　時計　時刻の秒数に応じてラベルの背景色が変化
のつづき

前回で時刻の秒数に合わせて条件分岐するコードを身につけました


今回は
この条件に合わせて時刻の画像が表示されるようにしたいと思います

例えば
秒数が３６秒の時、「３６」の画像が表示される
みたいな


■　やってみよう

まず、iDrowなど画像ソフトで秒数の画像を作成します
ここではテスト用に0,1,2,12,24,36,48を作ってみました
サイズは横90pixel　縦120pixel




・画像表示のコード

(UIImageView) 画像を貼ってみよう！：初心者から始めるXcode：So-netブログを参考にして


あらかじめstoryboardにImage Viewを配置して
ViewController.hにドラッグアンドドロップして「myImagesec」と変数宣言 しときます

画像を表示するコードは
------------------

_myImagesec.image = [UIImage imageNamed:@"second36.jpg"];

------------------
とこんな感じ画像名を指定して表示



・組み合わせる

コードで画像を表示できたので
今作ってる時計アプリの条件分岐と組み合わせると

(NSTimerのIntervalで呼ばれるtimerメソッド内にあるswitch文にて)

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

switch (second) {

case 0:
_myImagesec.image = [UIImage imageNamed:@"second00.jpg"];
break;

case 1:
_myImagesec.image = [UIImage imageNamed:@"second01.jpg"];
break;

case 2:
_myImagesec.image = [UIImage imageNamed:@"second02.jpg"];
break;

case 12:
_myImagesec.image = [UIImage imageNamed:@"second12.jpg"];
break;

case 24:
_myImagesec.image = [UIImage imageNamed:@"second24.jpg"];
break;

case 36:
_myImagesec.image = [UIImage imageNamed:@"second36.jpg"];
break;

case 48:
_myImagesec.image = [UIImage imageNamed:@"second48.jpg"];
break;



default:
_myLabel6.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0.5 alpha:0.3];

break;
}
-----------------



実行すると






36秒の時
「３６」の画像が表示されました。


時計の内部が出来上がってきたので
今度はUIデザインを作っていこう