Prott風にタップ可能な部分をハイライトする方法

前回のエントリーで、Storyboardを使ったプロトタイピングをオススメしたのですが、一部コードを書いている処理があります。

ponpoko1968.hatenablog.com

プロトタイプ共有サービスのProttでは、作ったプロトタイプをプレビューするとき、画面をタップすると、タップすると何かアクションが起きる領域をハイライトしてくれます。

添付したサンプルコードでは、このギミックをネイティブで簡単にできないか、試しています。

もちろん、ネイティブの開発環境をつかっている、このような視覚効果はボタンとソースコードをIBOutletで結びつけて、そういう視覚処理を書けば簡単に実現できますが、その方法ではすべての画面で処理を書く必要が出てしまいます。

そんな手間を掛けるのはもったいないですよね。

そこで、ViewControllerのトップビュー階層からUIButtonなViewを探し出して、アニメーションを設定するようにしました。

    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?){
        UIView.beginAnimations(nil, context: nil)
        self.view.subviews.forEach { // トップViewの直下にあるビューを列挙
            view in
            if let button:UIButton = view as? UIButton{
                // UIButtonならアニメーションを設定
                let animation = CABasicAnimation.init(keyPath:"backgroundColor")
                // 黒く変色させて、徐々に元の色へ
                animation.fromValue = UIColor(red:0, green:0, blue:0, alpha:0.5).CGColor
                animation.toValue = button.backgroundColor

                // 1.5秒で元に戻る
                animation.duration = 1.5

                // アニメーションを設定
                button.layer.addAnimation(animation, forKey: nil)
            }
        }
        UIView.commitAnimations() // アニメーション実行
    }

あまり使うことがないので知らない方もいらっしゃるかもしれませんが、UIViewControllerはUIResponderを継承しているので、touchesBegan:やtouchesEnded:をオーバーライドすることで、タップイベントに反応するUIComponent以外の場所をユーザがタップした場合に、 UIViewControllerでタップイベントを処理出来ます。

上記のコードではユーザが画面に触れたタイミングで、ボタンの色が変わるようアニメーションを設定しています。

Storyboardでプロトタイプの各画面のViewControllerのクラスにこのクラスを設定することで、すべての画面で同じ視覚効果が簡単に得られます。

なお、このコードでは、プロトタイプの場合は深いView階層にUIButtonを置くことはないと思ったので、トップビューの直下しかUIButtonを探していません。必要に応じて再帰的にビュー階層を深くたぐるようにコードを書き換えてみて下さい。

[asin:0321617754:detail]