안드로이드의 UI - 1편

Hierarchy of Screen Elements

 

개요 : 안드로이드 의 기본 클래스는 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 형태로 구성할 수 있다.


                                                                               [그림 – 1] A 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 를 사용한다.

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

 


                                                 [그림-2] LayoutParams

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

값을 가지고도 있다.

 

 

Common Layout Objects

 

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

 

1.  FrameLayout

FrameLayout 은 가장 단순한 layout 중에 하나이다. 이 레이아웃은 빈 레이아웃 으로서

나중에 객체 하나를 넣을수 있게 되어있다. 얘를 들면 사진을 보여주는 틀에서 사진만

계속 교체되는 형태로 이 틀이 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

같아졌을 것이다.

 

                                                                  [그림-3] LinearLayout(Vertically)

Horizontal LinearLayout 은 첫번째 컴포넌트의 첫번째 텍스트 라인을 기준으로 나머지

콤포넌트를 정렬시키는 기능을 가지고 있다.(이러한 기능은 왠만한 4GL 툴에서는 메뉴로 제공하지만..)

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

세팅하면 된다.

 

 

3.  TableLayout

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

그렇지만 Html 처럼 Border 는 표시되지 않는다. 아래그림에서 도트 표시되어 있는

라인이 실제로는 보여지지 않는다는 이해를 돕기 위해 임의로 표시해놓은 것이다.

(테이블이 View 로 들어가지 않고 Layout 으로 들어간 것이 특이하다)

 

                                                                      [그림-4] 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

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

 

[그림-5] RelativeLayout

 

 

 

 

 

 

 

 

JAVA application 을 작성할 때 VB 나 델파이 같이 콤포넌트를 척척 갖다 붙여서 쉽게 UI 를 구성하는 모습이 가장 부러웠다.

물론 JBuilder 같은 툴을 이용한다면 JAVA 도 위지윅 하게 작업을 할수 있겠지만

자바의 가장 골치하픈 Layout 을 벗어나서 UI 를 구성하기는 어렵다.

안드로이드 Layout 은 자바 기본패키지에 있는 Layout 보다 많이 컴팩트 하게 구성되어 있지만

PC 환경에서 해상도 에 대한 부담없이 setX, setY 등으로 프로그래밍할 때와는 달리

디바이스별 해상도 에 대해 철저하게 대비해야 하는 점이 개발자로서는 부담으로 다가온다.

한국에서 RelativeLayout 이나 LeanerLayout 으로 해상도별로 탄력적인 UI 를 구성했다면

아마 대부분의 Client 들은 이 UI 에 만족하지 못하고 좀더 매뉴얼하게 배치할수 있는

AbsoluteLayout 으로 작업해서 디바이스별로 여러벌의 버전을 제공하길 바랄것이다.

하지만 새로운 디바이스가 출시될 때마다 개발자들은 가슴을 쓸어내려야 할 것이다..

by slowtrain | 2007/11/26 13:13 | 개발관련 | 트랙백(2) | 덧글(0)
트랙백 주소 : http://mnd777.egloos.com/tb/1047906
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Tracked from Confluence: .. at 2010/12/13 17:13

제목 : Layout 종류와 특징
Layout의 종류와 각 Layout의 특징 # FrameLayout FrameLayout은 가장 단순한 레이아웃 중 하나이다. 이 레이아웃은 빈 레이아웃으로서 나중에 객체 하나를 넣을 수 있게 되어 있다. 예를 들면 사진을 보여주는 틀에서 사진만 계속 교체되는 형태로 이 틀이 FrameLayout이다.......more

Tracked from at 2014/03/11 00:34

제목 : garcinia cambogia
line1...more

:         :

:

비공개 덧글



< 이전페이지 다음페이지 >