Hello, Android, 너를 보여줘! (1) - 레이아웃을 이용한 화면 구성

강좌 작성환경

SDK Version : Android SDK 1.6, release 1
ADT Version : 0.9.3

추후 SDK업데이트로 인해 글의 내용과 실제 내용간 차이가 있을 수 있습니다.

관련글
2009/10/10 - 새로 만든 프로젝트, 속이 궁금하다!
2009/09/20 - 새 프로젝트 생성하기
2009/09/18 - 액티비티의 생애주기(Lifecycle)
2009/09/05 - 안드로이드 어플리케이션의 구성요소

지난 강좌에서는 새 프로젝트를 만드는 법, 그리고 새 프로젝트가 만들어지면서 생성된 파일들에 대해 알아보았습니다.

이번 강좌에서는 본격적으로 Hello,World의 소스코드를 분석해보도록 하겠습니다.

[HelloAndroid.java]

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

public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

위의 코드는 HelloAndroid 프로젝트를 만들면서 기본으로 만들어진 코드입니다. 위의 코드를 실행하면 아래와 같은 화면이 표시되게 됩니다.

어떻게 해서 위와 같은 화면이 나오는지 아직은 어리둥절할지도 모릅니다. 하지만 그리 어렵지 않으니, 한줄한줄 차근차근 알아가보도록 하죠.

public class HelloAndroid extends Activity

HelloAndroid 클래스가 Activity 클래스를 상속하는 것을 볼 수 있습니다. 새 프로젝트를 만들게 되면 기본적으로 액티비티가 하나 생성되게 되는데, 그 액티비티가 여기에서는 HelloAndroid 입니다. 따라서, HelloAndroid 클래스는 Activity 클래스를 상속받게 됩니다.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simplelayout);
    }

Activity 클래스 내의 메소드 중 하나인 onCreate() 메소드를 오버라이드합니다. 2009/09/18 - 액티비티의 생애주기(Lifecycle)

에서 다뤘듯이, onCreate() 메소드가 호출되면서 액티비티를 생성하게 됩니다. 따라서, 이곳에서 Hello, Android 액티비티의 초기화 작업, 텍스트를 화면에 표시해주는 작업을 수행해 주어야 합니다.

액티비티 클래스의 onCreate() 메소드를 오버라이드 하여 기본적인 onCreate()에서 하는 일 외에 우리가 하고자 하는 일을 추가하는 것이기 때문에, 상위 클래스의 onCreate()메소드를 호출(super.onCreate(savedInstanceState))하여 상위 클래스의 메소드 내에 정의된 작업을 먼저 수행하게 됩니다.

상위 클래스 메소드의 호출이 끝난 후에, setContentView() 메소드를 사용한 것을 볼 수 있습니다. 이 메소드는 리소스(레이아웃 파일)를 이용하여 액티비티의 화면을 구성할 때 필수적인 메소드이며, 인자로 레이아웃 리소스 혹은 View 객체를 받을 수 있습니다. 이 메소드에서는 인자로 받은 레이아웃 혹은 View 객체를 액티비티의 화면에 표시해주는 역할을 수행합니다.

View(뷰) (android.view.View)
뷰는 액티비티, 즉화면을 구성하는 기본 단위입니다. 텍스트를 표시하는 TextView, 이미지를 표시하는 ImageView, 리스트를 표시하는 ListView 등 특정 데이터를 화면에 표시해주는 객체, Button, RadioButton 등 사용자의 동작에 반응할 수 있는 객체, LinearLayout, RelativeLayout 등 각자가 포함하고 있는 View 객체들이 어떻게 표시할지를 결정해주는 레이아웃 객체들로 구성됩니다.

위에서는 액티비티의 화면에 레이아웃 파일을 표시하도록 하고 있으며, 소스코드 내에서 레이아웃 파일에 접근하기 위해 리소스들의 주소가 담긴 R 클래스 (R.java)를 이용하는 것을 볼 수 있습니다.

각 리소스를 참조할 수 있는 주소들이 담겨있다.

그럼, 이제 액티비티의 화면을 구성하게 될 main.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="@string/hello"
    />
</LinearLayout>

레이아웃 파일의 구조를 보면, LinearLayout이 TextView를 감싸는 구조를 하고 있음을 볼 수 있으며, 이는 LinearLayout이 포함하는 다른 View들이 어떻게 화면에 배치될지를 담당하기 때문입니다. LinearLayout의 속성 중 하나, orientation에 따라 레이아웃 내부의 View 수평 혹은 수직으로 배치하며, LinearLayout 외에도 포함하는 View들간의 위치 관계들을 정의한 후, 그에 따라 각 객체들을 표시해주는 RelativeLayout, 레이아웃의 왼쪽 위를 기준으로 포개듯이 객체들을 배치해주는FrameLayout 등 여러 레이아웃이 존재합니다.

layout_height 및 layout_width 속성은 LinearLayout 뿐만 아니라 TextView에도 있는 속성으로, 액티비티 화면 내에서 표시될 뷰의 너비 및 높이를 지정해줍니다. 

fill_parent 속성은 화면에 꽉 차게끔 View를 배치하고, wrap_content 속성은 각 View를 그리는 데 필요한 만큼만 그 View가 화면을 차지함을 뜻합니다. 여기에서 유의해야 할 것은 fill_parent는 해당 View가 속하는 View, 즉 여기에서 TextView의 경우 View들을 담고있는 View(LinearLayout)이 화면에서 차지하는 만큼 화면을 차지할 수 있습니다. 아래에서 TextView의 layout_height가 fill_parent일 때, LinearLayout의 높이(layout_height)에 따라 TextView가 차지하는 영역이 달라지는 것을 볼 수 있습니다.

<LinearLayout android:layout_height = "fill_parent" ...

<LinearLayout android:layout_height = "wrap_content" ...

TextView는 텍스트를 표시하기 위해 text 속성을 통해 화면에 표시할 텍스트를 지정합니다. 이곳에 화면에 표시할 텍스트를 직접 넣어줄 수도 있고, 리소스에 저장된 문자열의 주소를 넣어 리소스에 저장된 값을 표시하도록 할 수도 있습니다. 위의 코드에서는 이름이 hello인 문자열의 값을 참조하는 모습을 볼 수 있습니다.

소스 코드에서 리소스 파일을 참조할 수 있는 것처럼, 리소스 파일에서도 다른 리소스 파일의 값을 참조하도록 할 수 있습니다. 리소스 내에서 다른 리소스의 값을 참고하기 위해, @[리소스 종류]/[리소스 이름] 형식의 주소를 사용합니다. 

지금까지, HelloAndroid 프로젝트에 대해 분석해 보았습니다. 이번 글을 통해서 안드로이드 프로젝트 및 액티비티의 구성이 어떤 식으로 되어 있는지 도움이 되었을 거라 생각합니다. :)