Swift UIImageView을 Circle로 만들기

앱의 UIImageView를 사각형이 아닌 원으로 보여주고싶다면?

cornerRadius (인스턴스 프로퍼티)

레이어의 배경에 둥근 모서리를 그릴 때 사용할 반경. 애니메이션 가능~

Declaration

var cornerRadius: CGFloat { get set }

Discussion

반경을 0.0보다 큰 값으로 설정하면 레이어가 배경에 둥근 모서리를 그리기 시작한다. 기본적으로 모서리 반경은 레이어의 내용 속성에 있는 이미지에 적용되지 않는다. 레이어의 배경색과 테두리에만 적용됩니다. 그러나 masksToBounds 속성을 true로 설정하면 콘텐츠가 둥근 모서리로 잘린다.

공식문서

masksToBounds
clipsToBounds와 비교하여 나중에 알아보겠지만, corverRadius를 설정해주고 maskToBounds를 false로 해주면 원형으로 잘리지 않는다.

---

1. 스토리보드에 있는 UIImage와 코드 연결

먼저 스토리보드의 뷰의 이미지를 에디터영역과 연결해주는 작업이 필요하다.

 

메인에서 오른쪽 상단에 보면 Adjust Editor Option이라고 뜨는 버튼을 누르고 Assistant를 클릭!
그럼 에디터영역이 짜잔 등장한다.

 

마우스가 없다면 control를 누른상태로 이미지를 클릭에 에디터영역에 드래그앤드롭을 해준다.

이때 @IBOutlet이 자동으로 생성되는데 이게 연결해주는 다리역할이다.

 

 

현재 gwanghae와 test는 중복으로 연결돼있다. test를 삭제하고 이미지와 연결해제하고싶으면 어떻게 할까?

 

 

아래는 다른 예시긴 하지만 이렇게 삭제하면 된다.(브레이크포인트는 잘못 클릭해서 삭제한 것. 아무상관없다..ㅎ)

 

 

 

다시 본론으로 돌아와서 cornerRadius을 써서 이미지를 동그랗게 만들어보자.

 

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var gwanghae: UIImageView!
    @IBOutlet weak var movieTwo: UIImageView!
    @IBOutlet weak var movieThree: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
    // Do any additional setup after loading the view.

        gwanghae.layer.cornerRadius = 60
        movieTwo.layer.cornerRadius = 60
        movieThree.layer.cornerRadius = 60
    }
}

 

60이라는 숫자는 어떻게 알 수 있는걸까?

 

cornerRadius의 원리를 생각해보면되는데, 내가 이해한 바로는

cornerRadius는 할당된 반지름 직경만큼의 원이 코너에 접하게 그려지고 이미지에서 원의 밖에 위치한 코너부분은 안 보이는 것 같다.

아래처럼.(너무 느리네......빠르게 작성해도 영상에서 느려진다/..)

 

때문에 만약 원을 만들고 싶다면,
이미지의 인스펙터에서 Show the Size inspector를 들어가서 너비와 높이를 같은 값으로 설정해 프레임을 정사각형으로 만들고
Show the Attributes inspector에서 Contents Mode를 Scale To Fill로 해주면 이미지가 정사각형으로 들어찬다.

그럼 cornerRadius의 반지름은 설정해준 너비나 높이의 값의 절반을 할당해주면 된다.

 

+

 

원의 테두리에 Border을 줘보자

 

변수명이 엉망이긴하지만

gwanghae.layer.cornerRadius = 60
        gwanghae.layer.borderWidth = 3
        gwanghae.layer.borderColor = UIColor.gray.cgColor
        
        movieTwo.layer.cornerRadius = 60
        movieTwo.layer.borderWidth = 3
        movieTwo.layer.borderColor = UIColor.gray.cgColor
        
        movieThree.layer.cornerRadius = 60
        movieThree.layer.borderWidth = 3
        movieThree.layer.borderColor = UIColor.gray.cgColor
    }

 

borderColor은 CGColor이기 때문에 UIColor을 생략하고 .gray.cgColor 이렇게 적을 수 없다. Type 'CGColor?' has no member 'gray' 이런 오류가 나기 때문이다. CGColor에는 gray라는 프로퍼티가 없고 UIColor에 있기 때문에 생략이 불가하며 .cgColor로 타입을 바꿔주는 것이다.

 

---

🤔 고민한 부분 + 앞으로 알아야할 부분

cornerRadius는 왜 layer를 거칠까

이미지에 바로 corverRadius를 적용하는 것이 아니라 layer를 거쳐서가는건 포토샵처럼 레이어를 쌓아가는 것일까?
이렇게 생각한 이유는 코드의 이름때문이다. layer와 masksToBounds로 미루어 보았을 때, 포토샵에서 마스킹하는 것 처럼 원본 이미지가 잘리는 것이 아니라 마스킹된 부분 이외의 영역이 안 보인다는 것이 맞지 않을까? -> 공부가 필요하다

ViewController의 생명주기

위에 코드를 보면 UIImage와의 연결은 viewDidLoad 밖에서 했고 코드작성은 안에 해줬다. 뷰컨트롤러의 생명주기는

viewDidLoad -> viewWillAppear -> viewDidAppear -> viewWillDisappear -> viewDidDisappear

이렇게 된다고 한다. 

블로그를 간단히 참고해서 코드작성할 때 이해했는데 주말에 좀더 알아봐야할 것 같다💦