'Android RelativeLayout'에 해당되는 글 1건

안녕하세요. 제임스 입니다. 

이번에는 안드로이드에서 LinearLayout 과 함께 가장 많이 사용되고 있는 RelativeLayout 에 대해 정리해 보겠습니다. 

■ Relativelayout 란?

뷰들을 상대적인 위치 정보를 설정하여 배치 시키는 형태 입니다. 

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.RelativeLayout

■ RelativeLayout 속성

RelativeLayout 에는 많은 속성 값들이 존재 합니다. 

◎ 부모 컨테이너를 기준으로 설정하는 속성 목록

layout_alignParentBottom : 부모 컨테이너의 아래쪽과 뷰의 아래쪽을 맞춤

layout_alignParentEnd : 부모 컨테이너의 끝과 뷰의 끝을 맞춤 (오른쪽 끝)

layout_alignParentLeft : 부모 컨테이너의 왼쪽 끝과 뷰의 왼쪽 끝을 맞춤

layout_alignParentRight : 부모 컨테이너의 오른쪽 끝과 뷰의 오른쪽 끝을 맞춤

layout_alignParentStart : 부모 컨테이너의 시작점을 뷰의 시작점에 맞춤 (왼쪽 끝)

layout_alignParentTop : 부모 컨테이너의 상단 끝과 뷰의 상단 끝을 맞춤

layout_centerHorizontal : 부모 컨테이너의 수평방향 중간에 맞춤

layout_centerVertical : 부모 컨테이너의 수직방향 중간에 맞춤

layout_centerInParent : 부모 컨테이너의 수직 & 수평 중간에 맞춤 (정중앙에 위치)

◎ id 값으로 지정한 뷰 기준으로 설정하는 속성 목록

layout_above : 지정한 뷰의 위쪽에 위치 시킴

layout_alignBaseline : 지정한 뷰와 내용물의 아래쪽 기준선에 맞춤

layout_alignBottom : 지정한 뷰의 아래쪽과 맞춤

layout_alignEnd : 지정한 뷰의 끝에 맞춤

layout_alignLeft : 지정한 뷰의 왼쪽에 맞춤

layout_alignRight : 지정한 뷰의 오른쪽에 맞춤

layout_alignStart : 지정한 뷰의 시작점에 맞춤

layout_alignTop : 지정한 뷰의 상단에 맞춤

layout_below : 지정한 뷰의 아래쪽에 위치 시킴

layout_toLeftOf : 지정한 뷰의 왼쪽에 위치 시킴

layout_toRightOf : 지정한 뷰의 오른쪽에 위치 시킴

위 목록들이 자주 사용하는 속성값들입니다. 

위 값들만 적절히 잘 사용해 주시면 거의 모든 레이아웃 구성도 가능합니다. 

■ 부모 컨테이너를 기준으로 설정하는 속성 예제 

가장 위에 있는 민트색 바탕의 사각형에 속성01 부터 속성07 까지 사각형이 배치되어 있습니다. 

속성01 

- 어떠한 속성 값도 지정하지 않은 기본 상태로 RelativeLayout 내에서 좌측상단에 위치하게 됩니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#933c3c"
    android:text="속성01"/>

속성02 

- layout_alignParentRight 속성을 true 로 지정하여 부모 컨테이너의 오른쪽 끝에 위치하게 했습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#ce5d24"
    android:text="속성02"
    android:layout_alignParentRight="true"
    />

속성03

- layout_alignParentBottom 속성을 true 로 지정하여 부모 컨테이너의 가장 아래쪽에 위치하게 했습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#980cd9"
    android:text="속성03"
    android:layout_alignParentBottom="true"
    />

속성04

- layout_alignParentRight 속성 및 layout_alignParentBottom 속성을 true 로 지정하여 부모 컨테이너의 우측하단에 위치하게 했습니다.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#f9f902"
    android:text="속성04"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    />

속성05

- layout_centerHorizontal 속성을 true 로 지정하여 부모 컨테이너의 수평방향으로 중앙에 위치하게 했습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#d52d9a"
    android:text="속성05"
    android:layout_centerHorizontal="true"
    />

속성06

- layout_centerVertical 속성을 true 로 지정하여 부모 컨테이너의 수직방향으로 중앙에 위치하게 했습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#abf902"
    android:text="속성06"
    android:layout_centerVertical="true"
    />

속성07

- layout_centerInParent 속성을 true 로 지정하여 부모 컨테이너의 수직방향 및 수평방향 모두 중앙에 위치하게 했습니다. (정중앙 위치)

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#e7110a"
    android:text="속성07"
    android:layout_centerInParent="true"
    />

■ id 값으로 지정한 뷰를 기준으로 설정하는 속성 예제 

아래쪽 하늘색 큰 사각형은 상단의 민트색 사각형을 기준으로 layout_below 지정하여 마진 5dp 를 준 상태입니다. 

이번 화면에서는 속성07 의 붉은색 사각형을 기준으로 속성값을 지정 했습니다. 

속성07

- layout_centerInParent 값을 true 로 지정하여 부모 컨테이너의 정중앙에 배치 시켰습니다. 

- id 값을 tv_07 로 지정하여 다른 뷰들이 속성07을 기준으로 자리 배치를 하도록 합니다. 

<TextView
    android:id="@+id/tv_07"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#e7110a"
    android:text="속성07"
    android:layout_centerInParent="true"
    />

속성08-1

- layout_toLeftOf 속성을 속성07의 id 값 기준으로 지정하여 속성07의 바로 왼쪽에 위치하고 있습니다. 

- 수직방향으로의 속성값을 지정하지 않았으므로 default 값으로 상단에 붙어 있습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:padding="10dp"
    android:background="#0ae733"
    android:text="속성08-1"
    android:layout_toLeftOf="@id/tv_07"
    />

속성08-2

- layout_toLeftOf 속성을 속성07 기준으로 지정하여 속성07의 바로 왼쪽에 위치하고 있습니다. 

- layout_alignTop 속성을 속성07 기준으로 지정하여 속성07의 상단과 속성08-2의 상단을 같은 위치에 배치 했습니다. 

- 속성08-2 의 높이가 길어 속성07 보다 아래쪽으로 밀려 난것을 확인하실 수 있습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:padding="10dp"
    android:background="#0ae733"
    android:text="속성08-2"
    android:layout_toLeftOf="@id/tv_07"
    android:layout_alignTop="@id/tv_07"
    />

속성09-1

- layout_toRightOf 속성을 주고 속성07의 바로 오른쪽에 위치하고 있습니다. 

- 수직방향으로의 속성값을 지정하지 않았으므로 default 값으로 상단에 붙어 있습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:padding="10dp"
    android:background="#b0e70a"
    android:text="속성09-1"
    android:layout_toRightOf="@id/tv_07"
    />

속성09-2

- layout_toRightOf 속성을 주고 속성07의 바로 오른쪽에 위치하고 있습니다. 

- layout_alignBottom 속성값을 지정하여 속성07의 한단과 속성09-2의 하단을 같은 위치에 배치 했습니다. 

- 속성09-2 의 높이가 길어 속성07보다 위로 치솟아 오른것을 확인 하실 수 있습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:padding="10dp"
    android:background="#b0e70a"
    android:text="속성09-2"
    android:layout_toRightOf="@id/tv_07"
    android:layout_alignBottom="@id/tv_07"
    />

속성10-1

- layout_above 속성을 주고 속성07의 바로 위에 위치하고 있습니다. 

- 수평방향으로의 속성값을 지정하지 않았으므로 default 값으로 좌측에 붙어 있습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#955ed9"
    android:text="속성10-1"
    android:layout_above="@id/tv_07"
    />

속성10-2

- layout_above 속성을 주고 속성07의 바로 위에 위치하고 있습니다. 

- layout_alignRight 속성값을 지정하여 속성07의 오른쪽 끝과 속성10-2의 오른쪽 끝을 일치 시켰습니다. 

- 속성10-2 의 길이가 길어 속성07의 좌측으로 벗어나 있는 것을 확인 하실 수 있습니다.  

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#955ed9"
    android:text="속성10-2"
    android:layout_above="@id/tv_07"
    android:layout_alignRight="@id/tv_07"
    />

속성11-1

- layout_below 속성을 주고 속성07의 바로 아래에 위치하고 있습니다. 

- 수평방향으로의 속성값을 지정하지 않았으므로 default 값으로 좌측에 붙어 있습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#d58a65"
    android:text="속성11-1"
    android:layout_below="@id/tv_07"
    />

속성11-2

- layout_below 속성을 주고 속성07의 바로 아래에 위치하고 있습니다. 

- layout_alignLeft 속성을 지정하여 속성07의 좌측끝에 속성11-2의 좌측 끝을 일치 시켰습니다.

- 속성11-2 의 길이가 길어 속성07의 우측으로 벗어나 있는 것을 확인 하실 수 있습니다. 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#d58a65"
    android:text="속성11-2"
    android:layout_below="@id/tv_07"
    android:layout_alignLeft="@id/tv_07"
    />

아래는 이번 예제를 위해 작성한 전체 레이아웃 입니다. 

아래는 위 레이아웃을 구성하기 위해 작성한 xml 코드 전문입니다. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tutorial.james.tutorial_linearlayout.MainActivity"
    >

    <RelativeLayout
        android:id="@+id/rl_top"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#11cc99"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#933c3c"
            android:text="속성01"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#ce5d24"
            android:text="속성02"
            android:layout_alignParentRight="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#980cd9"
            android:text="속성03"
            android:layout_alignParentBottom="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#f9f902"
            android:text="속성04"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#d52d9a"
            android:text="속성05"
            android:layout_centerHorizontal="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#abf902"
            android:text="속성06"
            android:layout_centerVertical="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#e7110a"
            android:text="속성07"
            android:layout_centerInParent="true"
            />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#7ee3ef"
        android:layout_below="@id/rl_top"
        android:layout_margin="5dp"
        >

        <TextView
            android:id="@+id/tv_07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#e7110a"
            android:text="속성07"
            android:layout_centerInParent="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:padding="10dp"
            android:background="#0ae733"
            android:text="속성08-1"
            android:layout_toLeftOf="@id/tv_07"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:padding="10dp"
            android:background="#0ae733"
            android:text="속성08-2"
            android:layout_toLeftOf="@id/tv_07"
            android:layout_alignTop="@id/tv_07"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:padding="10dp"
            android:background="#b0e70a"
            android:text="속성09-1"
            android:layout_toRightOf="@id/tv_07"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:padding="10dp"
            android:background="#b0e70a"
            android:text="속성09-2"
            android:layout_toRightOf="@id/tv_07"
            android:layout_alignBottom="@id/tv_07"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#955ed9"
            android:text="속성10-1"
            android:layout_above="@id/tv_07"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#955ed9"
            android:text="속성10-2"
            android:layout_above="@id/tv_07"
            android:layout_alignRight="@id/tv_07"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#d58a65"
            android:text="속성11-1"
            android:layout_below="@id/tv_07"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#d58a65"
            android:text="속성11-2"
            android:layout_below="@id/tv_07"
            android:layout_alignLeft="@id/tv_07"
            />

    </RelativeLayout>

</RelativeLayout>

참고로 android:text 값을 하드코딩으로 입력 한것이 보이실 겁니다. 

이는 레이아웃 구조 설명을 위해 입력한 방식입니다. 

string.xml 에 문장을 지정하고 해당 id 값을 호출하여 사용하는 방식을 사용하는 것을 권해 드립니다. 

참고하세요 :)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D