💡 TIL - 22.07.05 | Assignment

저번에 만들었던 넷플릭스 화면에서
뷰 객체를 @IBOutlet으로 선언한 뒤 코드를 통해 UI 수정하기!

그 중에서 하단의 이미지 뷰 3 개의 테두리 색상과 모서리 둥글기 조절이 있었는데..

저번에는 하단의 이미지뷰 3 개를
Button의 Corner Style을 Capsule로 지정하고, 가로 세로 비율을 1:1 로 맞춰 원형으로 만든 후 이미지를 넣고 Stroke 설정으로 구현
했다.

이것을 코드로 바꾸는 과정에서 겪었던 일(?)을 적어 보려 한다.

일단 이미지뷰의 cornerRadius를 이미지 뷰의 절반으로 지정해 주어 원형으로 만들고(반지름 값으로 가질 수 있게!)
테두리 굵기도 5초만에(체감 상) 만들었는데..

이 코드들이 도저히 되지를 않았다.

사실 에셋에 컬러를 넣고 Color Extension을 만들어서 사용하면 가장 깔끔하고 쉬운 방법인데 아직 그 단계까지 수업이 나가지 않았기도 하고 그냥 뷰 컨트롤러에서 저렇게 원시적인(?) 방법으로도 해 보고 싶어서 일부러 해 봤다.

자꾸만 하얗게 나오는 나의 테두리들 🥲🥲
(마지막 사진은 borderColor를 지정하지 않아 검정색이다)

일단 원하는 컬러를 디지털 컬러 측정기로 찾고..(맥 빌트인 앱이다)

borderColor가 CGColor이기 때문에 일부러 CGColor로 지정까지 해 주었는데.... 결과는 흰색..

스토리보드에서 사용했던 Custom을 다시 클릭해서 코드로 저 네모 부분을 끌어오면 너무 예쁘게도 컬러가 들어온다..
( + Assets - Color Set에 있는 Color Panel에서도 끌어올 수 있는데, 이 방법이 더 나은 것 같다 )

성공적으로 나오는 테두리 컬러들..!!!
하지만 코드로 되지 않아 찝찝했다

서치서치,,,

아항...!!!! 0부터 1 사이의 값을 지정해 주어야 하는데 내가 준 값들은 100이 넘기도 할 정도로 큰 숫자들이라 흰색으로만 나왔구나,,
(원문)

다양한 방법으로 지정해 주기

❕borderColor는 CGColor이므로 UIColor로 하더라도 .cgColor를 통해 CGColor로 바꿔 주어야 한다.

컬러가 아주 잘 나오는 것을 확인할 수 있다 :)