'뷰 트리 구조'에 해당되는 글 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


블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,