[Android, Drawing View] 안드로이드에서 뷰가 그려지는 과정

안녕하세요. 블랙진입니다.

How Android Draws Views 일부를 번역한 글입니다.

How Android Draws Views 

엑티비티가 포커스를 받게되면, 레이아웃을 그리기 시작합니다. 안드로이드 프레임워크는 그림을 그리기 위한 순서를 수행하지만 엑티비티는 계층 레이아웃의 루트 노드를 공급받아야만 합니다. 

그리기는 레이아웃의 루트  노드 부터 시작하며 레이아웃 트리를 측정하고 그려야 합니다. 각 뷰 그룹은 자식 뷰가 그러질 책임을 갖고 뷰는 자기 자신을 그립니다. 왜냐하면 전위 순회 트리(traversed pre-order tree)구조 이기 때문에 부모 뷰는 자식 뷰 보다 먼저 그려집니다

출처 : 위키피디아

레이아웃은 두 가지 패스 과정을 통해 그립니다. : Measure Pass(측정 패스), Layout pass(레이아웃 패스)

Measure Pass

측정 패스는 measure(int, int) 함수 호출로 구현되고 뷰 트리의 하향식 탐색을 따릅니다. 각 뷰는 재귀동안 치수 사양을 트리 아래로 전달합니다. 측정 패스의 마지막 단계에는 모든 뷰가 측정치를 가지게 됩니다. 두번째 패스로 Layout(int, int, int, int) 함수가 호출 되며 이것 또한 하향식 탐색입니다. 패스 중에 각 부모 뷰는 측정 패스에서 계산된 크기를 가지고 자식 뷰가  배치되도록 합니다.

측정 패스는 두 클래스를 사용해 치수를 정합니다. 

ViewGroup.LayoutParams Class는 뷰가 어떻게 측정되고 배치되어 질지를 정합니다.

Base ViewGroup.LayoutParams Class 는 뷰의 가로와 세로가 어떻게 커질지를 정합니다.

각 치수는 3가지 값이 있습니다.

- 구체적인 수치 (10px, 100dp)

- MATCH_PARENT : 부모 뷰 만큼의 크기를 가집니다.

- WRAP_CONTENT : 뷰가 내용물을 감쌀 만큼의 크기를 가집니다.(패딩 포함)

Layout Pass

레이아웃을 초기화 하기 위해 requestLayout()을 호출합니다. 이 메소드는 통상 현재의 경계 내에서 적합하지 않은 경우 자신의 View 에 의해 불려집니다.

안드로이드 전위 순회 예제

여기서 부터는 번역글이 아닙니다.

전위 순위에 따라 뷰가 어떤 순서로 그려지는지 확인하기 위해 예제를 만들었습니다.

위와 같은 계층 구조의 레이아웃이 있는 경우 어떤 순서로 그려 질까요? 이를 좀더 보기 쉽게 그려 보았습니다.

전위 순회 트리 순서로 뷰는 그려지게 됩니다. 실재로 어떻게 그려지는지 로그를 통해 확인해 봤습니다.

사용한 예제 코드

<com.example.myapplication.MyRelativeLayout1
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <com.example.myapplication.MyTextView1
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.example.myapplication.MyRelativeLayout2
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <com.example.myapplication.MyTextView2
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <com.example.myapplication.MyTextView3
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <com.example.myapplication.MyRelativeLayout3
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <com.example.myapplication.MyTextView4
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <com.example.myapplication.MyTextView5
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </com.example.myapplication.MyRelativeLayout3>

    </com.example.myapplication.MyRelativeLayout2>

    <com.example.myapplication.MyRelativeLayout4
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <com.example.myapplication.MyTextView6
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <com.example.myapplication.MyTextView7
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </com.example.myapplication.MyRelativeLayout4>

</com.example.myapplication.MyRelativeLayout1>