🎨 안드로이드 UI는 어떻게 업데이트 될까 ?

안녕하세요 :) 안드로이드 개발을 하다보면, tv.text = "hello"나, tv.setText("World!")로 UI를 업데이트할 때가 있는데요. 이런 명령어가 실행될때 내부적으로 어떤일이 일어나는지 궁금해보신적 없으신가요 ? 전 너무 궁금했네요. 오늘은 안드로이드에서 UI 변경 매커니즘이 어떻게 되는지 알아보려합니다. 오늘도 화이팅 입니다 ! 🌿

1️⃣ View 관련 용어와 클래스, 인터페이스들을 알아보자

---

• 아래서 설명하는 invalidation, traversal에 대한 설명은 Drawn out: How Android renders (Google I/O '18)을 참고하여 작성하였습니다.

invalidation

• 뷰 계층 구조, 즉 부모에게 다시 그려져야함을 알려주는 처리입니다.

• 뷰를 그리는 작업이 아닌, 자신의 부모에게 변경사항이 생겼음을 알려주는 작업입니다.

  The process of causing things to be redrawn

traversal

• 프레임을 그리는데 필요한 모든 단계을 수행하는 처리입니다.

• 뷰의 크기 측정 measure, 뷰의 위치 및 크기 배치 layout, 뷰를 그리기 draw 하는 처리를 일컫습니다.

• traversal 직후 draw()가 호출됩니다.

  Performing all phases of rendering for a frame

ViewGroup, ViewRootImpl, ViewParent

2️⃣ invalidate()를 통한 UI 변경 매커니즘

---

UI 변경 알고리즘

• (위 그림 출처)

invalidate() 메서드의 호출 스택 확인

• View.invalidate()

  • ViewGroup.invalidateChild()
    • parent = parent.invalidateChildInParent() : ViewGroup.invalidateChildInParent()
    • parent = parent.invalidateChildInParent() : ViewRootImpl.invalidateChildInParent()
      • ViewRootImpl.scheduleTraversals() : traversal 작업을 스케줄링
      • ViewRootImpl.performTraversal() : traversal 작업을 실행 (draw 메세지를 보냄)

• View.invalidate()를 호출하여, 뷰 변경을 위한 invalidate 작업을 시작합니다. View.invalidate()는 내부적으로 현재의 부모에게 invalidate 작업을 알리기 위해, ViewGroup.invalidateChild()를 호출합니다.

  • 

• ViewGroup.invalidateChild()에선, 계속해서 부모에게 invalidate 작업을 알리게 됩니다. 해당 작업은 do-while문을 통해 반복됩니다. 이 반복안에선, ViewGroup.invalidateChildInParent()가 호출되는데, 이 부분이 바로 부모에게 invalidate 작업을 알리는 부분입니다. 다만 이 반복은 현재의 부모가 Root가 아닐때까지만 반복하게 됩니다.

  • 

• 만약, 현재의 부모가 Root라면, ViewGroup.invalidateChildInParent() 대신 ViewRootImpl.invalidateChildInParent()가 호출됩니다. 즉, do-while의 마지막 호출은 ViewRootImpl.invalidateChildInParent()가 됩니다.

• ViewRootImpl.invalidateChildInParent()에선 traversal 작업이 시작됩니다. 크게 scheduleTraversals() 와 performTraversal() 로 나누어 설명하겠습니다.

  • ViewRootImpl.invalidateChildInParent()에선, traversal 작업을 스케줄링하기 위해, ViewRootImpl.scheduleTraversals()을 호출합니다.
  • ViewRootImpl.invalidateChildInParent()에선, traversal 작업을 실행하기 위해, ViewRootImpl.performTraversal()를 호출합니다.
  • 

• ViewRootImpl.scheduleTraversals() 은 기존엔 MainLooper의 MessageQueue에 직접 Message를 넣었지만, 젤리빈 부터는 Choreographer에게 위임한다고 합니다. 해당 작업을 위임할 뿐, MainLooper의 MessageQueue에 Message를 넣는 건 변함 없습니다.

invalidateChild() , invalidateChildInParent() DEPRECATED

• ViewParent의 invalidateChild() , invalidateChildInParent()가 DEPRECATED되어, onDescendantInvalidated()를 사용해야합니다. 위 그림들에 반영해보면 아래와 같습니다.

3️⃣ invalidate()를 여러 번 호출하는 경우 (invalidate()를 연속 호출하는 경우)

---

뉴비 개발자들의 흔한 실수

• 아래 코드는 화면을 자동으로 업데이트하는 작업을 의도한 코드입니다. 1초씩의 텀을 가지며, 0부터 4까지의 숫자가 화면에 보여지게 되는, 즉 5번의 화면 전환을 1초 간격으로 하게 하는 코드를 작성하고 싶었습니다. 1초씩 sleep 해주므로써, 화면 업데이트에 텀을 줬으니 제대로 작동해야 기분이 좋을 것 같습니다. 과연 이 코드가 제대로 작동 될까요?

  class MainActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_main)
          findViewById<Button>(R.id.button).setOnClickListener {
              Log.d("setOnClickListener", SystemClock.uptimeMillis().toString())
              onClick(findViewById<TextView>(R.id.text_view))
          }
      }
  
      fun onClick(view: TextView) {
          for (i in 0..4) {
              view.text = i.toString()
              Log.d("for 문 ${i}번째", SystemClock.uptimeMillis().toString())
              SystemClock.sleep(1000)
          }
  
      }
  }

• 유감스럽게도, 위 코드는 아래처럼 작동됩니다. 안드로이드 개발에 입문하시면서, 아래와 같은 실수를 저질러본 경험이 있으실겁니다. (ㅎㅎ)

  
  • 로그를 찍어보니, for문은 정확히 5번 돌았습니다. 그렇다면 틀림없이 setText()도 5번 호출되었습니다. 로직이 틀린 것 같진 않은데, 도대체 왜 4만 출력되는지 모르겠습니다.
    • 

이 코드가 의도한대로 작동하지 않는 원인

• 이 코드의 문제를 정의하면 아래와 같습니다. 앞에서 traversal을 통해 MainLooper의 MessageQueue에 Message를 넣는다고 했는데요. 이 작동원리를 적용해보면, 1초 간격이 없다는 문제의 원인은 이해할 수 있게됩니다. 다른 문제까지 하나씩 설명드리겠습니다.
  1. 1초 간격이 없다 → MessageQueue의 Enqueueing과 관련
  2. 화면 변경이 1번만 이루어진다 → View의 mPrivateFlags와 관련

작업 실행 순서와 관련된 원인 (Enqueueing)

• 기존 이해를 적용해본다면, 아래 과정이 순차적으로 5번 반복되어야합니다.

  invalidate() → performTraversal() → draw Message → Sleep

• 따라서, 아래 그림과 같이 작업이 Enqueueing 됩니다. queueing된 순서대로 작업이 이루어지게 되죠. 즉, MessageQueue에 0을 그리는 메세지부터 4를 그리는 M까지 차례대로 enqueue 된다고 이해됩니다.

  • 
  • 여기서 원인 1을 이해할 수 있습니다.
  • I P M S 의 과정이 이뤄지고, M단계에서 draw Message는 ,MainThread의 작업으로, MessageQueue에 저장됩니다. 즉 Sleep이 실행되는 시점과 draw Message가 실행되는 시점이 다릅니다. 따라서 화면 전환과 Sleep이 순서대로 이뤄지지 않습니다.

mPrivateFlags와 관련된 원인

• 그렇다면 화면 변경은 MessageQueue 그대로 5번 이뤄지나, 너무 빠른 속도로 변경되어 우리가 감지할 수 없는것은 아닐까 ? 라는 의문이 생길 수 있습니다. 하지만 화면 변경은 단 1번만 이뤄지게 됩니다. MessageQueue엔 단 1개의 draw Message만 들어가게 되기 때문입니다.
• View의 mPrivateFlags를 통해, 단 1개의 메세지만 MessageQueue 들어가게 제어해줍니다. 즉, View의 mPrivateFlags는 연속적인 invalidate() 호출에 대해, 모든 호출이 ViewRootImpl까지 도달하지 않고, 첫 번째 호출만 ViewRootImpl에 도달하게 제어해줍니다.
  • 즉 Traversal 작업을 맡은 ViewRootImpl에 딱 한 번만 도달하게 되므로, 단 한번의 화면 전환만 이뤄지게 됩니다.

#️⃣ Reference

---

• 노재춘 : 안드로이드 프로그래밍 Next Step
• Drawn out: How Android renders (Google I/O '18)