[iPhone] cornerRadiusを使って画像を角丸にする

画像の角を丸くしたアイコンなど、角を処理してレイアウトをまとめたい時にCALayerのcornerRadius, clipsToBoundsを使うと簡単にでき、円形に切り取ったようにすることもできます。

Xcode 13.4.1

cornerRadius

にあるように以下の画像をスクリーンに表示させます。

画像をスクリーンの90%に合うようにリサイズを入れます。

この画像の角を丸くするためにCALayerのcornerRadiusを画像frame幅の10%に設定します。

// 角丸にする
imageView.layer.cornerRadius = imageView.frame.size.width * 0.1
imageView.clipsToBounds = true

// 角丸にする

imageView.layer.cornerRadius = imageView.frame.size.width * 0.1

imageView.clipsToBounds = true

これをまとめたコードにするとこのようになります

ViewController.swift

import UIKit

class ViewController: UIViewController {


    override func viewDidLoad() {
        super.viewDidLoad()

        // UIImage インスタンスの生成
        let image:UIImage = UIImage(named:"img")!

        // UIImageView 初期化
        let imageView = UIImageView(image:image)

        // 画面の横幅を取得
        let screenWidth:CGFloat = view.frame.size.width
        let screenHeight:CGFloat = view.frame.size.height

        // 画像の幅・高さの取得
        let imgWidth = image.size.width
        let imgHeight = image.size.height

        // 画像サイズをスクリーン幅に合わせる
        let scale = screenWidth / imgWidth * 0.9
        let rect:CGRect = CGRect(x:0, y:0,
                          width:imgWidth*scale, height:imgHeight*scale)

        // ImageView frame をCGRectで作った矩形に合わせる
        imageView.frame = rect;

        // 画像の中心を画面の中心に設定
        imageView.center = CGPoint(x:screenWidth/2, y:screenHeight/2)

        // 角丸にする
        imageView.layer.cornerRadius = imageView.frame.size.width * 0.1
        imageView.clipsToBounds = true

        // UIImageViewのインスタンスをビューに追加
        self.view.addSubview(imageView)
    }
}

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

// UIImage インスタンスの生成

let image:UIImage = UIImage(named:"img")!

// UIImageView 初期化

let imageView = UIImageView(image:image)

// 画面の横幅を取得

let screenWidth:CGFloat = view.frame.size.width

let screenHeight:CGFloat = view.frame.size.height

// 画像の幅・高さの取得

let imgWidth = image.size.width

let imgHeight = image.size.height

// 画像サイズをスクリーン幅に合わせる

let scale = screenWidth / imgWidth * 0.9

let rect:CGRect = CGRect(x:0, y:0,

width:imgWidth*scale, height:imgHeight*scale)

// ImageView frame をCGRectで作った矩形に合わせる

imageView.frame = rect;

// 画像の中心を画面の中心に設定

imageView.center = CGPoint(x:screenWidth/2, y:screenHeight/2)

// 角丸にする

imageView.layer.cornerRadius = imageView.frame.size.width * 0.1

imageView.clipsToBounds = true

// UIImageViewのインスタンスをビューに追加

self.view.addSubview(imageView)

}

画像を選んで Assets.xcassets に入れます。

これで実行すると角が丸くなりました。

この角を更に丸くして50%にして見ます。

imageView.layer.cornerRadius = imageView.frame.size.width * 0.5

1	imageView.layer.cornerRadius = imageView.frame.size.width * 0.5

元の画像をcropなどを使って正方形にすると

円形で切り取ったような処理になりました。

関連ページ：

References:
cornerRadius — CALayer | Apple Developer Documentation
clipsToBounds — UIView | Apple Developer Documentation
UIImageView — UIKit | Apple Developer Documentation
UIImage — UIKit | Apple Developer Documentation