Swiftで遊ぼう! on Hatena

あしたさぬきblogでやってた初心者オヤジのiOSプログラミング奮闘記がHatenaに来ました

Swiftで遊ぼう! - 544 - 「Swiftで遊ぼう! - 142 - Xcode6でConnection」のXcode7バージョン

昔の記事をXcode7用に書き換えます。主題はstoryboardに並べたUI部品をコードでコントロールするための方法です。Xcode6の頃もXcode7でも手順は同様です。過去の記事と比べながら見て下さい。

f:id:yataiblue:20151231144735j:plain UI部品のコード化(@IB)

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】の続きをしていましたが、Xcode7でstroyboard上のUI部品をコード化する方法を説明をします。

Xcode7を使って、Main.storyboardに配置したパーツとViewControllerクラス宣言内のコードを繋げる方法は3通りあります。

まず、画面に配置したい部品(UIオブジェyクト)をstoryboardに設置する必要があります。Xcodeの3つのエリアの右側のエリア、「ユーティリティエリア」を注目します。もし表示されていなければ、右上のアイコン(ユーティリティボタン)をクリックします。

このエリアの一番下にライブラリ・ペインがあります。右から2番目のボタン、「オブジェクト・ライブラリ」を選択して、Main.storyboardに配置する部品を選びます。

オブジェクトライブラリから「Label」を探して(検索ウインドウにLabelとタイプしてやると直ぐ見つかる)、ドラッグしてstoryboard上でドロップします。「Label」とデフォルト名がついたUILabelクラスのジェネリックなオブジェクト(インスタンス生成もされます)ができます。しかし、このままではコードで操作できません。ViewControllerとConnection(連結)させることでコードでコントロールできます。

リファレンス:アシスタントエディタの表示法
次に上部のボタンからアシスタントエディタを表示させます(当然メニューからも選べます:View > Assistant Editor > Show Assistant Editor)。ショートカット:「option + command + return」

こうすると、class ViewController: UIViewControllerにコードを加えることができます。

MVCモデルのV(iew)とC(ontoroller)を連結させる準備は整いました。2つのLabelがMain.storyboardに配置されていて、アシスタントエディタに2つのコード(@IBOutletが枕詞についてるけど)が見えます。しかし、コードの前に●(黒丸)と○(白丸)がついています。

@IBOutletという枕詞はstoryboardでインスタンス化されたオブジェクトということで、●(黒丸)はコードに連結されていいることを意味し、○(白丸)はまだ連結されていないということです。

  • [1] 連結する基本的な方法は、Main.storyboardにあるUI部品を(Control + ドラッグ)してViewControllerクラス宣言内に引っぱります。このとき青いラインが出現します。

これが連結を意味します。リリースしてやると次のようなダイアログがポップアップが出現します。

「labelSecond」という名前をつけて。「Connect」ボタンを押すと、「@IBOutlet var labelSecond: UILabel!」というコードが書き込まれます。

  • [2] 次はコード先行で、ViewController内に@IBOutletの枕詞をつけて、UILabelクラス宣言をします。すると、○(白丸)つきのコードができます。次にMain.storyboardにLabelを配置して、○(白丸)をドラッグしてやると青い線が出てきてラベルでリリースすると連結されます。


  • [3] もう一つコード先行で連結させる方法があります。[2]の方法と同様にViewController内に@IBOutletの枕詞をつけて、UILabelクラス宣言します。下の例では、labelThirdを用意しました。次にstroyboardの上部にあるボタンの左側の「ViewController」ボタンを「右クリック」すると、ViewControllerに書き込んだプロパティやメソッドのリストが表示されたダイアログが出現します。目的のlabelThirdの右側に○(白丸)があるので(連結されていないという意味)、これをドラッグしてstroyboard上のラベル(label3)でリリースすると連結されます。

f:id:yataiblue:20160104133529j:plain

以上のように3種類の連結方法を紹介しました。以前書いた記事を読み直すと、かなり勘違いしている部分があったので修正をして情報を追加しました。

今日はここまで。