안드로이드의 레이아웃과 계층구조 : 화면 구성요소들의 계층구조
안드로이드의 기본 클래스는 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 형태로 구성할 수 있다.
그림에서 보듯이 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) 구조를 사용한다.
이 서브클래스 는 하위 클래스의 크기, 위치, 프로퍼티 등을 정의한다.
모든 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 를 줘서 미리 입력 사이즈를 확보하는 것과 같은 개념이다.
아래 그림을 가지고 예를 들어보자.
좌/우 그림 모두 gravity는 left 이며, 좌측은 weight 가 모두 디폴트값인 0 으로 설정 되어있다.
Textbox의 Width 는 FILL_PARENT(풀화면) 로 세팅되어 있고, 나머지 콤포넌트는 WRAP_CONTENT 로 세팅되어 있다.
반면 우측그림의 Comments textbox 는 weight 가 1 로 설정되어 있다.
Name textbox 를 1로 세팅했으면 Name 과 Comments textbox의 height는 같아졌을 것이다.
Horizontal LinearLayout 은 첫번째 컴포넌트의 첫번째 텍스트 라인을 기준으로 나머지 콤포넌트를 정렬시키는 기능을 가지고 있다.(이러한 기능은 왠만한 4GL 툴에서는 메뉴로 제공하지만..)
이기능을 사용하지 않으려면 layout XML 에서 android:baselineAligned="false" 처럼 설정하면 된다.
3. TableLayout
TableLayout 은 말그대로 row 와 column 을 가지고 있는 테이블을 만든다.
그렇지만 HTML 처럼 Border 는 표시되지 않는다.
아래 그림에서 십자(+) 모양의 점선 표시되어 있는 선이 실제로는 보여지지 않지만, 이해를 돕기 위해 임의로 표시해 놓은 것이다.
테이블이 View 로 들어가지 않고 Layout 으로 들어간 것이 특이하다면 특이할 수 있다.
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
등이 있는 것을 확인할 수 있다.
