tech.chakapoko.com
Home / iOS・iPhoneアプリ / Xcode10

[iOS][Xcode10]UI部品とコードの接続

UI部品をコードと接続し、コードからUI部品を操作できるようにします。

サンプルとしてButtonを押したらLabelに「Hello」と表示するアプリを作ります。

Assistant Editorの利用

UI部品の接続にはAssistant Editorを使ってStoryboardとコードを表示します。

Outletとしての接続

ストーリーボードにはラベルとボタンを配置しました。まずはラベルをコードと接続します。

Controlキーを押しながらラベルをコードに対してドラッグします。

接続のタイプとしてOutletを選択し、名前をlabelとしました。

コードが挿入され、labelが参照できるようになります。

Action

ButtonはActionとして接続します。

接続のタイプとしてActionを選択し、名前をonTouchとしました。

onTouchメソッドが挿入されました。ここにボタンを押した時の処理が追加できます。

今回はボタンを押したらラベルの内容を変更するのでonTouchメソッドの内容は次のようになります。

@IBAction func onTouch() {
    label.text = "Hello"
}

実行

コードを実行し、ボタンを押すと次のようにHelloと表示されます。