Ch.3 Silver: Adding a Gradient Layer

# 그라데이션 레이어 추가하기

• 아래 그림과 같이 CAGradientLayer 를 사용해서 배경색을 그라데이션이 들어간 색으로 바꿔주는 게 목표!
  

# insertSublayer(_:at:)

1. UIView 의 layer 에 추가할 CAGradientLayer 인스턴스를 생성한다.
   • 이하 gradientLayer

2. view 전체를 채우려고 하므로 gradientLayer의 frame 을 view 의 bound 와 같게 설정한다
   • 처음에는 이 부분을 놓쳐서 왜 그라데이션이 안 먹을까 고민했는데 영역 설정을 안해줘서였다...

3. 그라데이션할 색상들을 설정한다.

4. view layer 의 sublayer 배열에 gradientLayer 를 추가한다
   • 버튼들을 덮지 않도록 0번째 인덱스, 즉 가장 밑에 추가!

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = view.bounds
        gradientLayer.colors = [
            UIColor.purple.cgColor,
            UIColor.blue.cgColor,
            UIColor.green.cgColor,
            UIColor.yellow.cgColor,
            UIColor.orange.cgColor,
            UIColor.red.cgColor
        ]
        view.layer.insertSublayer(gradientLayer, at: 0)
    }
}

☀️ view.background == view.layer.background

과제를 하다가 문득 왼쪽과 오른쪽 모두 배경색을 바꾸는 데 사용할 수 있는데 어떤 차이일까 하는 의문이 들었다. 찾아본 결과 view 의 background 를 지정하는 것은 실제로 해당 view 의 layer 의 background 를 지정하는 것이라고 한다. 직접 print 문으로도 확인해봤는데 어느쪽이든 하나의 값을 변경하면 항상 둘 다 변경된 값으로 업데이트되었다!

# viewWillLayoutSubviews()

• 가로모드로 변경시켜 보면 아래와 같이 매우 끔찍한 모습이 된다. 책 설명에 의하면 layer 가 view 처럼 오토 레이아웃에 참여하지 않기 때문. 즉, 내 코드에서는 viewDidLoad() 메서드에서 gradientLayer.frame = view.bounds 이 부분이 자동으로 업데이트 되지 않으므로 직접 코드를 작성해야 한다.
  

• 따라서 viewWillLayoutSubviews() 메서드를 오버라이딩해서 view 의 bounds 가 바뀔때마다 gradientLayer 의 frame 을 새로운 값으로 업데이트하도록 했다. 블로그 글을 정리하면서 sublayer 들 말고 view.layer.bounds 는 알아서 업데이트되겠지...? 싶어서 확인해봤는데 얘는 자동으로 업데이트 된다....!

class ViewController: UIViewController {
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        if let gradientLayer = view.layer.sublayers?[0],
           gradientLayer.isKind(of: CAGradientLayer.self) == true
        {
            gradientLayer.frame = view.bounds
        }
    }
}

☀️ 느낀점

• 초반이라 그런지 아님 Silver 단계라 그런지 사실 cs193p 에 비하면 과제라고 하기도 민망한 수준이지만, 쉽다보니 역으로 작은 컴포넌트 하나하나 확인할 여유가 생겨서 좋은 것 같다. cs193p는 (내가 조급한 탓에😂) 과제가 난이도도 있고 양도 많아서 거의 끌려다니다시피해서 의문을 갖거나 이것저것 테스트할 여력이 없었는데 이렇게 공부하는 게 내 성향과는 더 맞는 것 같은 느낌!