【Swift/iOS】UI部品のアウトレット接続

LabelやButtonなどのUI部品にコードからアクセスするには、部品とコードを連携する必要があります。

この連携をアウトレット(Outlet)接続と呼びます。

本記事ではアウトレット接続の手順について解説します。

スポンサーリンク

環境

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

【Xcode】10.2
【Swift】5.0
【iOS】12.3.1
【macOS】Mojave バージョン 10.14.5

接続手順

エディター画面を2分割

①storyboardで対象のViewControllerを選択してから、

②画面右上のShow the Assistant editorをクリックします。

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

【図1:アシスタントエディターを開く】(画像をクリックで拡大します)

対象のコードが表示されない場合

右画面に表示されたコードが対象のものと違う場合は、手動で表示するコードを切り替えます。

左ペイン(project navigator)で、optionキーを押しながら表示させたいファイルをクリックすると、右画面の表示が切り替わります。

【図2:右側に表示するソースの変更】(画像をクリックで拡大します)

部品とコードの接続

左画面の対象部品をcontrolキーを押しながら選択し、右画面のコードにドラックします。

アウトレット接続の場合は、通常ViewControllerのクラス宣言の直後あたりで良いでしょう。

挿入可能な箇所に正しくドラックすると、次のような吹き出しメッセージが現れます。

【図3:対象部品のドラッグ】(画像をクリックで拡大します)

挿入可能な箇所でマウスを離すと、次のようなダイアログが出ますので、値を適切に設定しConnectボタンを押します。

【図4:部品接続ダイアログ】(画像をクリックで拡大します)

ダイアログに設定する内容は次の通りです。

Connection
Outlet(部品をインスタンスとして接続)を選択します。

Name
コードからアクセスするための任意の名前(インスタンス名)を指定します。

Type
部品のクラス名がデフォルトで入るので、そのままでOK。

Storage
メモリ管理に関する定義。デフォルトのWeakでOK。

挿入されるコード

正しく接続されると、右画面のクラスファイルには次のような@IBOutletで始まるコードが挿入されます。

Outlet接続できない場合

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

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

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

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

接続の確認方法

コードと部品が正しく接続されているか確認する方法を解説します。

コードから確認する方法

部品とコードが関連付けられている場合、コードの左が●(黒丸)になっています。

●をクリックすると、関連付けられている部品名が表示されます。

【画面5:●をクリックした場合】(画像をクリックで拡大します)

【※注意】xcodeを起動してから一度もstoryboardを表示していない場合は、○(白丸)になっている事があります。

部品から確認する方法

対象の部品をcontrolキーを押しながらクリックします。

すると次のようなダイアログが表示され、Referencing Outletsに接続情報が表示されます。

【画面6:接続情報の表示】(画像をクリックで拡大します)

コードからのアクセス方法

Outlet接続した部品にコードからアクセスするには、接続時に指定したインスタンス名(Name)を使用します。

対応した部品のプロパティ取得や設定が可能となります。

最後に

UI部品接続の変更方法は、別記事にまとめる予定です。

コメント