iOS에서 이미지 뷰(ImageView)에 테두리(Border) 설정하는 방법

iOS에서 이미지 뷰(UIImageView)에 테두리를 설정하는 것은 생각보다 간단합니다. 이번 포스트에서는 Xcode와 Swift를 활용해 이미지 뷰에 테두리(Border)를 적용하는 방법을 단계별로 알아보겠습니다.

그럼 바로 시작해 보겠습니다.

1단계 – 프로젝트 생성

Xcode를 실행한 후 New Project → Single View Application을 선택하고, 프로젝트 이름을 "BorderToImage"로 지정합니다.

스토리보드에 이미지 뷰와 버튼을 하나씩 배치하고, 버튼을 탭하면 이미지 뷰에 테두리가 추가되도록 구현할 것입니다. 물론 viewDidLoad()에서 바로 처리할 수도 있지만, 테두리가 적용되기 전후의 변화를 눈으로 확인하기 위해 버튼 액션 방식으로 진행합니다.

2단계 – 스토리보드에 UI 요소 추가

Main.storyboard에 아래 그림과 같이 이미지 뷰와 버튼을 추가합니다.

3단계 – IBOutlet 연결

이미지 뷰에 대한 @IBOutlet을 생성하고 이름을 imgView로 지정하고, 버튼에 대해서도 연결하여 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 타입으로 변환해 할당해야 합니다.
layer.masksToBounds – true로 설정해야 레이어의 테두리가 화면에 올바르게 표시됩니다.
contentMode – .scaleToFill로 설정해 이미지가 뷰 영역에 맞게 채워지도록 합니다.
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
    }
}

실행 결과