【Swift】UIImageViewではなくて、UIImageを角丸にする

UIImageを角丸にしたいと思い、「UIImage cornerRadius」と調べると、UIImageViewを角丸にする方法が沢山出てきて困ってしまいました。同じ境遇の方の助けになればと思い、今回はUIImageを角丸にする方法を記載しておきます。

環境

• Xcode 14

はじめに

UIImageViewを角丸にする方法

imageView.layer.cornerRadius = 22

Imageを角丸にする方法

Image("somethingYouWantToShow")
            .resizable()
            .frame(width: 200, height: 200)
            .cornerRadius(20)

上記のような感じでImageやUIImageViewの角丸は手軽に出来ます。

UIImageを角丸にする

UIImageを角丸にする為にUIGraphicsImageRendererを使用して角丸画像を作成していきます。

今回はUIImageのExtensionを作成して、汎用的に使えるようにしてみます。

extension UIImage {

    func roundedCorners(radius: CGFloat) -> UIImage {

        return UIGraphicsImageRenderer(size: self.size).image { context in

            let rect = context.format.bounds
            // Rectを角丸にする
            let roundedPath = UIBezierPath(roundedRect: rect,
                                           cornerRadius: radius)
            roundedPath.addClip()
            // UIImageを描画
            draw(in: rect)
        }
    }
}

今回は特にリサイズ等は行わないのでUIGraphicsImageRendererのサイズには自身のサイズを渡しています。

その後、UIGraphicsImageRendererContextのformat.boundsから今回のレンダラーのboundsが取得出来るので画像のCGRectを取得します。そのCGRectに角丸を加える為、UIBezierPathに引数で受け取ったcornerRadiusの値を渡します。

角丸用のパスができたので、addClipを使用して現在の形状をクリッピングパスにします。

あとは、draw(in:)メソッドを使用して、指定したrectで描画すると、クリッピングパスが反映された形状のUIImageが出来上がります。

使用例

角丸無し

Image(uiImage: UIImage(named: "lilossa")!)

角丸有り

Image(uiImage: UIImage(named: "lilossa")!
    .roundedCorners(radius: 40))

おわりに

UIGraphicsImageRendererを使用して、UIImageを好きな形状に加工できることが分かりました。大人の事情でUIImage自体を角丸にしたい方にこの記事が届けばと思います。

参考

• UIGraphicsImageRenderer
• [iOS 10] UIGraphicsImageRenderer について
• addClip()
• draw(in:)