Interface Builderとは、ボタンやテキストボックスなどの”見た目”を配置することができ、画面遷移など言わばアプリ開発の要である設計を、ソースコードなしでかつドラッグ＆ドロップで作成することができます。
今回は、簡単な使い方ということで、”Hello Xcode!!”というテキストを画面に表示させたいと思います。
では、前回説明した通り、”Hello Xcode”というプロジェクトを作ってみましょう。
Xcodeを開いて、
Create a new Xcode project → Single View Application → product name を”Hello Xcode”としてCreate
としてみてください。
次に、表示されたプロジェクト画面のナビゲータエリアからMain.Storyboardを選択してください。そうするとエディタエリアに、下記のようなView Controllerが表示されると思います。これがアプリの見た目を配置していく画面となります。つまり、この画面がiPhoneのシミュレータの画面であり、アプリ公開後もこの画面通りにユーザにも見えるということになります。
まずは、画面が大きいので、iPhone5s用つまり４インチに変更したいと思います。下記の通り、４つの処理をする必要があります。
①ターゲットとなるView Controllerの指定
表示されている四角枠の画面をクリックするとView Controller選択できます。今回は１画面ですが、今後画面が増えて行った場合にどの画面の”見た目”を変更するかを選択する必要があります。
②レイアウト変更
ユーティリティエリアの下矢印のようなマークを選択してください。このマークがレイアウト変更の設定ができるボタンになります。
③サイズ変更
Simulated MetricsのSizeが画面サイズの変更になります。４インチを選択してください。選択と同時に画面サイズが変わります。
④ビルドターゲットの変更
こちらはビルドターゲットになります。デフォルトはiPhone 6になっているため、iPhone5Sに変更してください。
※iPhone6用のアプリを作成する場合は、そのままで結構です。作成したいアプリのターゲットに合わせて変更してください。
では、変更した4インチの画面に”Hello Xcode!!”と表示させたいと思います。
ユーティリティエリアの下の方に、”見た目”を作成するための部品が用意されています。
今回は、"Label"というテキストを表示させる部品を使いたいと思います。部品一覧よりLabelをドラッグ＆ドロップでiPhone画面まで持っていきます。
そうすると、iPhone画面上に”Label”と表示されます。はい、これで見た目作成完了です！
あとは、この文字を変更したり、フォントサイズ、色を変えたりしていくだけの作業になります。
文字の編集は、Labelをダブルクリックして編集するか、右側のユーティリティエリアの”Text”欄へ直接文字を入力してください。Labelのサイズが小さくて文字が全て表示できないと思いますので、Label自体を選択して、サイズを大きくしてください。
次は、色やサイズ、配置の変更です。文字編集と同じくユーティリティエリアの”Color”で文字色を修正したり、"Font"では文字の大きさ、"Alignment"では文字配置を修正できます。
そのほかにも行数や背景色などいろいろ設定ができますので、いろいろ試してみてください。
ここまで作成したら、Xcode上部のツールバーの再生ボタンよりビルド＋iPhoneシミュレータを起動させてみましょう。
"Build Succeeded "と表示され、下記のようにiPhoneシミュレータが起動したら成功です。
次回は、ボタンとテキスとボックスについて説明し、簡単なソースコードを書いてみたいと思います。
0 件のコメント:
コメントを投稿