제임스딘딘의
Tech & Life

개발자의 기록 노트/Android

[안드로이드/GUI] 안드로이드의 레이아웃과 계층구조

제임스-딘딘 2010. 11. 28. 11:25

안드로이드의 레이아웃과 계층구조 : 화면 구성요소들의 계층구조

안드로이드의 기본 클래스는 Activity(android.app.Activity) 클래스이다.

Activity 클래스는 아주 많은 것을 할 수 있지만 지 혼자서는 화면에 아무짓도 못한다.

Activity 클래스에 화면기능을 하기 위해서는 View, Viewgroups 와 항상 같이 작업을 해줘야 한다.


1.  Views

View(android.view.View) 클래스는 화면의 사각형 영역에 있는 컨텐츠나 화면 레이아웃 을 담당한다.

즉 화면영역에 오브젝트들을 배치하고,위치를 재고,그리고,포커싱을 바꾸고,스크롤을 하는등의 일을 한다.

또한 View 클래스는 위젯(화면에 어떤 것을 그리는 모든 행위를 하는 클래스들의 집합)기본 클래스이며, 이 위젯에 해당하는 클래스들로는 Text, EditText, InputMethod, MovementMethod, Button, RadioButton, Checkbox, and ScrollView. 등이 있다.

 

2.  Viewgroups

Viewgroup(android.view.Viewgroup) 은 화면의 Layout 이다. 즉 각각의 View 들을 합쳐서전체 구조를 그리고 화면의 전체 Layout 을 그려낸다.


3.  A Tree-Structured UI

Activity User Interface View Viewgroup 을 이용한 Tree 형태로 구성할 수 있다.

Android의 View와 Viewgroup의 계층구조


그림에서 보듯이 Viewgroup 이 다수의 View 를 포함하고 있고 Viewgrpup 도 포함하고 있는 것을 볼 수 있다.

예를 들면 RadioButton 컴포넌트를 여러개 둔 하나의 Viewgroup 을 만들수 있는 것이다.


이렇게 구성된 Tree 구조물을 화면에 표현하기 위해서 Activity 클래스의 setContentView() 메소드를 호출한다.

여기서, Activity 가 시스템으로부터 화면을 그려라, 또는 포커싱을 하라는 등의 노티를 받게 되면, 트리의 최상위 root node로 드로잉(Draw()) 요청을 하게된다

Root node 는 요청을 받게되면, 하위의 모든 child node 까지 모두 드로잉 하라는 명령을 전달하게 된다.

 

4.  LayoutParams: How a Child Specifies Its Position and Size

모든 Viewgroup ViewGroup.LayoutParams 를 상속받은 중첩된 클래스 (nested class) 구조를 사용한다.

이 서브클래스 는 하위 클래스의 크기위치프로퍼티 등을 정의한다.

 

LayoutParams

모든 Viewgroup width height 를 가지고 있으며 다수의 Viewgroup border, margin 값을 가지고도 있다.



레이아웃 공통 객체들

 

다음으로는 어플리케이션에서 사용할수 있는 대부분의 Viewgroup 에 대해서 알아본다.


1.  FrameLayout

FrameLayout 은 가장 단순한 layout 중에 하나이다.

이 레이아웃은 빈 레이아웃으로서 나중에 객체 하나를 넣을수 있게 되어있다.

예를 들면, 사진을 보여주는 틀에서 사진만 계속 교체되는 형태의 UI를 상상해 볼 수 있는데, 이 틀이 FrameLayout 이다.

 

 

2.  LinearLayout

LinearLayout 은 이름에서 볼수 있듯이 모든 children 을 한줄로 정렬하는 기능이다.

Children(child noed 의 콤포넌트) 사이의 마진, 그리고 gravity(좌/우/가운데 정렬) 도 제공한다.

그리고 LinearLayout 에는 weight 라는 개념이 있는데, weight 는 각 컴포넌트 들이 빈공간을 얼마나 미리 확장 시켜놓을수 있느냐 에 대한 설정 값이다.

쉽게 말하자면 HTML 에서 textbox 를 하나 만들고 태그로 size 를 줘서 미리 입력 사이즈를 확보하는 것과 같은 개념이다.

 

아래 그림을 가지고 예를 들어보자.

/우 그림 모두 gravityleft 이며, 좌측은 weight 가 모두 디폴트값인 0 으로 설정 되어있다.

TextboxWidth FILL_PARENT(풀화면) 로 세팅되어 있고, 나머지 콤포넌트는 WRAP_CONTENT 로 세팅되어 있다.

반면 우측그림의 Comments textbox weight 1 로 설정되어 있다.

Name textbox 1로 세팅했으면 Name Comments textbox height 같아졌을 것이다.

 

LinearLayout(Vertically)


Horizontal LinearLayout 은 첫번째 컴포넌트의 첫번째 텍스트 라인을 기준으로 나머지 콤포넌트를 정렬시키는 기능을 가지고 있다.(이러한 기능은 왠만한 4GL 툴에서는 메뉴로 제공하지만..)

이기능을 사용하지 않으려면 layout XML 에서 android:baselineAligned="false" 처럼 설정하면 된다.

 

 

3.  TableLayout

TableLayout 은 말그대로 row column 을 가지고 있는 테이블을 만든다.

그렇지만 HTML 처럼 Border 는 표시되지 않는다

아래 그림에서 십자(+) 모양의 점선 표시되어 있는 선이 실제로는 보여지지 않지만, 이해를 돕기 위해 임의로 표시해 놓은 것이다.

테이블이 View 로 들어가지 않고 Layout 으로 들어간 것이 특이하다면 특이할 수 있다.

 

TableLayout

4.  AbsoluteLayout

이번 레이아웃은 콤포넌트들을 X/Y 위치에 포커싱 하기 위한 레이아웃이다.

Where(0,0) 하면 좌측 상단 꼭지점을 말한다.

일반적으로 JAVA Layout 과 같다고 생각하면 될 것 같다.


주의할점은 Margin 이 지원되지 않으며, 권장할 만한 사항은 아니지만 콤포넌트 끼리 겹쳐서 위치를 지정하는 것이 가능하다.

또한 AbsoluteLayout 은 정말로 잘 사용할 자신이 없으면 사용하지 않는 것이 좋다.

왜냐하면 디바이스 별로 다르게 동작할 수 있기 때문이다.

그래서 페이지에 딸랑 3줄로 설명이 되어 있었나 보다.



5.  RelativeLayout

RelativeLayout 은 각 콤포넌트들 끼리 서로 위치에 대한 정보를 주고 받는 Layout 을 말한다.

기준이 되는 콤포넌트가 우선 하나 정해져야 하며, 나머지 콤포넌트 들은 기준 콤포넌트를 우선으로 해서 자신의 위치를 세팅할 수 있다.

 

아래 그림을 보면. 기준이 되는 TextView 컴포넌트가 우선 자리를 잡고 있다.

그 아래 EditText below 항목을 보면 “label1” 으로 되어 있다. 이것은 기준 콤포넌트인 TextView ID 가 되겠다

그러니까 TextView 의 아래에 나 EditBox 가 위치하고 있다는 것을 의미한다.

RelativeLayout 클래스의 Constants 를 살펴보면 POSITION_BELOW , POSITION_ABOVE

등이 있는 것을 확인할 수 있다.

 

RelativeLayout