태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

[SDK 1.0] #03. Hello, Android!로 배우는 기초 - (5) XML Layout 활용하기

2008.12.28 16:24

알립니다!!
현재 보시고 계신 강좌/글은 SDK 1.0을 기준으로 작성된 것입니다.
SDK 업데이트에 따라 변동사항이 있을 수 있으므로 새로운 SDK 버전을 기준으로 작성된 다른 글을 참고하시길 권합니다.



지금까지는 직접 *.java파일에 소스코드를 입력하여 HelloAndroid를 만들어보았습니다.
이번에는, 코드가 아닌 XML을 이용하여 HelloAndroid를 만들어 볼 차례입니다. 갑자기 뜬금없이 왠 XML이라냐구요??  이전 글 [ 2008/12/21 - [Android/Application - 기초] - #03. Hello, Android!로 배우는 기초 - (4) 새 프로젝트 생성 ] 에서 기본 생성 파일들을 알아보면서, xml파일에 관한 것은 별다른 설명 없이 넘어갔었는데요, 사실 xml파일이 안드로이드의 UI를 생성하는데 중요한 역할을 합니다.

보통, 윈도우용 프로그램을 작성하실 때 UI와 코드를 따로따로 작성하게 됩니다. 마찬가지로, 안드로이드에서도 UI는 XML파일 (main.xml), 코드는 java소스(예: HelloAndroid.java) 가 담당하게 됩니다.

HelloAndroid를 만들면서 TextView 객체를 사용하였는데, 이는 코드상에서도 구현 가능하고 XML에서 또한 구현 가능합니다. 물론, HelloAndroid같은 것은 간단한 프로그램이니까 이렇게 두 가지로도 구현이 가능하겠지만, 나중에 더 복잡한 프로그램을 개발한다면 확실히 XML파일은 UI를, 소스파일은 코드를 담당하게 되겠지요?

아무튼, 이번 글에서는 HelloAndroid를 XML로 구현하는 방법과 이를 알아보면서 필수적으로 알아야 할 XML코드들에 대하여 알아보도록 하겠습니다. 일단, HelloAndroid를 처음 시작할 때처럼, HelloAndroid를 XML코드를 표현하였을 때의 XML코드를 보도록 하겠습니다. 뜬금없이 말이죠!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
>
<TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Hello, Android"
/>
</LinearLayout>

중요한 것들부터 알아봅시다. LinearLayout이 눈에 들어오네요.
안드로이드에서 UI를 구성하게 되면, Layout 안에 View들을 추가하게 되는데, LinearLayout은 여러 Layout중 하나를 의미하겠죠?^^;;

LinearLayout의 옵션들도 여러 가지가 있는데 각각이 의미하는 것은 다음과 같습니다.


  • android:orientation
    LinearLayout내의 구성요소 표시될 방향을 선택합니다. vertical로 선택시 각 개체가 아랫방향으로 하나씩 쌓이게 되고, horizontal로 선택시 각 객체가 가로 방향, 오른쪽으로 하나씩 추가되게 됩니다.
  • android:layout_width
    가로 길이를 지정합니다. fill_parent는 여백 없이 채우고, wrap_content는 Layout내의 컨텐츠 크기만큼만 크기를 지정합니다.
  • android:layout_height
    세로 길이를 지정합니다. layout_width와 쓸 수 있는 옵션이 같습니다.

TextView에도 LinearLayout에서 봤던 옵션들인 layout_width와 layout_height가 존재하며, 그 역할은 동일합니다. 다른 것은 android:text가 있다는 것인데, 이것은 보자마자 바로 눈치채셨을 것입니다. android:text에는 화면에 표시될 텍스트가 들어가게 됩니다.

기본적으로 XML, 특히나 HTML을 한번이라도 만져보신 분은 이러한 구성이 어색하지만은 않을 것입니다. 마치 <html>로 시작하여 </html>로 닫아주는 것처럼, 안드로이드 UI도 이와 마찬가지 방식으로 제작되니까요.
그렇다면, 이렇게 main.xml파일을 수정하기만 하면 과연 원하는 결과를 얻게 될까요? 그렇지 않습니다. 코드도 수정을 해 주어야 합니다. 이전 글에서 setContentView()에 대하여 설명하였는데, 이 때 setContentView()를 통해 특정 View를 표시해 줄 수도 있지만, 레이아웃을 표시해 줄 수도 있다고 설명하였습니다.


public void setContentView(int layoutResID) // 레이아웃을 지정해 줄 때 사용합니다.
위와 같이, setContentView()를 수정하여 우리가 제작한 레이아웃을 표시하게끔 변경을 해 주어야 합니다. 우리가 제작한 레이아웃을 표시해주기 위해, 소스 파일에 다음과 같은 코드를 입력합니다.

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class HelloAndroid extends Activity{
public static void onCreate(Bundle icicle)
{
super.onCreate(icicle);
setContentView(R.layout.main);

}
}

setContenetView()에 우리가 만든 레이아웃을 넘겨주기 위해, R.java파일에 있는 포인터를 이용합니다. R.java파일은 이렇게 프로젝트 내의 여러 파일들의 주소를 넘겨줄 때 사용됩니다. 이렇게 입력을 하고, 프로젝트를 실행시키게 되면 이전과 똑같이 HelloAndroid가 출력되게 됩니다.

이번 글에서는 XML 레이아웃에 대해 간단히 알아보았습니다. 이제까지 HelloAndroid를 통해 간단한 Text를 출력하는 것에 대하여 알아보았는데, 다음 글부터는 이미지를 출력하는 방법에 대하여 알아보도록 하겠습니다.

그리고, XML 레이아웃에 대한 설명은 모바일플레이스 강좌에 자세하게 나와 있으니, 이름 참조하시면 좋을 것 같습니다.

커니 Out-of date , , , , , , ,

  1. Blog Icon
    요루

    R.layout.main 의 main은 res 폴더의 layout 폴더의 main.xml을 의미하는 것이죠
    저 main이 어디서 온건가 한참 고민했었답니다 ㅜㅜ

    강좌 잘보고있답니다. 회사에서 몰래 몰래 보고 점심시간에 실행해보거든요 ㅎㅎㅎ
    언능 배워서 커니님같은 고수가 되고싶네요

  2. 고수는요 뭘 ^^;;
    저도 제가 공부하는 대로 겨우겨우 올리는거죠ㅎㅎ
    다른 고수분들께 많이 배우고 있답니다 -ㅁ-

  3. Blog Icon
    cashdow

    저도 회사에서 몰래...는 아닌가..ㅋ 대놓고 하고 있습니다.
    약간 널널해져서요 ㅎㅎ 나중을 위해서도 배워두면 분명 좋겟지요 회사입장에서도 ㅎㅎ

  4. Blog Icon
    캐러

    와-_- 설명 정말 잘해놓으셨네요~ 다른곳은 이런 기초적인 부분은 설명조차도 안해서

    이런파일은 어떻게 돌아가는지 궁금했는데......

  5. Blog Icon
    brings

    아,, main.xml안에 소스는 어떻게 입력하죠 ? ㅜㅜ
    eclipse로 돌리고 있는데,,,
    res-> layout->main.xml이 있어 더블클릭했는데 소스는 안뜨고,,,
    Editing config : default
    device $@#$ config $@#$ locael #!@#

    이런것만 뜨네요,,, 원래 그런건가요,,? 벌써 부터 막히네 ㅜㅜ