[UIKit] ImageView 모서리를 둥글게, 또는 원형으로 만들기

안녕하세요 하노입니다 :)

오늘은 ImageView 모서리를 둥글게, 또는 원형으로 만들어 보는 방법에 대해 알아보겠습니다.

 

---

 

1. ImageView 모서리 둥글게 만들기

1. 먼저 이미지를 준비합니다.

 

2. 이미지를 project 내 Assets에 넣습니다.

 

3. storyboard에서 imageView를 검색하여 원하는 위치에 놓습니다.

 

 

 

4. imageView 내 사진을 넣고 오토 레이아웃으로 위치 및 크기를 잡아줍니다.

 

 

5. imageView를 변수로 선언합니다.

 

 

6. viewDidLoad() 내 아래의 코드를 입력합니다.

 

 

memojiImage.layer.cornerRadius = 30
memojiImage.layer.borderWidth = 5
memojiImage.layer.borderColor = UIColor.blue.cgColor

 

 

 

7. run을 눌러 확인해봅시다!

 

 

잘 적용 되었군요! 이렇게 모서리가 둥글게 만들면 됩니다.

 

 

 

 

 

2. ImageView를 원형으로 만들기

이제 ImageView를 원형으로 만들 차례입니다. 앞서 모서리를 둥글게 만들었던 것을 응용해보면,

모서리의 라운드를 계속해서 큰 값을 주다 보면 결국 라운드의 끝과 끝이 만나 원형이 만들어지겠죠?

 

이 점을 이용하여 만들어 원형으로 만들어 보려고 합니다.

 

 

1. 아래의 코드를 viewDidLoad()에 입력합니다.

 

 

memojiImage.layer.cornerRadius = memojiImage.frame.height/2
memojiImage.layer.borderWidth = 5
memojiImage.clipsToBounds = true
memojiImage.layer.borderColor = UIColor.blue.cgColor

 

 

 

 

2. run을 눌러 출력을 확인합니다!

 

보여지는 것처럼 원형으로 잘 만들어졌군요!

 

여기서 혹시 이미지를 꽉 찬 상태로 원형을 만들고 싶으신 분들은

 

아래의 그림에서 View -> Content Mode 에서 Aspect Fill 로 바꿔 주시면 이미지가 꽉 차게 되는 것을 확인하실 수 있습니다.

 

 

이 상태에서 run을 다시 돌려볼까요?

 

 

짠! 이미지가 꽉 찬 상태로 원형이 만들어졌습니다!

 

이렇게 storyboard 상으론 모서리를 둥글게 하거나 원형으로 만들 수 없기 때문에 코드로 직접 만들어주어야 합니다! 

 

 

 

평소에 항상 image를 변형시킬 때 검색하여 찾아 쓰곤 했는데요,

이 정도는 검색하는 것보다 평소에 외우고 있는 것이 코드를 작성할 때 좀 더 시간을 줄일 수 있지 않을까??? 해서 마음먹고 정리해봤습니다!

 

그럼 ImageView의 모서리를 둥글게 만들기, 원형으로 만들기 편은 여기서 끝내도록 하겠습니다.

 

감사합니다!