XcodeのLive Renderingを使って簡単に使い勝手の良いアイコンボタンをつくろう #Swift

こんばんは。Xcode6になって様々な機能がXcodeに追加されました。その中で、作業的にかなりやりやすくなったLive Renderingについて書いてみたいと思います。とても便利なのにもしかしたらあまり使われていないのかもと思ったからです。Live Renderingとは、UIViewで書いた内容がInterfaceBuilder上にリアルタイムに反映されるというとても便利な機能です。入り込みやすいようにチュートリアル形式にしました。

Live Renderingを利用することでの変化

今まではカスタムのViewをInterfaceBuilderで表示する際、中身がリアルタイムに描画されないので、下記のようになってしまっていました。もしくは、Viewに色を付けずタップしないとどこにカスタムのビューがあるかわからないような状況が発生していました。

それがLive Renderingを利用することで、このように実際に端末に表示された時のようにアイコンを見ることができるようになり、より一歩踏み込んだビューの作成ができると思います

それでは実際にLive Renderingを利用したボタンを作ってみたいと思います。

簡単にアイコンボタンを作る

UIControl（UIView+イベントハンドリングができる）を継承したクラスを作成します。そして、下記のコードを書き込みます。 @IBDesignable をクラス宣言の前に書くことで、Live Renderingが有効になります。 @IBInspectable をインスタンス変数の前に書くことで、InterfaceBuilderから値を変更することができるようになります。ここで、

@IBDesignable
class IconButton: UIControl {

    @IBInspectable var iconImage: UIImage?

    override func drawRect(rect: CGRect) {

        if let iconImage = self.iconImage {
            iconImage.drawInRect(self.bounds)

            let maskPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: CGRectGetWidth(self.bounds) / 2)
            let maskLayer = CAShapeLayer()
            maskLayer.path = maskPath.CGPath
            self.layer.mask = maskLayer;
        }
    }
}

InterfaceBuilderを開き、UIViewを画面に追加します。そして、クラスを作成したIconButtonに変更します。

すると、InterfaceBuilderでこのような表示を見ることができます。IconButtonで設定したiconImageがInterfaceBuilderから変更できるようになっています。

今回は下記の画像を利用することにしました。

今の時点でInterfaceBuilderはこのようになっています。

ここまでのコードは、こちらを御覧ください

ブラッシュアップ

ちょっとさみしいので、枠線を追加したいと思います。

@IBDesignable
class IconButton: UIControl {

    @IBInspectable var iconImage: UIImage?
    @IBInspectable var borderColor: UIColor = UIColor.clearColor()
    @IBInspectable var lineWidth: CGFloat = 0.0
    var borderLayer: CAShapeLayer?

    override func drawRect(rect: CGRect) {

        if let iconImage = self.iconImage {
            iconImage.drawInRect(self.bounds)
        }

        let path = UIBezierPath(roundedRect: self.bounds, cornerRadius: CGRectGetWidth(self.bounds) / 2)
        let maskLayer = CAShapeLayer()
        maskLayer.path = path.CGPath
        self.layer.mask = maskLayer;

        if self.borderLayer == nil {
            self.borderLayer = CAShapeLayer()
            self.borderLayer!.path = path.CGPath
            self.borderLayer!.fillColor = UIColor.clearColor().CGColor
            self.layer.addSublayer(self.borderLayer!)
        }
        self.borderLayer!.strokeColor = self.borderColor.CGColor
        self.borderLayer!.lineWidth = self.lineWidth
        self.borderLayer!.lineCap = kCALineCapRound
    }
}

attributes Inspectorはこのようになっています。

ボタンの要素を幾つか追加して簡単にアイコン・ボタンを作ることが出来ました。

更に、アクションやhighlightedの時の変化などを付け加えて、より使い勝手の良いボタンにしました。

@IBDesignable
class IconButton: UIControl {

    @IBInspectable var normalImage: UIImage? {
        didSet {
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var highlightedImage: UIImage? {
        didSet {
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var normalBorderColor: UIColor = UIColor.clearColor() {
        didSet {
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var highlightedBorderColor: UIColor = UIColor.clearColor() {
        didSet {
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var lineWidth: CGFloat = 0.0 {
        didSet {
            self.setNeedsDisplay()
        }
    }

    lazy var maskLayer: CAShapeLayer = {
        return CAShapeLayer()
    }()

    lazy var borderLayer: CAShapeLayer = {
        let borderLayer = CAShapeLayer()
        borderLayer.fillColor = UIColor.clearColor().CGColor
        self.layer.addSublayer(borderLayer)
        return borderLayer
    }()

    var circlePath: UIBezierPath {
        get {
            return UIBezierPath(roundedRect: self.bounds, cornerRadius: CGRectGetWidth(self.bounds) / 2)
        }
    }

    override var highlighted: Bool {
        didSet {
            self.setNeedsDisplay()
        }
    }

    override func drawRect(rect: CGRect) {

        var iconImage: UIImage?
        var borderColor = UIColor.clearColor()
        if self.highlighted {
            if let highlightedImage = self.highlightedImage {
                iconImage = highlightedImage
                borderColor = self.highlightedBorderColor
            }
        } else {
            if let normalImage = self.normalImage {
                iconImage = normalImage
                borderColor = self.normalBorderColor
            }
        }

        iconImage?.drawInRect(self.bounds)

        self.maskLayer.path = self.circlePath.CGPath
        self.layer.mask = self.maskLayer

        self.borderLayer.path = self.circlePath.CGPath
        self.borderLayer.strokeColor = borderColor.CGColor
        self.borderLayer.lineWidth = self.lineWidth
    }
}

import UIKit

class ViewController: UIViewController {

    @IBAction func buttonTapped(sender: IconButton) {
        println("button tapped!")
    }
}

おまけ：利用画像をベクターで

この時点で、どんな形に伸縮しても縦横が同じサイズであればその矩形の大きさのアイコンボタンを作ることが出来ました。ただし、現在、100px x 100pxの表示をするために2倍スケールの200px x 200px の画像を利用していています。このままではiPhone 6Plusのために別に3倍スケールの画像を用意する必要があります。別画像を用意するのではなく、1つの画像を用意するだけで3倍スケールにも対応できるようにvectorを利用しようと思います。

先ほどの画像ファイルは元はIllustratorで作成したものでした。これをIllustratorで開きます。