はじめに
XcodeでSwiftによるプログラミングを進めていく段階で、「コードの一部だけを試したい」といった場合などにいろいろと便利なのが、入力したコードの結果がリアルタイムに反映されるPlaygroundです。
今回は、Playgroundを使用してUIをテストする方法について説明しましょう。またクラスを、Playgroundファイルとは別のソースファイルにする方法についても説明します。
PlaygroundSupportモジュールの基本的な使い方
Xcode 7.x以前のPlaygroundでは、UIのテストなどにXcode付属のユーティリティフレームワークである「XCPlaygroundモジュール」を使用していました。それに対してXcode 8以降は、XCPlaygroundは非推奨（Deprecated）となり、その代替として「PlaygroundSupportモジュール」を使用します。
以下に、PlaygroundSupportモジュールを使用して、アシスタントエディタにビューを表示するためのプログラムの基本的な流れを示します。
1. PlaygroundSupportモジュールをインポートする
import PlaygroundSupport
2. PlaygroundページのliveViewプロパティに表示するビューのインスタンスを代入する
PlaygroundPageクラスのcurrentタイププロパティを使用すると、現在のPlaygroundページが取得できます。そのliveViewプロパティに、目的のビュー（以下の例ではmyView）を設定します。
PlaygroundPage.current.liveView = myView
イメージをliveViewに表示する
実際の例を示しましょう。リソースとして登録したPNG形式のイメージ「cat1.png」からUIImageオブジェクトを生成し、それをイメージ表示用のViewであるUIImageViewオブジェクトに登録して、PlaygroundのliveViewプロパティに設定してみましょう。
1.「File」メニューから「New」→「Playground」を選択すると表示されるテンプレート選択画面では、「Blank」を選択します。
テンプレートに「Single View」を選択するとUIViewControllerのサブクラスとしてMyViewControllerが作成されますが、ここではゼロからコードを入力することにします。
Blankを選択し、ゼロからコードを入力する
2.表示するイメージファイルを「Resources」フォルダに登録します。
「Project Navigator」を表示し、Finderからイメージファイルをドラッグ＆ドロップで「Resource」フォルダに保存します。
イメージファイルを登録
3.Playgroundのエディタを開きコードを記述します。
次にリストを示します。
リスト1：MyPlayground1.playground
02 | import PlaygroundSupport |
05 | var myImg = UIImage(named: "cat1") |
08 | var imgView = UIImageView(image: myImg) |
11 | PlaygroundPage.current.liveView = imgView |
4.アシスタントエディタの「LiveView」→「Playgroundファイル名（LiveView）」を表示します。
以上で、アシスタントエディタにイメージが表示されます。
指定したイメージが表示される
複数のイメージをランダムな位置に表示する
続いて、適当なサイズのコンテナとして使用するUIViewを用意し、その中に10個のUIImageViewオブジェクトをランダムな位置に配置してみましょう。
複数のイメージを表示する
次にリストを示します。
リスト2：MyPlayground2.playground
02 | import PlaygroundSupport |
07 | let contentView = UIView(frame: CGRect(x:0, y:0, width: viewWidth, height: viewHeight)) // <=（1） |
10 | contentView.backgroundColor = UIColor.yellow // <=（2） |
13 | var myImg = UIImage(named: "myCat") |
14 | var imgView:UIImageView |
16 | // 10個のイメージビューをコンテントビューにランダムに配置 |
17 | for _ in 1...10 { // <=（3） |
18 | let x = arc4random_uniform(UInt32(viewWidth)) |
19 | let y = arc4random_uniform(UInt32(viewHeight)) |
20 | imgView = UIImageView(image: myImg) |
21 | imgView.center = CGPoint(x: Int(x), y: Int(y)) |
22 | contentView.addSubview(imgView) |
25 | // コンテントビューをPlaygroundのliveViewにセット |
26 | PlaygroundPage.current.liveView = contentView |
上記リストのポイントとなる箇所を説明していきます。（1）でコンテンツビューとして使用する400×500ピクセルのUIViewを生成しています。（2）でその背景色（backgroundColor）を黄色（yellow）に設定しています（Swift 3以降では、UIColorの色の設定／取得はメソッドではなくプロパティとなりました）。
contentView.backgroundColor = UIColor.yellow ←yellowプロパティに設定
（3）のforループで10個のUIImageViewを生成し、コンテンツビュー内のランダムな位置に配置しています。
