iOSでImageViewにボーダー（境界線）を設定する方法

はじめに

ImageViewにボーダー（境界線）を設定するのは非常に簡単です。この記事では、iOSアプリでImageViewにボーダーを設定する方法を、ステップごとにわかりやすく解説します。

それでは始めましょう。

手順

ステップ1：プロジェクトの作成

Xcodeを開き、「New Project」→「Single View Application」を選択して、新しいプロジェクトを作成します。プロジェクト名は「BorderToImage」とします。

今回は、ストーリーボードにImageViewとボタンを配置し、ボタンをタップしたタイミングでImageViewにボーダーを追加する構成にします。viewDidLoad内で処理しても同じ結果が得られますが、ボーダーが追加される前後の違いを視覚的に確認できるよう、この方法を採用します。

ステップ2：UIの配置

Main.storyboardを開き、以下の画像のようにImageViewとボタンを配置します。

ステップ3：アウトレットの接続

ImageView用の@IBOutletを作成し、「imgView」と名付けます。同様に、ボタン用の@IBOutletも作成し、「btnAddBorder」と名付けます。

ステップ4：ボーダー設定コードの追加

btnAddBorderアクションに以下のコードを追加します。

@IBAction func btnAddBorder(_ sender: Any) {
    imgView.layer.borderColor = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1.0).cgColor
    imgView.layer.masksToBounds = true
    imgView.contentMode = .scaleToFill
    imgView.layer.borderWidth = 5
}

以上で完了です。コードを実行して、出力を確認しましょう。

コードの解説

各プロパティの役割は以下の通りです。

• layer.borderColor：ボーダーの色を指定します。UIColorで作成した色をCGColorに変換して設定します。ここではグレー（RGB各0.5）を指定しています。
• layer.masksToBounds：trueに設定することで、レイヤー境界の外側にあるコンテンツが切り取られ、ボーダーが正しく表示されます。
• contentMode：画像の表示方法を指定します。ここでは.scaleToFillを使用し、ImageView全体に画像を表示しています。
• layer.borderWidth：ボーダーの太さをポイント単位で指定します。ここでは5ポイントに設定しています。

完成コード

import UIKit
class ViewController: UIViewController {
    @IBOutlet var imgView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func btnAddBorder(_ sender: Any) {
        imgView.layer.borderColor = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1.0).cgColor
        imgView.layer.masksToBounds = true
        imgView.contentMode = .scaleToFill
        imgView.layer.borderWidth = 5
    }
}

実行結果

アプリを実行してボタンをタップすると、ImageViewにグレーのボーダーが表示されます。

まとめ

このように、CALayerのプロパティを活用することで、わずか数行のコードでImageViewにボーダーを追加できます。borderColorとborderWidthを組み合わせれば、色や太さも自由にカスタマイズ可能です。角丸にしたい場合は、layer.cornerRadiusを追加するとさらに表現の幅が広がりますので、ぜひ試してみてください。