이미지 라운드 처리하기

디자인적으로 앱의 완성도를 높이는 가장 간단한 방법 중 하나는 리스트에 보여지는 이미지를 라운드 처리하는 것 입니다.

이미지를 라운드 처리해서 보여주는 것만으로도 그럴 듯 해보이거든요... ^^

이번 글에서는 UIImageView를 사용해 이미지를 라운드 처리하는 방법에 대해 설명 합니다.

 

UIImageView의 모서리를 라운드 처리하기 위해서는 UIImageView의 layer를 사용해야 합니다.

cornerRadius를 사용해 원하는 만큼 라운드 처리해준 후, borderWidth 두께를 지정해주고 borderColor를 이미지뷰의 배경과 동일한 색상으로 설정해주고 마지막으로 masksToBounds를 true로 설정해 마스킹 처리해 라운드 밖의 이미지는 보이지 않도록 해줍니다.

masksToBounds는 기본 값이 false로 제대로 라운드 처리하려면 해당 값을 true로 설정해야 합니다.

여기까지 작업하면 UIImageView의 이미지가 아래와 같이 보여집니다.

소스는 다음과 같습니다.

@IBOutlet weak var let ivRoundImg: UIImageView!
ivRoundImg.layer.cornerRadius = 10
ivRoundImg.layer.borderWidth = 1.0
ivRoundImg.layer.borderColor = UIColor.white.cgColor
ivRoundImg.layer.masksToBounds = true

 

작업하다보면 위 설명한 것 처럼 모든 모서리를 라운드 처리해야 하는 경우도 있지만 특정 방향만 라운딩 처리하고자 할 때도 많습니다.

이러한 경우 layer의 maskedCorners를 사용하는 방법과 extension으로 공용 함수를 만들어서 사용하는 방법이 있는데 

layer의 maskedCorners를 사용하는 방법은 네이밍이 직관적이지 않아 이 글에서는 extension으로 공용 함수를 만들어서 사용하는 방법에 대해 설명하도록 하겠습니다.

 

UIView extension으로 roundCorners() 함수를 아래와 같이 생성해줍니다.

해당 함수는 매개변수로 라운드 처리할 모서리와 라운드 처리 값을 매개변수로 넘겨받아 모서리를 라운드 처리해주는 함수로 아래와 같이 구현해 줍니다.

extension UIView {
    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
         let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
         let mask = CAShapeLayer()
         mask.path = path.cgPath
         self.layer.mask = mask
    }
}

 

이 함수를 이용해 위에 설명한 ivRoundImg의 상단 왼쪽과 상단 오른쪽을 라운드 처리해보겠습니다.

위 코드에서 "ivRoundImg.layer.cornerRadius = 10"를 삭제하고, 개발자가 원하는 부분만 라운드 처리해주는 위 roundCorners()함수로 대체합니다.

전체 사용방법은 아래와 같습니다.

ivRoundImg.roundCorners(corners: [.topLeft, .topRight], radius: 10.0)
ivRoundImg.layer.borderWidth = 1.0
ivRoundImg.layer.borderColor = UIColor.white.cgColor
ivRoundImg.layer.masksToBounds = true