テックキャンプ118日目〜ストーリーボードとコードの紐付け

kobasaです(´ω`*)
Xcodeではスマホ画面とコード画面を行き来して記述するのが新鮮ですね。
スマホ画面ではイラレのような動き、コード画面ではJavaScript寄りの動きって感じ。
(RubyよりかはJavaScriptに近い感じ)

118日目の勉強内容

ストーリーボードとコードファイルの紐付け

swiftには1つのスマホ画面には1つのコードファイル(.swift)という決まりがある。
ストーリーボードに初めから配置されているスマホは「ViewController.swift」というコードファイルと紐づいている。

遷移先の為に追加したスマホにはコードファイルがないので作成する必要がある。
アップルメニュー横からFile ⇨ New ⇨ Fileを選択。
iosタブの「Cocoa Touch Class」を選択し、next。
Name:クラス名(コードファイル名)、Subclass:親となるスマホを選択する。
swiftファイルが作成できたら追加したスマホ画面を選択し、右側エリアの「?」と「→」の間のボタンをクリックし、Classに作成したswiftファイルを選択して紐付け完了。

コードファイルに処理を追記

コードファイルを作成するとClass名と画面が呼び出された時の処理がデフォルトで記述されている。

import UIKit

class NextViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

funcはfuncttionの略で関数。viewDidLoadは画面が呼び出された時の処理。

文字を変数に格納したり、ボタンを押した時の処理を記述するときは、
スマホ画面で要素を選択し、controlを押しながらコード画面の挿入したい部分で離す。
離すと要素によって、名前やイベントが起きるタイミングなどを指定するメニューが表示される。

labelをコードに挿入した場合

@IBOutlet weak var label: UILabel!

var 変数名で変数を定義。labelはメニューでName欄に記入したもの。

ボタンをコードに挿入した場合。

@IBAction func change(_ sender: Any) {}

メニューのName欄にchangeと記入。こちらは自動的にメソッドになっている。
ボタンを押すとlabelのテキストを変更するという処理はメソッド内に下記の記述。

label.text = "テキストが変更された"

.textはプロパティ。ラベルのtext要素を「テキストが変更された」に変える記述。
commandを押しながらプロパティ(text)をクリックするとメニューが表示され、
「Jump to Definition」を選択するとプロパティ一覧画面が開く。

シミュレーターを呼びだす

画面左上の▶︎ボタンを押すか、command+Rキーでスマホのシミュレーターを呼び出せる。(時間がかかる)
終了するには×で閉じるか、command+Qキーを押す。
操作は実際のスマホ操作と同じ。ボタンをクリックしたり上から下にスワイプして遷移画面を消すなど。

コメント

タイトルとURLをコピーしました