【Swift/iOS】UI部品の接続方法

UI部品とコードの接続方法を解説します。

プロパティとして接続するアウトレット(Outlet)接続とメソッドとして接続するアクション(Action)接続の2種類の接続方式があります。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】10.3
【Swift】5.0.1
【iOS】12.3.1
【macOS】Mojave バージョン 10.14.5

接続の種類

アウトレット(Outlet)接続

UI部品をプロパティとして接続します。

下記例のように、部品の状態を取得したり、部品を操作したりできます。

  • UILabel(ラベル)の文字列や色を設定。
  • UITextField(テキストフィールド)に入力された文字列を取得。
  • UISwitch(スイッチ)のオン/オフ状態取得、あるいは設定。

アクション(Action)接続

UI部品をメソッドとして接続します。

下記例のように、部品のイベントが発生した時の動作を記述することができます。

  • UIButton(ボタン)が押された時の動作を記述。
  • UISwitch(スイッチ)が変更されたときの動作を記述。
  • UISlider(スライダー)が変更された時の動作を記述。

UI部品の接続例

実際の操作例で、接続方法を解説します。

部品の配置

storyboardにLabel部品とSwitch部品を配置します。

【画像1:部品の配置】

エディタ画面を2分割

エディタ画面を2分割して、ViewControllerとそれに関連付けられたコードを表示します。

【画像2:エディタ画面の2分割】

Xcodeでエディタ画面を2分割する手順についてはこちらの記事を参照して下さい。

【Xcode】エディタの分割表示
Xcodeでエディタを分割表示するアシスタントエディタ(Assistant Editor)について解説します。

アウトレット(Outlet)接続

Label部品とSwitch部品をそれぞれアウトレット接続します。

Label部品の接続

Controlキーを押しながらLabel部品をコードのこの位置にドラックします。

【画面3:Label部品のアウトレット接続】

ダイアログが出るので、次の値を設定し、Connect

【画面4:Label部品のアウトレット接続ダイアログ】

Connection(接続タイプ)
Outletを選択

Name(プロパティ名)
label1を入力(任意の値を設定可能)

ソースコードエディタには次のようなコードが挿入されます。

左端の●(黒丸)は部品とコードが接続されている事を表しています。

【図4−1:挿入されたコード(Label)】

これでlabel1というプロパティ名でコードからLabel部品にアクセスできるようになります。

Switch部品の接続

Controlキーを押しながらSwitch部品をコードのこの位置にドラックします。

画面5:Switch 部品のアウトレット接続

ダイアログが出るので、次の値を設定し、Connect

画面6:Label部品のアウトレット接続ダイアログ】

Connection(接続タイプ)
Outletを選択

Name(プロパティ名)
switch1を入力(任意の値を設定可能)

次のようなコードが挿入されます。

これでswitch1というプロパティ名でコードからSwitch部品にアクセスできるようになります。

Outlet接続できない場合

マウスをドラックしても、接続ダイアログが表示されない場合は、右側に表示されているクラスファイルが、対象のViewControllerに関連付けられていない可能性があります。

正しいクラスファイルが表示されているか、もう一度確認して下さい。

また、ViewControllerとクラスファイルを関連付ける方法はこちらの記事を参考にして下さい。

【Swift/iOS】ViewControllerの追加方法
storyboardにViewControllerを追加する方法を解説します。新規プロジェクト作成時にデフォルトで存在するViewControllerには、始めからクラスファイル(ViewController.swift)が関連付けられて...

アクション(Action)接続

Controlキーを押しながらSwitch部品をコードのこの位置にドラックします。

画面7:Switch部品アクション接続

ダイアログが出るので、次の値を設定し、Connect

【画面8:Switch部品アクション接続ダイアログ】

Connection(接続タイプ)
Actionを選択

Name(メソッド名)
switchChangedを入力(任意の値を設定可能)

Event(イベント)
Value Changedを選択

次のようなコードが挿入されます。

これでSwitch部品が変更された時(=Value Changedイベントが発生した時)に、switchChanged()メソッドが呼び出されるようになります。

イベントメソッドの記述と実行

switchChanged()メソッドに、Switch部品が変更された時の処理を記述します。

今回はLabel部品にSwitchの状態を表示するように記述してみます。

最終的なソースは次のようになります。

実行動画

最後に

UI部品接続の変更方法は、こちらの記事を参照して下さい。

【Swift/iOS】UI部品接続の変更方法
UI部品接続の削除および変更方法について解説します。UI部品の接続方法については、先にこちらの記事を参照して下さい。

コメント