Android Document  SDK old PDF 파일
안드로이드 UI 구현 - XML을 이용한 화면 디자인
작성자
작성일 2008-03-04 (화) 14:12
ㆍ추천: 0  ㆍ조회: 11309      
IP: 221.xxx.120
※ 아래의 글은 Android Wave와 카페통합을 통해 이곳으로 이동된 글임을 알려드립니다.
 
작성일시 : 2007.12.04 10:13
작성자 : 행복가득(siriusme)  
 
안드로이드 UI 구현 - XML을 이용한 화면 디자인

화면디자인을 하드코딩으로 하는 것은 굉장히 귀찮은 작업이기 때문에 안드로이드는 화면디자인을 위해 XML 문법을 지원한다. 안드로이드는 특정 안드로이드 View의 서브클래스를 나타내는 다양한 화면 구성 요소들을 지원한다. HTML 태그를 나열한 HTML 파일을 생성하는 것처럼 애플리케이션의 res/layout/ 디렉토리에 XML 파일을 생성하여 디자인하면 된다. 여기서는 각 요소를 정의하는 XML 파일 포맷은 어떻게 되는지, Layout Resource들을 어떻게 구성하는지 알아본다.
 
위에서 언급한 각각의 XML 파일들은 하나의 android.view.View 요소를 정의하며, 이것은 간단한 비쥬얼 요소일수도 있고, 자식 객체들의 집합을 포함하는 레이아웃일수도 있다. 안드로이드가 애플리케이션을 컴파일할 때 Activity.onCreate() 구현내에서setContnetView(R.layout.layout_file_name) 호출을 통해 로드할 수 있는 각각의 android.view.View 리소스를 컴파일한다. 그리고, 각 XML 파일은 안드로이드 GUI 클래스와 일치하는 태그들로 구성된다. 이 태그들은 각 클래스들의 메소드와 대부분 일치하는 속성들을 가지고 있다. 예를 들면 EditText는 EditText.setText와 일치하는 text 속성을 가지고 있다.
 
각 클래스와 메소드 이름, 요소와 속성이름이 비슷하더라도 항상 1:1로 정확하게 일치하지 않는다는 것을 염두해둘 필요가 있다. 또한 안드로이드는 XML에 나타나있는 순서대로 각 요스들을 그린다. 그러므로 각 요스들이 겹칠경우 XML 파일의 마지막 요소는 항상 최상위에 그려진다는 것도 알아두자.
 
각 XML 파일은 View 또는 ViewGroup 객체를 최상위로 하는 트리구조로 컴파일 되며, 반드시 단일 루트 태그를 포함하고 있어야 한다. 아래에서 보게될 예제에서는 가장 바깥쪽의 태그는 RelativeLayout 객체다.
 
layout_oooo 라고 명명된 속성들은 객체의 LayoutParams 멤버에 적용되며, Layout Resource들은 LayoutParams 속성들을 어떻게 설정할 것인지를 정의하고 있다.
 
아래는 객체들의 모양을 정의하기 위한 속성과 예제다.
 
- px (pixels)
- dip (device independent pixels)
- sp (scaled pixels ? best for text size)
- pt (points)
- in (inches)
- mm (millimeters)
 
Example: android:layout_width="25px"
 
이에 관한 더 많은 정보를 원한다면 http://code.google.com/android/reference/available-resources.html#dimension 이 링크를 따라가보자.
 
아래의 XML 파일은 화면을 생성하는 것이다.
 
<?xml version="1.0" encoding="utf-8"?>
<!-- Demonstrates using a relative layout to create a form -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/blue"
                android:padding="10px">
    <TextView id="@+id/label"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:text="Type here:"/>
    <EditText id="@+id/entry"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:background="@android:drawable/editbox_background"
              android:layout_below="@id/label"/>
 
    <Button id="@+id/ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/entry"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10px"
            android:text="OK" />
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeft="@id/ok"
            android:layout_alignTop="@id/ok"
            android:text="Cancel" />
</RelativeLayout>

 
<그림1>
 
XML 리소스 불러오기
컴파일된 레이아웃 리소스를 불러오는 것은 아주 쉽다, 애플리케이션의 onCreate() 메소드에서 아래와 같이 한번만 메소드 호출을 해주면 된다.
Loading the compiled layout resource is very easy, and done with a single call in the application's onCreate() method, as shown here:
protected void onCreate(Bundle savedValues)
{
   // Be sure to call the super class.
   super.onCreate(savedValues);
   // Load the compiled layout resource into the window's
   // default ViewGroup.
   // The source file is res/layout/hello_activity.xml
    setContentView(R.layout.hello_activity);
 
   // Retrieve any important stored values.
   restoreValues(savedValues);
}
이름아이콘 하오마루
2009-01-17 11:07
그런데 XML editing은 WYSWYG으로 이루어지나요?
들풀 GUI 환경에서 Edit 도 가능하지만, 보다 정교한 작업은 직접 manual 로 하셔야 할 듯 합니다. 1/17 18:39
   
이름아이콘 TaekLove
2009-02-12 17:12
웹에서 사용하는 XML문법을 그냥사용해도 상관없나요? 안드로이드 XML의 차이점없나요?
들풀 xml 문법구조는 같지만, schema가 다르겠죠..~ 2/12 17:58
TaekLove 감사합니다. 언제 좋은 말씀 고맙습니다. 안드로이드 참 매력적인 플랫폼이라고 생각합니다. 2/13 10:08
   
이름아이콘 음냐쿨쿨
2009-12-08 09:19
쉽게 스크린을 구성할 수 있겠지만, 아주 detail 하게는 어렵지 않을까 싶네요.. 그렇다고 매번 absolute layout 을 사용할 수도 없고...
   
 
덧글 쓰기 0
3500
※ 회원등급 레벨 0 이상 읽기가 가능한 게시판입니다.