Swift : AutoLayoutでUIVisualEffectViewをアニメーションさせてみた

iOS_LT #16

@Tomoya_Onishi

自己紹介

• iOS開発歴約３年

• ツイート専用アプリ「FasPos」

• QRコード読み取りアプリ「QR Reader」

• その他位置情報ログアプリなどいくつか

UIVisualEffectView

• iOS8で登場した

• さまざまなエフェクトを適応したビューを簡単に生成できる

• Apple公式のすりガラス表現ができる！！！！

• どういうエフェクトにするかはUIVisualEffectで指定する

UIVisualEffect• サブクラスのUIBlurEffect, UIVibrancyEffectが利用できる

• BlurEffectは3つのスタイルが用意されている

enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark }

let effect = UIBlurEffect(style: UIBlurEffectStyle.Light) !let effectView: UIVisualEffectView = UIVisualEffectView(effect: effect) !view.addSubview(effectView)

これだけのコードですりガラス表現のビューが表示できる

AutoLayoutを使ってコントロールセンター みたいなアニメーションを再現してみる

// View let effect = UIBlurEffect(style: UIBlurEffectStyle.Light) let effectView: UIVisualEffectView = UIVisualEffectView(effect: effect) effectView.clipsToBounds = false // falseにすると AutoResizingMaskをAutoLayoutの制約に自動変換しないようになる effectView.setTranslatesAutoresizingMaskIntoConstraints(false) view.addSubview(effectView) // AutoLayout // NSDictionaryOfVariableBindings関数はどこにいったのかよくわからないので自分で辞書を生成 let views = ["effectView" : effectView] let metrics = ["marginZero" : 0, "marginTop" : 100] // 水平方向の制約を追加:superviewに対してぴったり張り付く let horizontalConstraints: AnyObject[] = NSLayoutConstraint.constraintsWithVisualFormat("|-marginZero-[effectView]-marginZero-|", options: NSLayoutFormatOptions(0), metrics: metrics, views: views) view.addConstraints(horizontalConstraints) // 垂直方向の制約を追加:superviewに対して上は100ptあける、下はぴったり張り付く let verticalConstraints: AnyObject[] = NSLayoutConstraint.constraintsWithVisualFormat("V:|-marginTop-[effectView]-marginZero-|", options: NSLayoutFormatOptions(0), metrics: metrics, views: views) view.addConstraints(verticalConstraints) // アニメーションのために上からの制約を保持 let constraint : AnyObject = verticalConstraints[0] marginTopConstraint = constraint as? NSLayoutConstraint

var flag : Bool = false @IBAction func didTapButton(sender: UIButton) { if let constraint = marginTopConstraint { UIView.animateWithDuration(1.0, delay: 0.0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.1, options: UIViewAnimationOptions(0), animations: { // frameのアニメーションと同じ考えだとアニメーションできない // constantを変更するだけでは足りない constraint.constant = self.flag ? 150 : 500 // 画面の再描画を呼び出す必要あり self.view.layoutIfNeeded() }, completion: nil) flag = !flag } }

まとめ

• UIImage+ImageEffectsを置き換えられる

• アニメーションがおかしくなる

• storyboardもframeに頼らない作りになったので、基本的にはAutoLayout管理に移行すべき（3.5, 4inch, iPad, resizable, カーナビ, iPhone iPadのStoryboardの共有化, 通知センターのウィジェット）