예제 프로젝트 소스 받기



 

1. XML 기반의 Layout

전 포스트에서 사용된 예제처럼

view들을 Java 코드 내부에서 직접 배치하는 것도 가능하지만,

안드로이드에서는 XML 기반의 layout파일을 사용하는 것이 일반적이다.

 

layout XML 파일은 계증적 구조로 배치되는 element들과 그 속성을 사용해

view들간 또는 view와 컨테이너(컨테이너 자세히 보기)간의 관계를 구조화 함으로

어플리케이션의 전체적인 생김새(layout)을 문서화한 것이다.

 

안드로이드에서 XML layout 파일은 리소스로 취급되며

프로젝트 폴더\res\layouts\ 밑에 위치한다.

 

SDK폴더\tools\aapt (Android Asset Packing Tool)이 리소스들을 컴파일 하고(프로젝트 저장 시 마다)

Java 소스에서 사용할 수 있도록 프로젝트폴더\gen\패키지tree...\R.java 를 생성한다.

 

 

 

2. XML Layout파일을 사용하는 이유?

XML Layout 파일을 통해서 할 수 있는 것은 대부분 java 코드 내부에서도 할 수 있다.

 

그렇다면 굳이 Layout XML 파일을 사용하는 이유는 무엇일까?


가장 큰 이유는 아마 XML문서가 이클립스 IDE와 DroidDraw와 같은 GUI Design tool을 이용해 쉽게

자동화된 생성/편집이 가능하기 때문일 것이다.

 

예를들어 어떤 어플리케이션의 디자인을 바꾸려고 하는데 어플리케이션의 GUI구조가

Java코드내부에 하드 코딩 되어 있다면 Layout 구조를 코드에서 추출하여

수정한 후 새로운 Layout을 소스코드에 다시 적용 하는 기능을 같춘 GUI Design Toolkit을 개발하는

것은 거의 불가능하다. 

 

반면 XML Layout 파일을 파싱하여 현재 GUI를 새롭게 편집/저장 하는 작업은

훨씬 간단한 작업이다.

 

XML Layout 파일은 GUI Design Tool 개발자와 어플리케이션 개발자 모두에게

만족을 주는 솔루션임 샘이다.

 

 

 

3. XML Layout의 내용

전 포스트 에서 다뤘던 Now 예제를 Layout XML을 이용해 구현하면 다음과 같다.


main.xml


 

라인별로 설명 하자면 다음과 같다.

#1

XML 버전과 사용되는 문자 인코딩 방식이 지정되어 있다.

 

#2

안드로이드의 기본 view중 하나인 Button class가 element 이름으로 사용 되었다.

만약, 설정하고자 하는 view을 사용자가 직접 만들었다면 전체 패키지 이름을

모두 적어야 한다. (ex. com.holim.test.MyButton)

 

모든 Root element는 다음과 같이 Android XML namespace를 선언하여야 한다.

여기서는 Button element가 Root이므로 이곳에 선언하였다.

Root element 내부에 포함(nest)되는 모든 child element들은 이 namespace를 상속한다.

 

#3

여기서 부터는 Button element의 속성(attribute)를 지정한다.

Button element를 Java 코드 내부에서 사용할 수 있게 id 속성을 부여한다.

(id에 관해서는 다음 단락에 더 자세히 설명)

 

#4

Button에 표시되는 text를 지정한다.

이 버튼의 caption은 비어 있음으로 아무 텍스트가 없는 버튼이다. (Java 코드 상에서 update 할 예정)

 

#5, 6

마지막 두 줄은 element의 크기에 관한 속성(attribute)을 설정한 것이다.

Button의 layout_width와 layout_height속성이 모두 "fill_ parent"로 설정되어 Button의 parent인

main activity의 영역을 꽉 채우게 된다.

(아직 main activity와 연결은 안 됐지만 나중에 Java 코드 상에서 연결됨)

 

한가지 중요한 것은 layout_height나 layout_width 속성에 "fill_parent"를 지정한 view로 무조건 parent

의 영역을 다 채우는 것은 아니고, parent 가 또 다른 element를 포함 한다면 그 element에게 꼭 필요한 공간을 우선

할당하고 나머지 공간을 이 버튼으로 채우게 된다.


예를 들어 parent가 2개의 view로 이루어져 있는데 두 view의 layout_... 속성들이 모두

"fill_parent" 값으로 설정되어 있다면 parent 영역을 정확히 반씩 양분하게 된다.

참고로 두 개의 view가 parent 영역을 차지하는 비율을 weight라는 속성을 통해 조정할 수도 있다.

(weight 속성에 관한 포스트 가기)

 

layout_height와 layout_width 속성을 "wrap_content" 값으로 지정하면 버튼view의 크기는 버튼의 text를 감쌀만한 크기가 된다. 이 경우에 버튼 text가 변하면 버튼의 크기도 따라 변한다.

 

 

 

 

4. XML Layout element에 id 부여하기

Layout XML 파일 안의 어떤 element들은 한번 선언된 이후에 다시는 재사용 되지않는다.

예를 들어 label을 화면의 특정 위치에 표시하는 용도로 사용되는 TextView element같은 경우

한번 선언 되면 이 후 다시 불러올 필요가 거의 없다.

(다시말해 어떤 element는 일회용 객체라 변수에 저장할 필요가 없다)

 

하지만 어떤 element가 처음 선언된 이후  java 코드 내부나 XML 문서 내에서

재사용 된다면 반드시 id를 부여해야 한다. (객체에 변수를 지정해 재사용 한다고 생각하자)

Layout XML 파일 내의 element에 id를 부여하는 방법은 바로 android:id 속성을 이용하는 것이다.


android:id는 원래 android.view.View 클래스의 속성(attribute)이지만 Button, TextVeiw 등

모든 UI 관련 클래스들이 android.view.View 클래스에서 직/간접 적으로 상속됨으로

Button, TextView등에도 android:id 속성을 지정 할 수 있다.

 

다음은 Button element를 재사용이 가능토록 button이라는 id속성을 지정하는 방법이다.

<Button
     android:id="@+id/button" />

 

참고로, element의 id는 그 element가 사용되는 패키지 안에서 유일 해야 한다.

이건 같은 scope에 있는 두 개 이상의 변수가 같은 이름을 가질 수 없는 것과 같다.

 

 

 

5. XML 기반 Layout 적용하기

전에 말했듯이 안드로이드에서 layout XML 파일은 리소스 분류되어 프로젝트폴더\res\layout\main.xml에 저장 된다.

 

Eclipse에서 프로젝트 저장 시 SDK tool 중 aapt(android Asset Packaging Tool)는 프로젝트\res\폴더 밑의 여러 리소스 파일들을 컴파일 하고 프로젝트폴더\gen\패키지tree…\R.java 라는 클래스를 생성한다.


R.java의 내부를 살벼보면 각 리소스의 종류 별로 내부 클래스(layout, id, drawable클래스 등)가 선언 되어 있고 내부 클래스의 맴버 변수는 컴파일된 리소스를 가르킬 수 있는 주소로 설정되어 있다. 예를 들어 R클래스 내부의 layout클래스는 main이라는 맴버 변수를 가지며 이 main맴버변수는 컴파일된 main.xml의 주소(포인터)로 지정되어 있다.   


다음은 Java 코드에서 R객체을 이용해 main.xml파일과 main activity를 연결하는 방법 이다.

setContentView(R.layout.main);

R객체의 내부클래스 layout의 멤버변수 main은 바로 컴파일된 main.xml이 저장되어 있는 메모리 공간을 가르치는 주소(포인터)임을 명심하자


위에 코드가 적용되면 프로젝트\res\layout\main.xml에 기술된 대로 main activity의 화면이 구성된다.

이번 포스트 예제의 경우 main.xml에는 Button element하나만 정의되어있고

버튼의 크기가 main activity와 같음으로 화면 전체에 버튼이 그려진다.

 

또, XML Layout 내부에서 Button element에 id(button)를 지정 했음으로

R 객체의 내부객체 id를 이용한다면  컴파일된 button 리소스가 저장된 곳의 주소를 쉽게 알아낼 수 있다.

다음과 같은 메소드를 호출해서 layout XML 파일에 선언된 button 객체를 자바 코드에서 사용 할 수 있다.

Button btn = (Button)findViewById(R.id.button);

 


다음은 예제는 전 포스트의 NowButton예제와 동일한 모양이지만,

이번에는 main.xml을 이용해 main activity의 화면을 구성한다.

NowButtonXML.java

소스 펼치기



다음은 실행 화면이다.








저작자 표시 비영리 변경 금지
신고
Posted by 무한만족 i티거