• Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec
  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Gradient

image

나 이번에 아무래도 gradient 정복할 듯.. >.<

CAGradientLayer

image

프로퍼티들

Gradient를 구현하기 위해서는 CAGradientLayer 객체를 사용한다. Docs
(Core Graphics framework를 사용하는 방법도 있는데,, 기초 지식이 필요한데 난 없어,,)
background color위에 color gradient를 그려서 layer의 shape을 채우는 layer 이다!
모든 뷰 객체가 포함하고 있는 CALayer 클래스의 subclass이다.

쓰는 방법 요약

View에 CAGradientLayer 객체를 만들어 뷰 레이어에 붙여주면(addSublayer) 된다.

해야 할 일
1 CAGradientLayer 객체 초기화하기 (위에서 만든 gradientLayer)
2 gradient layer의 frame 설정하기
3 색상 설정하기
4 target view의 layer에 gradient layer를 sublayer로 추가하기

Gradient Layer 만들기

var gradientLayer: CAGradientLayer!
왜 … force unwapping 을 .. 해야… 하지?…
안 하면 오류난다. 초기값이 없어서.. 그래도 먼가 찝찝하니까 난 ? 쓸래 안되네ㅡㅡimage

그리고 ViewController에 초기화, 초기 값 설정을 위한 함수 createGradientLayer()를 만들어준다.
뷰에 붙이는 거 까지 다 해주는 함수.. 이게 젤 간단한 방법. viewDidLoad()viewWillAppear()에서 호출해주면 된다.

물론 함수 안 만들고 한줄한줄 써도 됨

func createGradientLayer() {
        gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.view.bounds
        gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
        self.view.layer.addSublayer(gradientLayer) 
  				//view 대신 내가 만든 UIView IBOutlet 이름 넣어도 됨
}

색상 조정

colors 프로퍼티 수정

gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]

위의 함수에서 요 부분에 배열로 색을 더더더 넣어주면 된다.
주의해야 할 점은 UIColor 객체 말고 cgColor 객체여야 함! color set 만들어서 animate도 가능하다!!! ㄷㄷ
animate 쓰는것도 좋아 보이는데? 우선 tableview 적용해보고 결정해야지

색상 위치

각 색상이 얼만큼 차지하는지 관련

기본값은 색상 개수에 따라 n등분. 그리고 요건 locations 이라는 프로퍼티를 사용해서 수정이 가능하다.
NSNumber 객체의 배열을 넘겨주면 됨. 시작 지점을 지정해주면 되고,
배열 인덱스가 늘어날수록 숫자는 늘어나는 형태여야 한다! (당연)
범위는 0.0부터 1.0

gradientLayer.locations = [0.0, 0.35]

이런 식으로 하면 두번째 색상이 1.0 - 0.35, 즉 65%를 차지하게 되는 것

주의!

locations 프로퍼티의 초기값은 nil 이다 주의주의 앱 터져요