【初心者向け】iPhoneに入っている電卓アプリと同じ画面を作ってみるよ その3


iPhoneに入っている電卓アプリと同じ画面を作ってみるよ

ストーリーボードを使って電卓アプリの画面を作ってみますよ!
目指すはiPhoneにプリインストールされている例のヤツです。
s47_1
なお、様々な画面サイズに対応させるためにAuto Layoutをフンダンに利用していくことにします。

前回、iPhoneに入っている電卓アプリと同じ画面を作ってみるよ その2では、
まず「.」のボタンを作成しました。
あとは同じ要領で他のボタンを作成するんでしたね!

作成した結果がコチラ↓↓↓
s49_1
+/-だけ画像なのでしょうか。ちょうど良い記号がなかったので、普通に文字で打ちました…orz
※+/-が2つありますが、ただの間違いです…右の方は%です。すみません。。。
以下のスクショも全て間違えています笑

あとは数字を表示する部分の作成です。これもラベルで簡単に設定することができます。
では、早速やっていきましょう!

数字を表示するラベルを作成しよう!

これはなんてことない、タダの黒色のラベルと白色の文字ですね。とても簡単です。

①ラベルを配置して背景色・文字色・表示を変更する

アトリビュートインスペクタから設定を以下のように変更してしまいましょう。

項目
文字 0
Color 白色
Alignment 右端揃え(真ん中のボタン)
Background 黒色

s49_2

まだ小さいままですが、ラベルが変更されたと思います。
s49_3

②Auto Layoutの設定をして画面上いっぱいに表示する

ラベルを選択した状態から、おなじみの「Add New Constraints」メニューで設定していきます。
今回は1手順追加します。
まず、ラベルの上端を画面上側にぴったりとくっつけたいので、上部分の入力欄の右側にある
▲をクリックして「View」を選択します。おそらく最初は「Top Layout Guide」が選択されている
と思いますので変更します。
s49_4
あとは「Constrain to margin」のチェックを外して数値を全て0にし「Add…」をクリックします。
s49_5
ラベルが画面全体に広がります。
s49_6

②文字の大きさ・フォントを変更する

フォントを見やすいサイズに変更しましょう。
実際にアプリで使用されているフォントが分からないので、デフォルトのものを使います。
少し細くしたいので「Style」をthinに、「Size」は90くらいに設定します。
s49_7

③ステータスバーの色を色々に変更する

ラベルを画面上部いっぱいに配置してしまったため、ステータスバーが隠れてしまっています。
s49_8
ステータスバーを白色に表示するようにしましょう。
info.plistの設定を変更していきます。
その中に「Status bar style」の項目がありますので、その右側を
「UIStatusBarStyleLightContent」に変更します。
s49_9
さらにもう1つの条件をこのplistファイルに付け加えます。
どこでも良いのでリストの上にマウスカーソルを乗せると、+と-のマークが表示されます。
s49_10
+マークをクリックすると項目が1つ追加されますので、その項目を
「View controller-based status bar appearance」
に変更します。
s49_11
「Type」をBoolean、「Value」をNoに設定します。
s49_12
これで全ての設定が完了です。実際にシミュレータで試してみましょう。
s49_13

いかがだったでしょうか。ストーリーボードを利用することでコードを書かずに
アプリのレイアウトを作成することができます。Auto Layoutなどとても便利な
機能がありますので、使い方をしっかりと理解するようにしましょう。

  • このエントリーをはてなブックマークに追加

PAGE TOP