時計アプリ(デジタル、アナログ)
今回は時計アプリを制作ということで、まずは単純に現在時刻が表示されるだけのデジタル時計を作ってみました。
まずはLabelをstoryboardにドラッグ&ペーストしてきて、 control押しながらViewController.hにもってって、ViewController.mにコードを書いていって…ですね。
仕組みとしては、現在の時刻を取得して画面に上書きするというのを0.1秒ごとに行うというものです。
一定周期で何かをさせたい時はNSTimerを使えばいいんですね。で、次が長いけれども、xcode君はとても賢いパートナーなので、全て覚えなくても"sche"あたりまで書くと、候補として以下のプログラムを「これでしょ?」みたいな感じで表示してくれるので、NSTimer以降は一瞬で入力することができます。
-----------------------------
[NSTimer
scheduledTimerWithTimeInterval:0.1
target:self
selector:@selector(update)
userInfo:nil
repeats:YES];
-----------------------------
ちなみにこれは0.1秒ごとに"update"という関数を繰り返しなさいという命令です。ここまでは書籍の解説もあり、なるほどねって感じですね。
で、次はこのデジタル時計の下にアナログ時計も付けてみよう!ということです。予め用意されている素材をサポートサイトからダウンロードできるファイルから読み込んで、配置していきます。
で、一定周期ごとに短針、長針、秒針を回転させるっていうプログラムになります。今日はここの部分を結構ググって調べることになりました。書籍ではちょっと説明が足りないので。
とりあえず、現在時刻を取得してnowという変数に格納するためには、こう書きます。これはお決まりのやり方のようです。
NSDate *now = [NSDate date];
で、ここで取得した時刻情報の表示形式を指定するのが"NSDateFormatter"です。
NSDateFormatter *df = [[NSDateFormatter alloc] init];
dfっていうものの中に時刻情報の表示形式を指定しますよ〜っていう宣言のようなものですね。
alloc?? init?? って感じでしたけど、このへんのサイトがわかりやすかったです。何となくですけど、イメージはできた気がします。
http://www.olein.net/study/20120719160000/
ま、これも決まり文句って感じですね。そういうものなんだと
-----------------------------
[df setDateFormat:@"HH:mm:ss"];
self.timeLabel.text = [df stringFromDate:now];
[df setDateFormat:@"ss"];
float s = [[df stringFromDate:now] intValue];
[df setDateFormat:@"mm"];
float m = [[df stringFromDate:now] intValue];
[df setDateFormat:@"HH"];
float h = [[df stringFromDate:now] intValue];
-----------------------------
@"HH:mm:ss"という形式にセットして、nowに格納した情報から現在時刻を取得して、timeLabelに表示させなさい。
@"ss"という形式にセットして、変数sに数値に変換してから格納しなさい。(秒数を数値にして変数sに格納しなさい。)
@"mm"という形式にセットして、変数sに数値に変換してから格納しなさい。(分を数値にして変数mに格納しなさい。)
@"HH"という形式にセットして、変数sに数値に変換してから格納しなさい。(時間を数値にして変数hに格納しなさい。)
で、これらを最後時計の針を回転させる時に使います。
素材を回転させたい場合は以下を使います。"cga"と打つとxcode君が候補としてすぐに出してくれるのでとても楽チン!
self.hand1.transform = CGAffineTransformMakeRotation(M_PI * 2 * h / 12);
最後の()内には回転させたい角度を入れるのだけれど、これがまた日本人が使う角度ではなく、ラジアン角度といって、国際基準の表し方で指定します。てか、プログラミングでは多くの場合に角度といえばラジアン角度を使うようです。
書籍ではここの説明がなく完全に?????でした。
とりあえず、M_PIというのは円周率(π)のことなんだなと。
http://iphone-tora.sakura.ne.jp/kihon_function.html
ラジアン角度の指定の仕方についてはこのへんのサイトが参考になりました。
http://uqtimes.blogspot.jp/2012/04/blog-post_25.html
http://flashrave.org/relate/angle/
12時間、60分、60秒は全て角度でいくと360度だし、とにかくラジアン角度っていうのは"円周率(π = M_PI) × 2 × 角度"ってしとけばOKってことなんですね。
というわけで、今日はちと難しくなったけど、何とか消化することができました!
* この記事はこの書籍で勉強しています。