SwiftでiOSアプリに角丸画像を表示する方法｜cornerRadiusの基本とExtension活用術

iOSアプリで画像の角を丸く表示したい場合、あるいはボタンやビューなど任意のUI要素に角丸を実装したい場合は、その要素が持つレイヤー（layer）の「cornerRadius」プロパティにアクセスします。iOSのすべてのUI要素は内部的にレイヤーをベースとしているため、このプロパティを操作するだけで簡単に角丸を実現できます。

1. UIImageViewを準備する

まず、ストーリーボード上にUIImageViewオブジェクトを配置するか、コードから動的に生成します。以下は、プログラム側でイメージビューを作成し、画像をセットして画面に追加する関数の例です。

func addImage(imageName img: String) {
    let imageView = UIImageView()
    imageView.frame = CGRect(x: 10, y: 20, width: 200, height: 200)
    imageView.contentMode = .scaleAspectFill
    if let newImage = UIImage(named: img) {
        imageView.image = newImage
    }
    self.view.addSubview(imageView)
}

ここでは、アプリに表示したい元画像が下記のようなものであると仮定します。

viewDidLoad内で上記の関数を呼び出すと、画像が画面に表示されます。ただしこの時点では、角はまだ四角いままです。

2. cornerRadiusで角丸を適用する

次に、既存のコードに角丸の設定を加えてみましょう。ポイントとなるのは、以下の2行です。

imageView.layer.cornerRadius = 10
imageView.clipsToBounds = true

この2行をaddImage関数内のaddSubviewメソッドの直前に追加してください。1行目の「cornerRadius」で角の丸みの半径を指定し、2行目の「clipsToBounds = true」で画像が枠からはみ出さないようクリッピングしています。アプリを実行すると、画像の四隅が滑らかに丸くなっていることが確認できます。

3. Extensionで再利用しやすくする

アプリ内の複数の場所で角丸を使いたい場合は、UIImageViewのextensionとしてメソッドを定義しておくと便利です。以下のように実装しておけば、どのイメージビューに対しても同じ処理を簡潔に呼び出せるようになります。

extension UIImageView {
    func makeRoundCorners(byRadius rad: CGFloat) {
        self.layer.cornerRadius = rad
        self.clipsToBounds = true
    }
}

実際の使い方は非常にシンプルで、次の1行を書くだけで同じ結果が得られます。

imageView.makeRoundCorners(byRadius: 20)

まとめ

iOSでの角丸実装は、「layer.cornerRadius」と「clipsToBounds」の2つの設定だけで完了します。数値を大きくするほど丸みが強くなり、サイズの半分（例：width / 2）を指定すれば円形のアバター画像なども簡単に作成できます。ストーリーボードのAttribute Inspectorから設定する方法もありますので、用途に応じて使い分けてみてください。