[모든 팔레트 정복] 6. Layout(레이아웃) - RelativeLayout

안녕하세요? 닉네임간편입니다. 이번 시간에는 저번 시간에 이어 Layout에 대해서 다룰 것이고, 그 중 RelativeLayout에 대해서 알아보겠습니다.

1. 정의

뷰 간 상대적인 위치로 뷰를 표시하는 레이아웃(뷰그룹)입니다. 예를 들어 '사과는 감자의 오른쪽에 있다'로 사과의 위치를 표시하는 것과 같습니다.

2. 유용성

기존 LinearLayout의 경우 화면에 아래와 같은 배치를 하기 위해선 또 하나의 LinearLayout을 만들어 중첩시켰어야 했습니다. 오로지 하나의 방향으로만 요소를 쌓을 수 있기 때문입니다. 그리고 레이아웃이 중첩된다면 성능이 저하될 수 있다는 문제가 있습니다.

그러나 RelativeLayout을 사용한다면 레이아웃을 중첩시키지 않고 상대적인 위치를 조절할 수 있습니다. 이로써 성능을 개선할 수 있습니다.

또한 RelativeLayout에선 뷰를 겹칠 수 있습니다. 이때 뷰가 추가된 순서대로 레이아웃에 쌓이게 되며, 기존 뷰와 새로운 뷰가 겹칠 경우 기존 뷰는 중첩된 부분만큼 화면에 보이지 않게 됩니다. 아래 그림을 보면 view2와 view3이 view1과 중첩되었음을 알 수 있습니다.

[activity_main]

<?xml version="1.0" encoding="utf-8"?>
<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">

    <TextView
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:background="@color/moredarkgray"
        android:text="view1"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:id="@+id/view2"
        android:layout_width="100dp"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:background="@color/gray"
        android:text="view2"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="150dp"
        android:layout_below="@+id/view2"
        android:background="@color/littlegray"
        android:text="view3"
        android:textSize="35sp"
        android:gravity="center"/>

</RelativeLayout>

3. 위치 지정 방법

RelativeLayout은 각 뷰의 ID를 이용해 각각의 상대적인 위치를 지정할 수 있습니다. 아래 그림을 통해 살펴보겠습니다. 이때 시각적 편의를 위해 margin 값을 크게 설정했습니다.

먼저 view1을 보면 alignParentTop을 true로 설정함에 따라 위치가 부모 레이아웃의 상단에 있음을 알 수 있습니다.

이후 view2는 id를 통해 toRightOf를 view1에 대해 설정했는데, 이에 따라 view2가 view1 오른 쪽에 위치함을 알 수 있습니다.

view3는 id를 통해 below를 view1으로 설정함으로써 view1의 하단에 위치합니다.

이렇게 요소 간 상대적인 위치를 이용해 배치할 수 있는 레이아웃이 바로 RelativeLayout입니다.

[activity_main]

<?xml version="1.0" encoding="utf-8"?>
<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">

    <TextView
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view1"
        android:textSize="35sp"
        android:layout_alignParentTop="true"/>

    <TextView
        android:id="@+id/view2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view2"
        android:textSize="35sp"
        android:layout_toRightOf="@+id/view1"/>

    <TextView
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view3"
        android:textSize="35sp"
        android:layout_below="@+id/view1"/>
</RelativeLayout>

4. 마무리

이번 시간에는 RelativeLayout에 대해서 알아보았습니다.

뷰 간 중첩이 되고 상대적 위치에 따라 자유롭게 요소들을 배치할 수 있기 때문에 유용하게 사용할 수 있지만, 이보다 더 유연하게 배치할 수 있는 ConstraintLayout이 있기에 요즘 들어서는 잘 활용되지는 않는 것 같습니다.

그럼에도 알아두는 것은 좋기 때문에, 잘 정리가 되셨으면 좋겠습니다.