アプリを作ってみたいがどうすればいいか分からない。
そんな人のためにこんな感じでアプリ作るんだよ〜というのを解説します。
アプリ開発の壁を熟知したゴミプログラマーの僕が初心者の視点に立って分かりやすく解説することを心がけます。
今回は前回のレイアウト編の続きということで、コードを書くということを体験してみたいと思います。
再度下の画像の赤枠部分をクリックし、labelと入力します。
するとLabelという項目が一つ出てくるので、それを下の画面のように配置します。（この辺は前回やったような感じでドラック&ドロップで配置します）
このようにラベルを配置できたら、次はコードを書く準備をしましょう。
下の画像の赤枠の「ViewController.swift」をクリックしてください。
するとこのような画面が表示されると思います。
この画面がコードを書く画面です。
英語ばかりで少し戸惑うと思うのですが、ここにカタカタとコードを書くことによって、アプリが自在に動くようになります。
そしてアプリを動かすには、このコードの画面と先ほどボタンやラベルを配置したiPhoneのレイアウト画面を繋ぎ合わせる必要があります。
なので先にその繋ぎ合わせの作業を行っていきたいと思います。
コードとレイアウトを繋ぎ合わせる
まず下の画像の赤枠の「Main.storyboard」と書かれた項目を、Optionキーを押しながらクリックします。
すると、以下の画像のようにコードの画面とレイアウトの画面にXcodeの画面が分割されます。
では下の画像を見てください。
この分割された状態で右側の画面（レイアウトの方の画面）の①のLabelを、Controlキーを押しながらLabelをクリックした状態で左側の画面（コードの方の画面）にビーっと引っ張ってみましょう。
すると引っ張った方向に矢印が表示されます。
そしてそのまま「class ViewController: UIViewController { 」と「override func viewDidload() { 」の行の間に矢印を持ってきて、クリックし続けている指を離します。
すると以下の画面のように小さなダイアログが表示されます。
このダイアログには上の画像のようにNameの項目に「testLabel」と入力しましょう。
そしてそのままダイアログの右下にあるConnectボタンを押します。
すると、「class ViewController: UIViewController { 」と「override func viewDidload() { 」の行の間に一行追加されたと思います。
これでレイアウト画面のLabelとコード画面の紐付けが完了しました。
ではこれと同じ要領でボタンの方も紐付けをしていきましょう。
上でやったようにレイアウト画面のButtonをControlキーを押しながらクリックし、左側のコード画面に引っ張ってきます。
今度はコード画面の下の方の
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}と書かれたコードの下に引っ張ってきます。
すると以下の画面のようにまたダイアログが表示されますが、このダイアログの一番上の「Connection」の項目がOutletになっていると思うので、それをActionに変えましょう。
こうすることでボタンがクリックされた時に画像を表示したり、画面を切り替えたりというようなアクションを実行することが可能になります。
そしてダイアログのNameの項目には「testButtonAction」と入力しておきましょう。
これでConnectボタンを押すと、コード画面は全体的に以下のような感じになるのではないでしょうか。
これでコードとレイアウトの紐付けは完了です。
結構やることがあって少しボリューミーになりましたね。
なのでコードは次回書きたいと思います。
すいません、コードを書く書くと言いながら引っ張りまくって。
でもキリがいいのでマジで次回にします。
では、お疲れ様でしたmm
コメント