'뷰 트리 구조'에 해당되는 글 1건

안녕하세요. 제임스 입니다. 

이번에는 뷰 계층 구조에 대해 언급해 보고자 합니다. 

사용자 인터페이스는 레이아웃들의 집합입니다. 그리고 각각의 레이아웃에 포함되는 위젯 (컴포넌트) 들은 뷰의 서브 클래스로 모두 뷰입니다. 그런 뷰들은 계층 구조를 가지게 됩니다. 이번에는 이 뷰 계층 구조에 대해 정리해 보겠습니다. 

■ 뷰 계층 구조

사용자 인터페이스의 각 뷰는 화면상의 직사각형 영역을 나타냅니다. 뷰는 그 직사각형 안에 그려지는 것에 대한 책임이 있으며, 화면의 뷰 영역에서 발생하는 이벤트(터치, 스와이프, 롱클릭 등등)에 응답해야할 책임도 있습니다. 

사용자 인터페이스 화면은 뷰 계층 구조로 구성되어 집니다. 그리고 뷰 계층 구조는 계층 구조 트리(tree)의 맨 위에 위치한 루트(root) 뷰와 그 밑의 가지에 위치한 자식 뷰로 되어 있습니다. 컨테이너 뷰의 자식 뷰는 자신의 부모 뷰 위에 포개져서 화면에 나타나며, 부모 뷰의 화면 영역 경계 안에만 나타나도록 그 범위가 제한됩니다. 

위 사용자 인터페이스는 버튼과 체크박스 뷰가 자리하고 있는데, 이 뷰들이 위치하는 방법을 제어하는 레이아웃 뷰가 여러개 있습니다. 

코드는 아래와 같이 작성 했습니다. 

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginLeft="30dp"
        android:layout_centerHorizontal="true">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="BUTTON"/>

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="BUTTON"/>

    </LinearLayout>


    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/ll"
        android:layout_marginTop="20dp"
        >

        <TableRow>
            <CheckBox
                android:text="CheckBox"
                android:layout_marginRight="10dp"/>
            <CheckBox
                android:text="CheckBox"/>
        </TableRow>

        <TableRow
            android:layout_marginTop="30dp">
            <CheckBox
                android:text="CheckBox"
                android:layout_marginRight="10dp"/>
            <CheckBox
                android:text="CheckBox"/>
        </TableRow>

    </TableLayout>

</RelativeLayout>

아래 이미지들은 위 사용자 인터페이스를 뷰 계층 구조적 측면에서 보여 줍니다. 

위 코드 상에서 가장 밖에 있는 RelativeLayout 으로 둘러 싼 모습입니다.

RelativeLayout 안에 같은 Level 에 LinearLayout 과 TableLayout 이 위치하고 있습니다. 

TableLayout 안에는 TableRow 두개가 자리하고 있습니다. 

마지막 이미지를 봤을때 첫번째 왼쪽 체크박스가 있는 부분을 보게 되면 원래는 RelativeLayout 의 영역이었지만, 그 위에 TableLayout 이 자리 하게 되어 이벤트등의 처리에 대한 권한이 TableLayout 으로 넘어 왔습니다. 하지만 그 안에 다시 TableRow 가 자리 하면서 대신하게 되고 다시 해당 위치에 CheckBox 가 위치 하면서 이벤트 처리에 대한 책임을 지게 됩니다. 

위 그림은 구조를 뷰 계층 구조(뷰 트리 구조)로 나타낸 것입니다. 

사용자 인터페이스는 뷰 계층 구조의 형태로 생성된 뷰들로 구성 된다는 것 이번 포스팅의 핵심입니다 :)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D