상대적 레이아웃 Relative Layout

이번에는 Relative Layout에 대해 알아봅니다.

 

Relative Layout은 상대적인 위치에 하위 뷰를 나타내는 기능을 합니다.

 

우선 코드와 에뮬레이터 결과를 바로 확인합니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:text="1번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_centerInParent="true"
        android:background="#F44336" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="2번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_alignParentBottom="true"
        android:background="#E91E63" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="3번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_alignParentRight="true"
        android:background="#E91E63" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="4번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_alignParentLeft="true"
        android:background="#E91E63" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="5번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_alignParentEnd="true"
        android:background="#2196F3" />


    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="6번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_centerInParent="true"
        android:background="#2196F3" />


    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="7번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_centerHorizontal="true"
        android:background="#2196F3" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="8번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_centerVertical="true"
        android:background="#2196F3" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="9번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:background="#2196F3" />

    <TextView
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:text="10번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="#2196F3" />

    <TextView
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:text="11번"
        android:textColor="@color/black"
        android:textSize="30dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="#E91E63" />


</RelativeLayout>

에뮬레이터 결과

우선 부모 뷰를 Relative Layout으로 설정하면, Orientation 속성을 부여할 필요가 없습니다. 어차피 상위 영역에 상대적으로 위치가 결정하기 때문에 해당 속성을 넣지 않습니다.

 

정 가운데에 있는 1번을 보면, android:layout_centerInParent="true" 해당 속성을 true값을 줌으로써, 부모 컨테이너를 기준으로 중간에 놓았습니다. 6번 또한 같은 맥락입니다.

 

4번 부터 차례대로 보면, 중요한 부분은 android:layout_alignParentLeft="true"입니다. 이는 부모 컨테이너의 왼쪽 끝과 자식 뷰의 왼쪽 끝을 맞춘 것입니다.

 

7번의 경우는 android:layout_centerHorizontal="true" 입니다.

 

3번의 경우는 android:layout_alignParentRight="true"이고, 5번은 android:layout_alignParentEnd="true"입니다. 부모 컨테이너 기준으로 오른쪽 끝으로 맞추거나 그냥 끝으로 맞춰도 상관 없습니다.

 

8번의 경우는 android:layout_centerVertical="true" 입니다.

 

9번의 경우는 android:layout_alignParentEnd="true"와 android:layout_centerVertical="true" 이렇게 두 가지 속성 값을 넣어줘야 가운데 끝에 위치하게 됩니다. 물론 android:layout_alignParentEnd="true"를 android:layout_alignParentRight="true"로 바꿔도 무방합니다.

 

반응형

2번의 경우는 android:layout_alignParentBottom="true" 입니다.

 

10번의 경우는 android:layout_alignParentBottom="true"와 android:layout_centerHorizontal="true"를 모두 부여했습니다.

 

11번의 경우는 android:layout_alignParentBottom="true"와 android:layout_alignParentRight="true"를 모두 부여했습니다.

 

위의 실행 결과와 중요한 속성 값을 정리한 그림은 아래와 같습니다.