ホーム / xcode /

xcodeプロジェクト作成とUIパーツの配置

2019年9月18日水曜日

swift tutorial xcode

t f B! P L

今回はXcodeのプロジェクト作成とUIパーツの配置の方法を紹介していきます。


プロジェクト作成

xcodeを起動するとWelcome to Xcodeと書かれた初期画面が現れます。
今回は新規プロジェクトを作成するのでCreate a new Xcode projectを選択します。


テンプレート選択

赤枠の部分からプラットフォームを選択し、青枠の部分からテンプレートを選択します。
今回はプラットフォームをiOS、テンプレートをSingleViewAppを選択します。
（iosアプリは基本はSingle View Appで作成します）



プロジェクト設定

プロジェクト名や言語などを設定します。

Product Name: アプリまたはプロジェクトの名前
Team アプリを公開するときや実機に入れる時に必要になります
Organization Name 組織名や個人名
Organization Identifier アプリ公開の時に必要になるID
公開しない場合は適当でも大丈夫です
Language 開発言語


入力が終わったらNEXTを押します。



保存場所を決めてCreateを押します。

以下の画面がでてきたらプロジェクトの作成は成功です。


Xcodeの開発画面

画面構成

Xcodeの開発画面は主に５つのエリアで構成されています。
ツールバー ビルドの実行や全体のエリアを表示非表示にします。
ナビゲーターエリア 編集するファイルの選択、ファイル内検索やアプリの解析が行えます。
エディターエリア ナビゲーターエリアで選択されたファイルを編集します。（コーディングやレイアウトなど）
ユーティリティエリア アプリ開発で使用するUIなどの情報の設定を行います
デバッグエリア プログラム実行時のデバックログやエラーのメッセージが表示されます


それぞれの画面は自由に大きさを変えられるので自分の作業しやすいレイアウトに変えることができます。また画面右上の３つのボタンを使うことで表示非表示を切り替えられます。

Simulaterを起動させてみよう

コードは何も書いていませんが空のアプリを作成できます。
右上にあるsimulaterが「iPhone xx」であることを確認し三角印ボタンを押します。
もし「iPhone xx」ではない場合クリックして選択できます。
コマンドで起動する場合はcommand + R


simulater が起動して真っ白な画面が現れたら成功です。



UIパーツを置いてみよう

ナビゲーターエリアにあるMain.storyboardファイルをクリックして画面レイアウトを表示させましょう。


上の画像と同じ画面が表示されたら左上にある丸の中に四角が書かれているのボタンを押してください。（コマンドの場合command+shift+L）
UIのlibraryが現れるのでUIを選んでstoryboard内のiPhoneの中にドラックしましょう。


UIを配置したら再度simulatorを起動してみましょう
下の画像のように配置した場所に表示されていたら成功です。

QooQ