관리 메뉴

moozi

[ 안드로이드 개발 2.0 ] RelativeLayout 출력하기 본문

안드로이드개발강좌

[ 안드로이드 개발 2.0 ] RelativeLayout 출력하기

moozi 2009. 12. 26. 17:18
[ 안드로이드 개발 2.0 ] RelativeLayout 출력하기

RelativeLayout은 버튼이나 텍스트박스 같은 구성요소들의 위치를 서로 상대적(Relative)으로 배치 할 수 있는 레이아웃입니다.

안드로이드 개발자사이트의 내용을 참고하여 진행합니다.

1. 다음과 같이 프로젝트를 생성합니다.


2. res > layout > main.xml 파일을 엽니다.

3. main.xml 파일의 소스코드를 수정합니다. (다음 코드를 복사해서 붙여넣기 합니다.)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
android:layout_width="fill_parent"
   
android:layout_height="fill_parent">

   
<TextView
       
android:id="@+id/label"
       
android:layout_width="fill_parent"
       
android:layout_height="wrap_content"
       
android:text="Type here:"/>

   
<EditText
       
android: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
       
android: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="10dip"
       
android:text="OK" />

   
<Button
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_toLeftOf="@id/ok"
       
android:layout_alignTop="@id/ok"
       
android:text="Cancel" />

</RelativeLayout>




4. Run -> Run 을 선택하여 실행합니다.
[ RelativeLayout 실행 결과화면 ]


xml 코드를 살펴보겠습니다.

android:id="@+id/label"  => label 입니다.
android:text=
"Type here:"  => label에 쓰여질 텍스트입니다.

android:layout_below="@id/label" => label 아래에 위치하게 합니다.
android:layout_alignParentRight="true" => 부모요소의 오른쪽끝에 맞춥니다. OK버튼이 텍스트뷰의 오른쪽에 맞추어져 있습니다.

android:layout_toLeftOf="@id/ok" => OK버튼의 왼쪽에 위치합니다. 

다음은 이름과 주소를 입력하도록 약간 수정한 코드와 결과입니다.

[수정한 코드]

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"     
        android:text="이름과 주소를 입력하세요"/>

    <EditText
        android:id="@+id/entry"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
         android:layout_below="@id/label"
        android:background="@android:drawable/editbox_background"
        />

    <EditText
        android:id="@+id/entry2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry"
        android:background="@android:drawable/editbox_background"
        />
    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry2"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dip"
        android:text="OK" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/ok"
        android:layout_alignTop="@id/ok"
        android:text="Cancel" />

</RelativeLayout>

[ 실행결과 ]


7 Comments
댓글쓰기 폼