iphoneアプリ開発を勉強し始めて2日目になりました。
Xcodeを使って、UIパーツを並べてレイアウトを作成する方法がだんだんわかってきましたので、自分への備忘録も兼ねてご紹介します。
UIコンポーネントを設置する
プロジェクトを作成後、上の画像のように
Main.storyboard > View Controller > View
を選択してください。
選択した状態で右下の二重丸のマークをクリックすると、配置するUIパーツを選択できます。ここで選択したUIパーツをstoryboardに乗せていき、パズルを組み立てていくようにレイアウトを作成します。
Labelを配置
右下のUIパーツ選択画面から【Label】を選択し、storyboardにドラッグ・アンド・ドロップして、Labelを配置してください。
そして、配置したLabelを選択した状態で、右上の【Show the Attributes Inspector】をクリックすると、そのLabelの文字を変更したり、色や背景色を装飾したり出来ます。
おみくじアプリを作ると仮定して、
- LabelというTextを「おみくじ」
- Fontを「System 24.0」
- Colorを「#ffffff」
- Backgroundを「#000000」
に変更しましょう。変更すると以下のような状態になります。
」
次は、今回作ったLabelパーツをアプリのタイトルとして、画面上部に横幅いっぱいで表示します。
UIパーツの配置や大きさを調整するために、storyboardの右下に表示されているスター・ウォーズの宇宙船のようなマーク(Add New Constraints)をクリックします。
この編集画面が表示されたら、
- 上からの距離０
- 左からの距離０
- 右からの距離０
- 高さ60
という４つの制約(constraint)を追加します。
この制約が設定されると、以下のようにタイトル部分が上にくっついて画面いっぱいに表示されます。
最後に、タイトルが左寄せになっているのが気になるので、「おみくじ」という文字や文字サイズ・文字色を設定したパネルから、「Alignment」の真ん中寄せを選択して、文字を真ん中に寄せてください。
これでタイトル部分の完成です！
アクションに反応するButtonを設置
タイトル部分が完成したので、次は「おみくじを引くボタン」を配置しましょう。
Labelに似ているのですが、Buttonはタップしたときに反応するUIパーツです。
Labelを配置したときと同じように、右下のUIパーツを選択する部分から、「Button」をドラッグ・アンド・ドロップでstoryboardに配置します。
そして、Labelの装飾や配置を調整したときと全く同じやり方で、ボタンの位置と見た目を設定します。
- 左からの距離0
- 右からの距離0
- 下からの距離0
- 高さ70
という４つのconstraintsを設定
- 文字列をおみくじを引くに変更
- テキスト色を白
- 背景色を青
に設定。
これで、おみくじを引くボタンを作成できました。
色や配置は自由に設定してください！
結果表示用のLabelを設定する
最後に、おみくじの結果を表示するようなLabelを設置しましょう。
これはタイトル部分で解説した方法と全く同じなので、細かい説明を割愛します。
- タイトルとボタンの間にLabelを配置
- 上下左右からの距離０
- 背景色ピンク
- 文字色黒
- フォントサイズ36
- 真ん中寄せ
にて作成した結果は以下のようになります。上下左右からの距離0に設定しているため、上下のパーツいっぱいまで範囲を広げデバイス幅100%で領域を設定できました。
動的化すれば完成
これでXcodeでレイアウトをする方法の紹介は終了です。
次の記事で、「おみくじを引く」ボタンを押すと、「大吉！！」の文言が変わるようなプログラムの書き方を紹介しますので、是非読んでくださいね！
