Swift 기초, View UIColor CGColor 뷰 색상적용하기

 

 

안녕하세요! 민군입니다 ^-^// 오늘은 간단한 Swift 개발 팁을 공유합니다. 바로 뷰의 CGColor, UIColor속성에 따라 색상값을 설정하기! 

UI로 사용되는 뷰의 색상을 바꿔보겠습니다. 너무 쉬운 주제다 싶으시면 스킵하시면 됩니다!

 

 

 

 

위는 테이블뷰의 푸터(테이블뷰 섹션의 맨 끝 꼬리셀)를 설정하는 모습인데요. 

저는 이 푸터뷰의 배경색상을 변경해보려고 합니다. 푸터뷰 배경색상의 변경은 뷰요소.backgroundColor = 원하는 색상을 넣으면 되는데요. 첫번째 설정방법으로는 빨/초/파 3원색과 알파값(투명도)를 주는 방법입니다. 이 방법을 사용한게 위 화면이구요. 

footerView.backgroundColor = UIColor(displayP3Red: 빨강값, green: 초록값, blue: 파랑값, alpha: 투명도) 를 넣으시면 됩니다. 여기서 초보자분들은 질문하실 수 있을것 같아요.

'왜 빨/초/파 값에는 xxx/255형식으로 값이 들어가나요?'  => 네! 빨/초/파의 값또한 알파값(투명도)과 동일하게 최소0 ~ 최대1의 값이 들어가는것은 마찬가지이지면 표현방법이 다릅니다. 포토샵을 해본 분들이라면 색상을 16진수로 표현하는 방법을 아실겁니다. 흰색은 #FFFFFF, 검은색은 #000000처럼 말이죠. 이처럼 색상을 16진수로 표현하는 방법체계로 생각하여 설정하는 방법이라 보시면 됩니다.

일단 위의 코드대로 결과값을 보도록 하겠습니다.

 

 

 

 

저는 위의 테두리색(푸터뷰)를 변경했는데요. 회색색상인것을 확인할 수 있습니다. 이번에는 푸터뷰의 색상을 검정색으로 바꿔보겠습니다.

 

 

 

 

 

앞서 말씀드렸듯이 표현방법은 footerView.backgroundColor = UIColor(displayP3Red: 빨강값, green: 초록값, blue: 파랑값, alpha: 투명도)를 넣으면 되는데요.

16진수 RGB 표기법에 따라 검정색은 #000000, 즉 이를 코드로 표현해보면 

footerView.backgroundColor = UIColor(displayP3Red: 0/255, green: 0/255, blue: 0/255, alpha: 1) 가 되겠습니다. 결과 한번 보겠습니다.

 

 

 

 

 

깔 끔 하게 DARK 색으로 변경이 된것을 보실 수 있습니다. 위의 색상설정이 좀 번거롭다하시면 더 간단한 색상 설정방법이 있습니다. "UIColor.색상" 방식으로 색상을 변경하는 방법입니다. 

 

 

 

 

 

위처럼 RGBA(Alpha)값을 일일히 넣지 마시고, UIColor.blue 를 넣으시면 간단하게 파랑색상으로 변경이 됩니다! 

UIColor의 색상옵션으로는 UIColor.Red, Blue, green, gray, lightBlue, darkGray등 다양한 옵션이 있으니까요. 섬세한 색상표현이 아니라면 이 방법을 쓰셔도 나쁘지 않을겁니다.

footView.backgroundColor = UIColor.blue의 결과값을 한번 보겠습니다!

 

 

 

 

 

역시 깔 끔 하게 파랑색으로 헤더뷰 배경색상이 변경되었군요. 이번엔 초록색으로도 바꿔볼까요?

 

 

 

 

 

UIColor.green으로 설정하면 이렇게 또 색상이 바뀝니다. 정말 편하죠. 

위처럼 모든 뷰가 UIColor값으로만 설정된다면 편하고 좋을거 같지만 아쉽게도 그렇지는 않습니다! 뷰의 변경할 색상의 종류에 따라 UIColor방식 외에 CGColor방식도 쓰기 때문인데요. UIColor, CGColor의 차이는 iOS고수님의 블로그를 참고하시면 되겠습니다. 고수님의 UIColor vs CGColor 설명 ▶︎https://zeddios.tistory.com/239

 

 

 

 

그렇다면 CGColor, UIColor의 구분은 어떻게 하면 좋지? 하실 수 있는데 방법은 간단합니다.

변경하고자 하는 변수명 위에 Option + 클릭을 하시면 위처럼 UIColor형인지 CGColor형인지 구분이 가능하기 때문입니다. UIColor형이면 위 방법대로 색상설정을 하시면 되시는데 CGColor형이다면, cgColor형에 맞추어 설정을 하시면 되는데 방법은 간단합니다.

 

 

 

 

 

 

푸터뷰의 테두리색을 설정하려고 보니... footerView.layer.borderColor의 경우 CGColor의 속성을 갖고 있습니다. 

이 CGColor(테두리색) 값을 노란색으로 설정하고 싶다면?

=> UIColor.yellow.cgColor 설정하시면 노란색으로 설정할 수 있습니다!

UIColor값인 푸터뷰의 배경색은 회색, CGColor값인 푸터뷰의 테두리색은 노랑색으로 설정한 결과를 보겠습니다.

 

 

 

 

 

 

마치 야광선을 보는 느낌이네요. 검은배경에 노랑테두리로 씌여져있는 헤더뷰가 보입니다. 위처럼 CGColor, UIColor 입맛따라 색상값 자유자재로 사용하시면 되겠습니다.

 

훨씬 많은 관련 기능이 있지만 막상 좀더 깊게 가자니 부정확한 정보를 드릴까 싶어... @_@;; 간단한정도에서 물러가겠습니다. 심심하면 포스팅 올리겠습니다. 즐코딩하시기 바랍니다! ^-^//