Android - Relative Layout

이번에는 설치된 안드로이드로 Relative Layout 을 만들어 보도록 하겠습니다.

 

먼저 이클립스를 실행시킨 뒤에 파일 - 새로작성 - Android Project 를 눌러서

 

새로운 프로젝트를 생성합니다.

 

 

새로운 안드로이드 프로젝트를 생성하게 되면 아래와 같이 설정이 뜨게 되는데

 

 

여기서 프로젝트 이름은 RelativeLayout 으로 하였고 빌드타겟은 최근 모토로이가 2.1 버전

 

이 나왔으므로 2.1 버전으로 작성해 보겠습니다.

 

프로젝트가 생성되면 이클립스 좌측에 다음과 같이 파일들이 생성 됩니다.

 

 

보통 안드로이드 프로그래밍을 할때 주로 수정하는 파일은 실제 메인 파일인

 

RelativeLayout.java 파일과 main.xml 파일 입니다.

 

먼저 RelativeLayout.java 파일을 살펴보겠습니다.

 

package android.relative;

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

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

위 에서 onCreate 메소드는 프로그램이 실행과 동시에 자동으로 실행 되는 것으로

 

자바에서 생성자와 같은 역할을 한다고 볼 수 있습니다.

 

setContentView(R.layout.main); 에서는 레이아웃 안에 main.xml 을 화면에 보여주게 됩니다.

 

이번에는 main.xml 로 가서 수정해 보도록 하겠습니다.

 

처음 생성된 main.xml에는 Hello Android 를 띄우기 위한 소스가 들어가 있는데 이 코드를

 

지우고 다음 코드를 추가 하여 줍니다.

 

<?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: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>

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

 

위 두 부분은 xml을 생성시 항상 들어가야 되는 부분입니다.

 

<TextView> 는 자바의 스윙에서 보자면 Label 과 같은 역할을 해주는 것으로

 

문장을 출력하기 위해 사용되며 android:id="@+id/label" 는

 

TextView 의 이름을 label 로 설정하여 접근하겠다는 의미를 가지고 있습니다.

 

<EditText> 는 사용자가 쓸수 있는 부분을 생성하여 주며

 

android:layout_below="@id/label" 이 부분은 이전에 있던

 

 label 의 아래 부분에 위치하도록 설정해주고 있습니다.

 

<Button> 은 누를 수 있는 버튼을 생성해주고 있고

 

android:layout_below="@id/entry"
android:layout_alignParentRight="true"

 

이 두 문장으로 버튼의 위치가 <EditText> 의 아래에 위치하고 또 제일 우측으로 정렬 되도록

 

설정해주는 역할을 하고 있습니다.

 

그리고 마지막 버튼에서  android:layout_toLeftOf="@id/ok" 라는 문장은

 

ok 라는 위에 생성된 버튼의 좌측에 지금 생성하는 버튼을 위치시키라는 의미를 가집니다.

 

위와같이 코드의 수정이 끝나고 나면 한번 실행을 시켜보겠습니다.

 

 

CTRL + F11 버튼을 눌러서 실행시키게 되면 다음과 같이 어떻게 실행을 시킬 것인지 뜨게

 

되는데 여기서 Android Application 을 선택하게 되면 Android 에뮬레이터가 실행되고

 

작성한 Relative Layout 이 에뮬레이터에 표시되게 됩니다.

 

 

위 그림은 실행결과입니다.

 

Relative Layout 은 상대적 위치를 설정해주는 Layout으로 하나의 위치를 기준으로

 

아래(below)와 우측정렬(alignParentRight), 특정 위치 왼쪽(toLeftOf) 등으로 설정해주면서

 

정렬할 수 있게끔 해주고 있습니다.