태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

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

2009.10.24 05:38

강좌 작성환경
SDK Version : Android SDK 1.6, release 1
ADT Version : 0.9.3

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



지난 강좌에서는 새 프로젝트를 만드는 법, 그리고 새 프로젝트가 만들어지면서 생성된 파일들에 대해 알아보았습니다.
이번 강좌에서는 본격적으로 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 프로젝트에 대해 분석해 보았습니다. 이번 글을 통해서 안드로이드 프로젝트 및 액티비티의 구성이 어떤 식으로 되어 있는지 도움이 되었을 거라 생각합니다. :)
저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

커니 Hello, Android , , , , , ,

  1. 감사합니다. 이해하기 쉽게 잘 써주셨어요 ㅎ

  2. Blog Icon
    쿠키짱

    안녕하세요 안드로이드 강좌 잘 보고 있습니다.
    근데 이번 강좌에서 layout_width 의 wrap_content 와 fill_parent 사진이 바뀐것 아닌가요?
    제가 이해하고 있는 거랑 달라서요...

  3. layout_width가 아니라 layout_height네요~ ^^;
    수정하였습니다 :)

  4. 퍼 갑니다^^
    정리 잘하셨네요..

  5. 게시글에 저작자 표시와 출처 표시를 명확히 해주셨으면 합니다 :)

  6. Blog Icon

    안녕하세요~ 안드로이드 개발 관련 정보들 찾다가 들어오게 되었습니다~ : )
    집에서 JDK + Eclipse + Android SDK 등~ 셋팅을 해두고~
    안드로이드 공부를 시작하려는데 처음부터 막히네요... ^^;;

    우선 문제점을 알려드리자면 이렇습니다..
    이클립스에서 기본 Android 프로젝트를 하나 생성해서 실행을 시켜보면~
    AVD 자체는 정상적으로 실행이 잘 되지만, AVD 에 해당 어플이 추가되지 않는 것 같습니다...;;;

    또, 에뮬레이터가 떠 있는 상태에선 이클립스에서 프로젝트를 재실행을 하면~
    변경된 내용이 자동적으로 반영이 된다고 되어있는 거 같은데...
    제 PC 에서는~ *.img.lock 폴더가 생성이 되면서~
    userdata, cache 등이 다른 에뮬레이터에 의해 사용중이라면서 에러가 뜨네요;;

    뭔가 설정이 잘못되었을 경우에 이런 문제가 발생할 수도 있는 건가요~~?

    참고로 Win7 (32bit) , JDK 1.6.0_24 , Eclipse (헬리오스 SR2), Andoid SDK 최신버전으로 되어있구요..;
    AVD 와 프로젝트 모두 Android 2.3.3 으로 맞춰서 시도를 했습니다.

  7. 정확히 어떤 것이 문제인지 유추하기가 힘들군요;;;
    에뮬레이터를 실행하면 img.lock 이 생성이되는 것은 정상입니다. AVD에 애플리케이션이 설치되지 않는다는게 정확히 어떤 현상을 말씀하시는건가요? 콘솔 상에 인스톨이 완료되었다고 나오는데 홈 화면에서는 아무것도 확인할 수 없는 상태를 말씀하시는 건가요??

  8. AVD 를 띄운 상태에서~~
    콘솔에서 직접 adb 명령어로 설치를 시도해봤는데..;;
    device not found 라고 나오는군요;;;

  9. 아... 해결했습니다..;;
    뭐가 문제였는지는 모르겠지만~~
    이클립스에서 Run 을 했을 때~ adb 와 에뮬레이터가 제대로 연결이 되지 않았던 모양입니다.
    콘솔에서 adb kill-server, adb start-server 해주니;;
    에뮬레이터를 제대로 인식하고~~
    정상적으로 동작하네요.. :)

  10. ddms perspective에서 Reset adb 해주시면 동일한 효과가 있으니 나중에 참고하세요 ㅎㅎ

  11. 앗~! 감사합니다...
    뭐때문에 adb 랑 에뮬레이터랑 연결이 안됐는지도 모르고..
    매번 콘솔에서 명령어 치는 것도 번거롭게 느꼈는데..
    요런 방법이 있군요~~ ^^