第1回: 時刻を表示する

« 時計アプリを作ろう

書籍 »

プロジェクトを作成

File > New > New Projectで、Empty Applicationを作成します。プロジェクト名とClassPrefixは”Clock”を指定してください。

1. ClockViewControllerを作成

UIViewControllerを継承してClockViewControllerを作成します。

File > New > New Fileで、UIViewController subclassを選択します。
クラス名(Class)をClockViewController、継承元(Subclass of)をUIViewControllerと設定し、Nextをクリックします。
ファイルは他のソースコードと同じディレクトリに保存してください。

2. ClockViewControllerをスクリーンに表示

ClockAppDelegateに7行目を追加します。これで1で作ったClockViewControllerが画面に表示されるようになります。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColor whiteColor];

self.window.rootViewController = [[ClockViewController alloc] initWithNibName:nil bundle:nil];

[self.window makeKeyAndVisible];
return YES;
}

3. ClockViewControllerにUITextLabelを表示

ClockViewController.mのinitWithNibNameを書き換えます。まず、このメソッドの手前に”UILabel *label;”を追加します。これは時刻表示用のラベルなのですが、一定の時間間隔で表示内容を変更できるように関数の外に定義しています。

UILabel *label;//時刻表示用のラベル: 複数のメソッドで利用するのでグローバル変数として定義

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
label = [[UILabel alloc] init]; //ラベルを初期化
label.text = @"timer"; //ラベルにtimerと表示
label.frame = CGRectMake(10.0f,10.0f, 300.0f, 100.0f);//ラベルの表示位置を指定
label.textAlignment = UITextAlignmentCenter;//文字揃えを中央揃えに設定
label.font = [UIFont fontWithName: label.font.fontName size: 26.0f];//フォントサイズを26ポイントに変更

[self.view addSubview:label]; //作成したラベルを画面に表示
[self.view setBackgroundColor: [UIColor lightGrayColor]]; //背景色を灰色に変更
}
return self;
}

実行結果

実行結果が以下のような画面になれば成功です。

4.タイマーを作成

現在時刻の表示部分を実装します。時刻は0.02秒間隔で書き換えるものとします。

ソースコード

先頭の行にNSTimer *timer;を追加し、このタイマーの起動と、タイマーの処理内容を実装します。

NSTimer *timer; //タイマー
UILabel *label;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
label = [[UILabel alloc] init];
label.text = @"timer";
label.frame = CGRectMake(10.0f,10.0f, 300.0f, 100.0f);
label.textAlignment = UITextAlignmentCenter;
label.font = [UIFont fontWithName: label.font.fontName size: 26.0f];

[NSTimer
scheduledTimerWithTimeInterval:0.02f //0.02秒間隔で実行する
target:self //自らのクラスの
selector:@selector(updateClock) //updateClockメソッドを
userInfo:nil //気にしなくてもok
repeats:YES]; //繰り返し実行する

[self.view addSubview:label];
[self.view setBackgroundColor: [UIColor lightGrayColor]];
}
return self;
}
-(void)updateClock //このメソッドが0.02秒間隔で実行されます。
{
NSDate * date = [NSDate date]; //現在時刻を生成
NSDateFormatter * form = [[NSDateFormatter alloc] init]; //フォーマッタを生成
[form setDateFormat: @"yyyy/MM/dd HH:mm:ss.SS"]; //フォーマットを設定
NSString * datetime = [form stringFromDate: date]; //日付をフォーマット
label.text = datetime; //ラベルに設定
}

スクリーンショット

実行すると以下のような画面が表示され、時刻がめまぐるしく更新されます。

課題

時分秒だけが大きく表示されるようにして下さい。
ヒント: フォントサイズ変更、フォーマット指示を変更、更新間隔を変更
画面描画の停止と再開ボタンを設置して下さい。
ヒント: UIButtonを使う。難易度高め。