RelativeLayout 기본

RelativeLayout

- RelativeLayout은 프로젝트를 생성하면 기본적으로 생성되어있는 Layout이다.

- RelativeLayout은 이름 그대로 Relative(상대적인) 상대적으로 View나 Widget등을 배치하는 Layout이다.

- 간단하게 실험을 통해서 배치하는 법을 알아보겠습니다.

---

버튼 5개 생성

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:text="Btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

프로젝트 생성된 바로 그 상태에서

버튼 5개만 아무 속성없이

생성해봤습니다.

버튼 5개가 한곳에 겹쳐서 출력되는

모습을 볼 수 있습니다.

그럼 LinearLayout의 Horizontal처럼

한줄에 5개의 버튼을 

나란히 배치하려면 어떻게 해야 할까요?

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/btn1"
        android:text="Btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn2"
        android:text="Btn2"
        android:layout_toRightOf="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn3"
        android:text="Btn3"
        android:layout_toRightOf="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn4"
        android:text="Btn4"
        android:layout_toRightOf="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn5"
        android:text="Btn5"
        android:layout_toRightOf="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

각 버튼마다 Id를 넣어주고

layout_toRightOf를 추가해서

ID에 해당하는 Widgets 오른쪽에

배치하겠다는 뜻입니다.

btn1 기준으로 

차례대로 오른쪽에 하나하나

배치가 잘 되었습니다.

이번에는 btn5를 기준 왼쪽으로

나열해보겠습니다

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/btn1"
        android:text="Btn1"
        android:layout_toLeftOf="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn2"
        android:text="Btn2"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn3"
        android:text="Btn3"
        android:layout_toLeftOf="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn4"
        android:text="Btn4"
        android:layout_toLeftOf="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn5"
        android:text="Btn5"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

먼저 Btn5에 alignParentRight="true" 

(부모(Parent)를 기준으로 Right에 배치시킨다는 뜻이겟죠)

추가 시켜서 오른쪽정렬을 시켰습니다

그 후에

toRightOf를 toLeftOf로 변경하여서

아까와 같은 방법으로

해당 id 왼쪽에 배치를 하였습니다.

Btn5가 오른쪽에 잘 붙어있고

그 후 Btn5기준으로 왼쪽으로

차례대로 잘 붙어있습니다.

이번에는 Btn3을 가운데에 놓고

Btn3을 기준으로 오른쪽 왼쪽으로

배치해보겠습니다.

순서를 바꿔서 결과를 먼저 보면

위와 같은 화면을 구성하려면

처음에 Btn3을 가운데에 놓고

아까와 같은 방법으로 toLeftOf, toRightOf를

사용하면 됩니다.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/btn1"
        android:text="Btn1"
        android:layout_toLeftOf="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn2"
        android:text="Btn2"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn3"
        android:text="Btn3"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn4"
        android:text="Btn4"
        android:layout_toRightOf="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn5"
        android:text="Btn5"
        android:layout_toRightOf="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

위에서 RelativeLayout의

layout_height를 wrap_content로 변경해서

맨 윗줄에 배치되도록 하였습니다.

저 상태에서 wrap_content가 아닌

match_parent로 바꿔보면

match_parent로 변경하니

Btn3만 중앙에 있고

나머지 Btn들은 맨 윗줄에 있습니다.

이런식으로 나타내기 위해서는

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/btn1"
        android:text="Btn1"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn2"
        android:text="Btn2"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn3"
        android:text="Btn3"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn4"
        android:text="Btn4"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn5"
        android:text="Btn5"
        android:layout_toRightOf="@+id/btn4"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

위와같이 부모 기준으로 

Center에 놓겠다고 다 적어주시면 됩니다.

이거 중앙에 한번 놓겠다고 코드를 

몇개나 적겠다는 건지...

아에 위에 Layout 하나 더 놓고

해당 Relative만 중앙에 배치시켜도 됩니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn2"
            android:text="Btn1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn3"
            android:text="Btn2" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Btn3" />

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/btn3"
            android:text="Btn4" />

        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/btn4"
            android:text="Btn5" />
    </RelativeLayout>
</RelativeLayout>

이번에는 버튼 아래에 EditText를 하나 놓아보겠습니다.

위와 같은 구성을 하려면 방법이 많겠지만

앞에서 Button만 묶은 layout을 하나로 썼으므로

그 Layout에 ID를 부여해서 바로 아래에 배치시키면 됩니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/rl1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn2"
            android:text="Btn1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn3"
            android:text="Btn2" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Btn3" />

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/btn3"
            android:text="Btn4" />

        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/btn4"
            android:text="Btn5" />
    </RelativeLayout>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="EditText"
        android:layout_below="@+id/rl1"/>
</RelativeLayout>

그런데 EditText를 위와같이 말고

Button이 모여있는 Layout에서 같이 

사용하고 싶다면

아래와같이 사용하시면 됩니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/rl1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn2"
            android:text="Btn1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn3"
            android:text="Btn2" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="Btn3" />

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/btn3"
            android:text="Btn4" />

        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/btn4"
            android:text="Btn5" />

        <EditText
            android:id="@+id/et"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btn3"
            android:hint="EditText"/>
    </RelativeLayout>
</RelativeLayout>

위에처럼 변경시켜주면 같은 결과를

얻을 수 있습니다.

centerHorizontal과 centerInParent의 차이는

가로 중앙에 놓느냐, 부모뷰 전체에 중앙에 놓느냐

차이입니다.

일단 Relativelayout의 기본은 여기서 마치고

다음글에서 다른 속성들과

다른 Layout들과도 복합해서

사용하는 방법을 알아보겠습니다.