[Swift] tintColor 가 내 이미지에 적용되지 않는다고요!
개-하! 오늘 내용은 쓸까 말까 하다가.. 그냥 모…. 쩝…
그래서 님덜아! Template Image 가 먼지 아세여?? (다짜고짜)
여기 귀여운 우리의 갓도리 이미지가 있구여
얘를 이미지 뷰에 넣어주면 상상하신대로 잘 나올텐데여
let ggumdori = UIImage(named: "ggumdori")!
myImageView.image = ggumdori
이렇게 renderingMode 를 alwaysTemplate 으로 해서 템플릿 이미지를 만들면 어케되게여???
myImageView.image = ggumdori.withRenderingMode(.alwaysTemplate)
끄액,, 진짜,, 외계인이 되어버림,,
그럼 여기까지 보고 Template Image 는 대충,, 이미지의 모양??? 이라고 생각이 들것 같은데여!
네 맞씁니다. Template Image 란 이미지의 불투명한 부분만 나타내는 비트맵 이미지입니다.
여기서 중요한건, 그리려는 모양을 지정하지만 연관된 색상 정보는 지정하지 않는다는 건데여,, 그래서 원본 이미지가 노란색도 있구,, 빨간색도 있었음에도 그냥 냅다 한가지 색상으로 렌더링 되어버림!
그럼 이 기본 퍼렁 색상은 어디서 나온거냐,, ㅜㅜㅜ 하면 바로! imageView 의 tintColor 가 템플릿 이미지의 색상을 결정합니다.
myImageView.tintColorimageView 의 tintColor 는 템플릿 이미지를 색 입히는데(tint) 사용되는 색상인데요, 공식 문서에 보면 기본 값은 nil 이라고 나와있어여. 근데 실제로 찍어보면 systemBlueColor 더라구요? (이미지 뷰를 xib 에서 만드나, 코드로 만드나 tintColor 는 똑같이 시스템 블루임)
<UIDynamicCatalogSystemColor: 0x600001758600; name = systemBlueColor>여기서 주의할거는 내가 imageView 의 tintColor 를 적용하지 않았어도, 상위 view 의 tintColor 가 설정되어있으면 이 값을 따라갈 수 있다는 점 알고계세요! (제가 데임)
튼.. 이 tintColor 를 적용하면, 뷰는 alpha 0.0 이 아닌, 즉, 투명하지 않은 모든 픽셀에 해당 색상을 입힌다는거죠!?!
여기서 중요한건 이 색상으로 템플릿 이미지를 색칠한다는 거예여!!
🤔 그럼 다른 이미지도 있냐?
넵! 아까 귀여운 갓도리가 그냥 원본 이미지였겠고, alwaysTemplate 을 통해 렌더링 된 애가 템플릿 이미지가 되겠져??? (일반적으로 템플릿 이미지를 사용하여 상징적인 모양을 나타냅니다. (ex. 재생 / 일시정지 버튼))
이미지를 어떻게 렌더링할 것 인가에 대한 세팅 값은 아래와 같이 3가지가 존재하는데요, 이 렌더링 모드는 UIKit 이 색상 정보를 사용하여 이미지를 표시하는 방법을 제어합니다.
case automatic
case alwaysOriginal
case alwaysTemplate만약 default 값인 automatic 으로 설정한다면, context 의 기본 렌더링 모드를 사용하여 이미지를 그리게 됩니다.
ggumdori.withRenderingMode(.automatic)🤔 ?? context 의 기본 렌더링 모드????
님덜,, 똑같은 이미지라도 tabBar 에 넣으면 냅다 파란색으로 되는거 한번쯤 경험해 보셨죠? 이게 tabBar context 에서는 렌더링 모드가 template 이 된 상황입니다 ㅎㅎ
그럼 다음으로 alwaysOriginal 로 렌더링하면, 이미지를 template 으로 대하지 않고 항상 원본 이미지를 그립니다
ggumdori.withRenderingMode(.alwaysOriginal)마지막으로 alwaysTemplate 으로 렌더링하면 이미지의 색상 정보는 무시하고, 항상 template 이미지를 그립니다
ggumdori.withRenderingMode(.alwaysTemplate)그럼 내가 아무것도 안했으면 렌더링 모드는 디폴트로 automatic 이겠네?!?!!
넵,, 대부분의 상황에선 그렇겠지만,, Xcode 에서 이미지 Attribute Inspector 에서 렌더링 모드가 다른걸로 설정되어있을 수도 있거든여?? 이걸 조심하십셔
실전 테스트
그럼 이제 몇가지 코드를 볼건데요, 이 이미지가 어떤 색으로 렌더링 될지 맞춰보세요!
문제 1.
myImageView.image = ggumdori
.withRenderingMode(.alwaysOriginal)
.withTintColor(.green)정답 1: 초록색
withTintColor 는 현재 이미지에 특정한 tint 색상이 적용된 새로운 버전을 반환합니다.
문제 2.
myImageView.image = ggumdori
.withRenderingMode(.alwaysOriginal)
.withTintColor(.green)
myImageView.tintColor = .yellow정답 2: 초록색
UIImageView 의 tintColor 프로퍼티는 "템플릿 이미지" 를 색칠하는데 사용됩니다. alwaysOriginal 로 렌더링 되었으므로, 애초에 yellow 로 색칠할 템플릿 이미지가 없습니다.
문제 3.
myImageView.image = ggumdori
.withRenderingMode(.alwaysTemplate)
.withTintColor(.green)정답 3: 파란색
alwaysTemplate 로 렌더링하여 template image 를 사용한다는 것은, 이미지 자체의 색상은 무시한다는 것입니다. 따라서 이미지에 세팅된 tintColor 는 무시됩니다.
문제 4.
myImageView.image = ggumdori
.withRenderingMode(.alwaysTemplate)
.withTintColor(.green)
myImageView.tintColor = .yellow정답 4: 노란색
alwaysTemplate 로 렌더링하여 template image 를 사용한다는 것은, 이미지 자체의 색상은 무시한다는 것입니다. 따라서 이미지에 세팅된 tintColor 는 무시됩니다. 하지만, UIImageView 의 tintColor 프로퍼티는 "템플릿 이미지" 를 색칠하는데 사용되므로, 해당 속성에 세팅된 값으로 색칠됩니다.
마무리
그럼 오늘은 여기까지!
사실 오늘 내용??? 문서랑 테스트해가면서 짜집기한겁니다?? 그러니까 틀린 내용 있으면 알려주세요!
그럼 20000!
