UIKit) Color
UIColor 알아보기.
UIColor의 정의는 색상 데이터 및 때때로 불투명도를 저장하는 개체이다.
여기서 말하는 색상데이터는 RGB 값을 말하는 것이고 불투명도는 Alpha 값을 말한다.
UIColor은 NSObject를 상속받는 클래스이다.
애플 참고자료를 보면 위의 코드를 통해서 뷰의 backgroundColor, tintColor등을
애플에서 제공하는 systemColor로 바꾸는 것을 설명하고 있다.
인터페이스 빌더와 코드를 통해 Color를 구현해보도록 하자!!
인터페이스 빌더에서의 컬러 설정
인터페이스 빌더에서 컬러를 설정하는 방법은 매우 직관적으로 되어있다.
컬러의 목록을 위에서부터 보면 현재컬러, 최근에 사용한 컬러, 네임드컬러, 시스템컬러 순으로 표시된다.
커스텀을 통해 다양한 컬로도 구현이 가능하다.
코드를 통한 컬러 설정
View와 Slider를 각각 아웃렛 연결을 하고 하나의 Target-Action 이벤트 함수를
세게의 슬라이더와 연결해준다.
RGB값을 변경할 때 View의 backgroundColor가 변화하는 것을 구현해 보려 한다.
그 전에 코드로 색을 바꾸는 방법을 간단히 알아보고 넘어가자~
viewDidLoad 함수에서 아웃렛으로 설정했던 colorView의 색상을 바꿔보겠다.
colorView.backgroundColor = UIColor.systemOrange
UIKit이 제공하는 거의 모든 API는 대부분 UIColor클래스로 컬러를 처리한다.
컬러를 처리하는 속성이나 파라미터 이름에는 Color이라는 접미어가 추가되어 있다.
UIColor은 자주 사용하는 컬러를 타입프로퍼티로 제공한다.
새로운 컬러를 만들때에는 생성자를 사용한다.
let color = UIColor(red:green:blue:alpha:)
UIColor에서 RGB값은 0에서 255사이의 값으로 표현하고,
Alpha 값은 0.0에서 1.0 사이의 값을 표현한다.
그래서 파라미터로 전달할 때 컴퍼넌트값을 이 범위로 바꿔서 전달해야 한다.
red: 30, green: 150, blue: 255인 컬러를 만들때에는
컴퍼넌트 값을 그대로 전달하면 안돼고 255로 나눈 값을 전달해야 한다.
이런 형식의 코드는 컬러를 만들때 사용하는 제일 기본적인 코드이다.
또다른 생성자를 만들고 이번에는 (displayP3Red:green:blue:alpha:)를 알아보자.
컬러 스페이스 중에서 DCI-P3라는 컬러 스페이스가 있고,
위에서 처음 구현했던 코드보다 25% 정도 더 넒은 범위의 컬러를 구현할 수 있다.
애플은 이 컬러 스페이스를 애플 디바이스에 맞게 바꿔서
Display P3 컬러 스페이스를 만들었다.
요즘에 나오는 애플의 디바이스에는 거의 다 지원을 한다.
아이폰에서 찍은 사진도 display p3 컬러스페이스를 기본값으로 사용한다고한다!!
그렇게 때문에 코드를 통해 컬러를 구현할 때에는
이런 형식의 코드를 주로 사용한다.
위 코드에서 하나의 컴퍼넌트를 새로 만들고 싶다면 모두 새로 생성해주어야한다.
하지만 Alpha 값만 바꾸는 방법은 있다.
이렇게 구현해주면 된다.
Alpha 값이 0.0인 값이 필요하다면 .clear 속성을 사용하면 된다.
다시 돌아와 슬라이더를 통한 View의 컬러를 변경해 보겠다.
changedSlider액션 함수에 개별 상수로 슬라이더의 값을 저장한다.
그리고 새로운 컬러를 만든 후 colorView에 backgroundColor로 설정한다.
colorView에 설정되어있는 backgroundColor로 슬라이더를
앱실행시에 초기화 하기위해 viewDidLoad함수에서 추가 구현을 해줬다.
이 메서드를 통해 RGB컴퍼는트를 추출한다.
파라미터는 포인터로 선언되어있다. 컴퍼는트를 저장할 변수를 선언 후 포인터로 저장해야하니
파라미터를 전달 할 때 ‘&’문자를 변수앞에 붙여준다.
이어서 추출한 값들을 슬라이더의 초기값으로 설정해 준다.
앱 실행
앱을 실행하면 초기값으로 지정된 색상에 맞게 슬라이더가 초기화되어있고
각각의 슬라이드를 조절하면 valueChanged 이벤트를 통해
View의 backgroundColor가 변경된다!!
전체코드
CGColor & CIColor
CGColor은 섬세한 컬러처리를 할 때에 주로 사용하고,
컬러스페이스를 직접 설정하거나 컬러의 비트값을 설정할 수 있다.
CIColor은 주로 필터효과를 적용할 때 사용한다.
지금 코드는 View의 레이어에 접근 후 테두리의 너비를 10만큼 주고있다.
위의 코드는 지금의 View상태와 같다.
테두리의 색상을 바꾸기위해 view의 레이어에 접근 후 barderColor를 바꾸기위해
속성에 접근하려고 보면 CGColor 로 선언되어있는 것을 볼 수 있다.
CGColor는 다양한 컬러스페이스를 변경할 수 있는 속성들을 가지고 있다.
기본적으로 주어지는 (red:green:blue:alpha:) 속성으로 컬러를 설정해도 되지만
UIColor로 컬러를 만든다음 CGColor로 바꾸는 방법을 주로 사용한다.
- CGColor은 UIColor와 다르게 타입프로퍼티로 컬러를 제공하지 않는다.
UIColor은 cgColor이라는 속성이 선언되어있고 이 속성을 사용하면
UIColor을 CGColor로 쉽게 바꿀 수 있다.
CIColor을 바꾸는 방법도 비슷한 방법으로 하면 된다.
UIColor을 CGColor, CIColor로 바꿀 수 있다면 그 반대인경우도 있다.
이 방법에서는 UIColor 생성자를 사용한다.
UIColor(cgColor:) //또는 UIColor(ciColor:)
Pattern Color
보통 컬러는 단색으로 표현되지만 patternColor을 사용하면
assets 파일에서 지정한 이미지를 패턴으로 표시한다.
짜잔!! UIColor 속성으로 지정한 이미자가 패턴형식으로 보여진다.
패턴은 이렇게 이미지의 원래 크기로 표시된다.
패턴의 크기를 바꾸고 싶다면 속성으로 바꾸는 것은 불가능하고
패턴으로 사용하는 이미지의 크기를 원하는 크기로 바꿔주어야 한다.
Comments