エンジニア転職活動日記 #3 画面をつくってみた
こんにちは、ひろです。
今日は画面を作った時の備忘録を残してみようと思います。
１．プロジェクトの作成
前回インストールまでやったXcodeを起動してみると、こんな画面がでます。
新規作成したいので
create a new Xcode project
を選択。すると、
どのプロジェクトを選ぶか聞かれます。
ここはAppを選択して、次へ。
TapButtonという名前でprojectを作ってみました。
InterfaceはStoryboardにして、次へ。
これでやっと立ち上がりました。
２．レイアウトの作成
今回作成するのは、
・Aボタンを押すと文字が変化する
・Bボタンを押すと画面移動する
機能にしたいと思います。
まずはレイアウトから。
Storyboardを開き、Label 1つと Button 2つを配置していきます。
右上の＋を押して選択画面を出し、ドラッグ&ドロップします。
こんな画面にしてみました。
ボタン、ラベルのプロパティは以下で編集。
３．ボタンの機能で文字を変える
次はAボタンを作成します。
Aボタンを押すと、画面上のラベル「Aボタンを押してください」を
「やったね！」という文字に変えてみます。
ここからようやくプログラムの記述です。
1つのStoryboardには1つのViewControllerというファイルを紐付けなければ
いけません。今回は1画面目なので、デフォルトで準備されています。
ViewController.swiftというファイルを選択すると、以下の画面になります。
viewDidLoadという関数が、画面起動後に実行される関数になります。
今回は「ボタンを押してから」動かすので、使いません。
さて、このswiftファイルには先ほど追加したボタンやラベルが紐づいていないので、
紐付けを行なっていきます。
Storyboardを開いて
control + option + command + enter
を押して、画面を並べていきます。
Storyboard上のラベルを、controlを押しながら
swiftファイルの12行目くらいにドラッグ&ドロップします。
すると、
こんな感じのポップアップが出るので、名前を入れてconnectを押します。
これでOutletが作成できました。
Outletというのは、Storyboard上の部品のことだと認識しています。
それをSwiftファイルに紐づける=Outletを作成する
と思ってますが、大体あってるとは思います。
同様にボタンのOutletも作成していきます。
こんなものでしょうか。
次に、ボタンを押した時の動作を作成します。
Storyboard上のボタンを、controlを押しながら
swiftファイルの21行目くらいにドラッグ&ドロップします。
今度はこのような画面になるので、名前を入れてconnectを押します。
A、BボタンそれぞれのActionが作成できました。
Actionは、部品を動作させた時に実行される関数という認識をしています。
Outlet作成はviewDidLoad関数の上、Action作成はviewDidLoad関数の下
という形で覚えています。
Aボタンを押した時に文字を変化させるので、それを記述してみます。
では実際に動かしてみます。画面左上の再生ボタンを押すと、シュミレータが起動します。
少し右にどのシュミレータを起動するか選択するところがあるので、
Storyboardと同じiPhone11を選択します。
これで動作確認まで完了です！
今回はここまでにします。
やってることはめちゃくちゃ簡単ですが、実際にシュミレータとかで動かしてみると
やっぱり嬉しいもんですね。笑
今週いっぱい仕事が夜勤＋長時間残業で全然自分の時間がなかったです。
勉強もトレーニングもまったく、、、
今週末でしっかり取り返していきます！
Youtube開かずがんばるぞー！笑
