PlaygroundでUIViewのアニメーションを簡単に確認

みなさんPlayground使ってますか？ APIの確認などサクッと調べたいときに少ないコード量で調べられるので、活用すれば開発スピードがぐっと上がると思います。 そんな僕も今はまだ全然使いこなせていないので、これから便利な使い方を発見したときはまとめていきたいと思います。

今回はUIViewのアニメーションの確認です！

意外につまづきなかなかアニメーションしてくれなかったので、同じような状態の人は参考にしてもらえると良いと思います。

下準備

その1

View>Utilities>Show File Inspectorをクリック

右側にUtilityの画面が出てくるので、Playground SettingのRun in Full Simulatorにチェックを入れる。

チェックを入れた後は邪魔なので消しておく。View>Utilities>Hide Utilities

その2

Assistant Editorを表示します。もし表示されていなかったら以下から表示できます。

View>Assistant Editor>Show Assistant Editor

実際にコードを書いてみる

今回僕はautoresizingMaskの動作がよくわからず調べてみたかったので、それを調べるようなコードを書いています。 ちなみにautoresizingMaskは親ビューのサイズが変更されたときに自分がどのように振る舞うかを決めるプロパティです。

ポイントはXCPlaygroundを使うところです。詳しくは以下で書きます。

import UIKit
import XCPlayground

var containerView = UIView(frame: CGRectMake(0, 0, 300, 300))
containerView.backgroundColor = UIColor.grayColor()
XCPShowView("Container View", containerView)

var subView = UIView(frame: CGRectMake(50, 50, 200, 200))
subView.backgroundColor = UIColor.blackColor()
containerView.addSubview(subView)

subView.autoresizingMask =
    .FlexibleHeight |
    .FlexibleBottomMargin |
    .FlexibleTopMargin |
    .FlexibleWidth |
    .FlexibleLeftMargin |
    .FlexibleRightMargin

UIView.animateWithDuration(2.0, animations: {
    containerView.frame = CGRectMake(0, 0, 400, 400)
})

XCPlaygroundについて

XCPlaygroundとは最初から用意されているユーティリティフレームワークです。 こちらをうまく利用することでPlaygroundで様々なことができるらしいです。

詳しくは公式ドキュメントを参照してください。(XCPlayground Module Reference)

使い方

XCPShowView(identifier: String, view: UIView)を利用することでViewを表示することができます。

こちらを利用することで、コードの変更時に自動でアニメーションをしてくれたり、タイムバーを利用してアニメーションの経過を詳細に見ることができます。

もしアニメーションしてくれないときは、Editor>Execute Playgroundからアニメーションさせることができると思います。

全体像はこんな感じ。コードと結果を一度に見ることができます。

アニメーションはこんな感じでした。

.FlexibleTopMarginと.FlexibleRightMarginだけにしたとき↓

感想

変更をすぐに見ることができるので、アニメーションをテストしたり、細かく色を調節するときなんかに便利だと感じました。Viewの形を整えるときなんかにも良さそうですね。半径がどうだとか影がどうだとかいう処理をリアルタイムで確認できるのはメリットだと思います。

Playgroundで動作したら、そのコードをアプリに移植するように進めていくと開発スピードもあがりそうです。