[Swift] View Drawing Cycle

---

View Drawing Cycle

---

Veiw Drawing Cycle이 무엇일까?

view가 로드되거나 변경이 있을 때, 화면에 그려지는 Cycle을 말한다.
view가 로드 시, 시스템이 UIView에게 draw 메서드를 통해 드로잉을 요청한다.
그리고 스냅샷을 캡쳐하여 UIView에게 전달한다.
그 다음 뷰의 컨텐츠 변경 시 관련 메서드들을 호출하여 시스템에게 요청한다.

iOS의 이벤트는 각 스레드마다 존재하는 Run loop를 통해 처리된다.
그 중 Main Run loop는 사용자가 입력한 이벤트를 처리하는 역할을 한다.

이 Main Run loop의 마지막 단계에서 'Update Cycle'이라는 것이 발생한다.
여기서 Layout(size, position), Display(color, text, image), Constraints(제약조건)를 업데이트하는 작업을 수행한다.

Display의 경우 draw,
Layout의 경우 layoutSubviews,
Constraints의 경우 updateConstraints가 그 처리를 담당한다. 

이들은 최초로 View가 load 되어 화면에 나타날 때도 불려진다. (-> viewDidLoad)

---

아래 간단한 예시를 통해서 
View Drawing Cycle에 대해서 알아보자.

---

tableViewCell.Xib 파일을 통해 오토레이아웃을 잡았다.

(왼쪽: titleImageView / 오른쪽: subtitleImageView)

왼쪽 imageView는 

1:1 비율에 고정 너비 값 66을 설정해줬다.
(-> 기기 크기에 상관없이 무조건 너비 66 고정됨)

 

오른쪽 imageView는

1:1 비율에 너비를 뷰에 Equal Widths를 줬다.
(-> 기기 크기에 따라 해당 너비비율대로 이미지 크기가 맞춰짐)

---

이때, 두 imageView를 원으로 만들기 위해서
cornerRadius를 아래와 같이 설정해주었다.

그리고 테이블뷰 셀에 뷰가 UI부분은 한 번만 실행돼도 상관없기 때문에
awakeFromNib에 작성해주었다.

        titleImageView.layer.cornerRadius = titleImageView.frame.width / 2
        
        subtitleImageView.layer.cornerRadius = subtitleImageView.frame.width / 2

이렇게 한 다음 실행해보면,

너비를 고정으로 66을 준 imageView는 원으로 만들어졌는데,
너비를 비율로 설정한 imageView는 원이 이상하게 만들진 것을 확인할 수 있다.

그 이유는
높이 너비가 절대적인 사이즈면, 그 너비에 맞춰 그려지기 때문에 원이 나올 수 있지만,

비율을 통해서 높이와 너비를 설정한 경우, 화면이 그려지고 awakeFromNib에 실행하게 되면,
Xib 비율 그대로 그려지기 때문에 뷰에 그려진 모습이 완벽한 원으로 나오지 않는 것이다.
(awakeFromNib은 초기화 될 때 실행되기 때문)


그렇다면 뷰를 그리는 코드를 awakeFromNib에 작성하지 않으면 어떻게 될까?

이렇게 처음에는 원이 아니었다가 스크롤을 하다보면, 원이 만들어진다..

그래서 처음에 보여질 때부터 원으로 그려지게 하기 위해서는
위에서 언급했던 layoutSubView 메서드를 사용하면 된다.
이 메서드를 사용하면 필요한 시점에 layout이 한 번 더 업데이트 된다.

    override func layoutSubviews() {
        super.layoutSubviews()
        subtitleImageView.layer.cornerRadius = subtitleImageView.frame.width / 2
    }

이렇게 해주고, 실행시켜보면?

이렇게 정상적으로 보여지는 것을 확인할 수 있다.

---