07-2 상대 위치로 배치 - RelativeLayout

RelativeLayout 배치 규칙

RelativeLayout은 상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스이다. 즉, 화면에 이미 출력된 특정 뷰를 기준으로 방향을 지정하여 배치한다. 이때 다음 속성을 사용하며 각  속성에 입력하는 값은 기준이 되는 뷰의 id이다.

• android:layout_above: 기준 뷰의 위쪽에 배치
• android:layout_below: 기준 뷰의 아래쪽에 배치
• android:layout_toLeftOf: 기준 뷰의 왼쪽에 배치
• android:layout_toRightOf: 기준 뷰의 오른쪽에 배치

다음은 RelativeLayout에 이미지 뷰와 버튼을 배치한 예이다.

// RelativeLayout으로 뷰 배치하기
<RelativeLayout xmlns:android="hattp://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
    android:layout_height="match_parent"
    <ImageView
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />
    <Button
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HELLO"
</RelativeLayout>

이렇게 하면 RelativeLayout은 LinearLayout처럼 자동으로 가로세로 방향으로 배치되지 않으므로 이미지 뷰 위에 버튼이 겹쳐서 나오게 된다. 여기서 버튼을 이미지 뷰 오른쪽에 배치하고 싶다면 android:layout_toRightOf 속성을 이용할 수 있다.

// 상대 뷰의 오른쪽에 배치
<RelativeLayout xmlns:android="hattp://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
    android:layout_height="match_parent"
    <ImageView
    	android:id="@+id/testImage" // 이미지 뷰에 아이디 지정함
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />
    <Button
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HELLO"
        android:layout_toRightOf="@id/testImage" // 이미지 뷰의 아이디를 이용해서 버튼이 이미지의 오른쪽에 오도록 함
</RelativeLayout>

ImageView에 id값을 설정하고 이 값을 Button의 layout_toRightOf 속성값으로 지정했다. 따라서 버튼은 id값이 testImage인 뷰 오른쪽에 배치된다.

 

맞춤 정렬하는 align 속성

앞에서는 android:layout_toRightOf 속성을 이용해 버튼을 이미지 오른쪽에 배치하긴 했지만, 이미지 세로높이가 버튼 세로높이보다 커서 버튼이 이미지의 위쪽에 위치하게 된다.(불--편)

그런데 때로는 상대 뷰의 아래쪽에 맞춰야 할 수도 있다.

이처럼 상대 뷰의 어느 쪽에 맞춰서 정렬할지를 정하는 속성은 다음과 같다. 이 속성에 입력하는 값 역시, 기준이 되는 뷰의 id입니다.

• android:layout_align_Top: 기준 뷰와 위쪽을 맞춤
• android:layout_align_Bottom: 기준 뷰와 아래쪽을 맞춤
• android:layout_align_Left: 기준 뷰와 왼쪽을 맞춤
• android:layout_align_Right: 기준 뷰와 오른쪽을 맞춤
• android:layout_align_BaseLine: 기준 뷰와 기준선을 맞춤

// 기준 뷰와 아래쪽을 맞춰 정렬
<RelativeLayout xmlns:android="hattp://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
    android:layout_height="match_parent"
    <ImageView
    	android:id="@+id/testImage" // 이미지 뷰에 아이디 지정함
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />
    <Button
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HELLO"
        android:layout_toRightOf="@id/testImage" // 버튼이 이미지 뷰의 오른쪽으로 가도록
        android:layout_alignBottom="@id/testImage" /> // 버튼이 이미지 뷰와 아래쪽을 맞추도록
</RelativeLayout>

또, 상위 레이아웃을 기준을 맞춤 정렬하는 속성도 있다. 뷰를 부모 영역의 오른쪽 또는 아래쪽에 붙이고 싶을 때 사용한다.

• android:layout_align_ParentTop: 부모의 위쪽을 맞춤
• android:layout_align_ParentBottom: 부모의 아래쪽을 맞춤
• android:layout_align_ParentLeft: 부모의 왼쪽을 맞춤
• android:layout_align_ParentRight: 부모의 오른쪽을 맞춤
• android:layout_centerHorizontal: 부모의 가로 방향 중앙에 맞춤
• android:layout_centervertical: 부모의 세로 방향 중앙에 맞춤
• android:layout_centerInparent: 부모의 가로,세로 중앙에 맞춤

// 부모의 오른쪽에 맞춰 정렬
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
    android:layout_height="match_parent"
    <ImageView
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />
    <Button
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HELLO"
        android:layout_alignBottom="@id/testImage"
        android:layout_alignParentRight="true" // 부모에 대해서는 따로 아이디 쓰지 않고 ="true"형태 사용함
</RelativeLayout>

 

🙋‍♀️ 화면을 구성할 때 LinearLayout과 RelativeLayout 중 어떤 레이아웃 클래스를 선택해야 하나요?

: LinearLayout으로 배치한 화면을 RelativeLayout으로 구현할 수도 있고 그 반대도 가능하다. 결국 개발자가 선택하는 것이다.