Swift2 - 円形（ circle ）の UIImageView と UIButton の作成

円形の UIImageView や UIButton を利用したくなるケースは多いと思うので、カスタムクラスを利用した方法を紹介したいと思います。この方法では storyboard 上で円形にはならないので注意してください。

UIImageView

UIImageView を継承した CircleImageView を作成する。やっていることは単純で layout の調整を行う layoutSubviews() 内で self.layer.cornerRadius に円の半径となる self.frame.size.width / 2 を設定しているだけです。

class CircleImageView: UIImageView {
    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.cornerRadius = self.frame.size.width / 2
    }
}

使い方としては円形にしたい imageView に UIImageView ではなく CircleImageView を指定してあげます。 storyboard を利用していて @IBOutlet にも指定しなくてもいい部品に関しては、コードで指定するのと同じように storyboard 上で CircleImageView を指定してあげます。

@IBOutlet weak var imageView: CircleImageView!

UIButton

UIImageView と同じように行けるかと思っていましたが、同じように試したところ画像がひし形のようになってしまい、上手く対応することができませんでした。通常の image ではなく backgroundImage に画像を指定してあげることで、綺麗に円形になることが分かったので、円形の UIButton を利用したくなったら backgroundImage を利用するようにしています。

class CircleButton: UIButton {
    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.cornerRadius = self.frame.size.width / 2
        // UIButton の場合は clipsToBounds の設定が必要
        self.clipsToBounds = true
    }
}

設定の仕方は UIImageView と同じですが setImage ではなく setBackgroundImage で画像をセットしてあげます。 storyboard の場合も同様に backgroundImage に利用したい画像をセットしてあげます。

@IBOutlet weak var button: CircleButton!

self.button.setBackgroundImage(UIImage(named: "photo"), forState: .Normal)