[안드로이드] 레이아웃(2) - RelativeLayout(상대 레이아웃)

안녕하세요 ! 초보개발자 입니다. 

이 블로그는 개인 공부 정리용 블로그 입니다. 

혹 잘못된 내용이 있다면 지적 부탁드리겠습니다.

그리고 질문주신다면 최대한 아는선에서 답변드리도록 하겠습니다.

그럼 시작하도록 하겠습니다.

---

RelativeLayout(상대 레이아웃)

상대 레이아웃은 부모 컨테이너나 다른 뷰와의 상대적인 위치를 이용해 뷰의 위치를 결정 할 수 있습니다. 예를 들어 하나의 뷰 밑에 또 다른 뷰를 배치하고 싶을 때 뷰밑에 지정하는 속성을 XML 레이아웃에서 설정 할 수 있습니다. 예를 들면 다음과 같습니다. 

A라는 뷰는 부모 뷰의 위쪽으로 배치를 하였고 C라는 뷰는 A의 오른쪽아래에 배치 그리고 마지막 B는 A의 아래 그리고 C의 왼쪽으로 배치 하였습니다. 

예제를 통하여  상대레이아웃에 대해서 더 자세하게 알아 보겠습니다.

<?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"
    tools:context="com.example.administrator.realativelayout.MainActivity">
 
    <RelativeLayout
        android:id="@+id/re1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/re2"
        android:background="#aabbccdd">
        
    </RelativeLayout>
 
    <RelativeLayout
        android:id="@+id/re2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/re4"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#aad25e4f"></RelativeLayout>
 
    <RelativeLayout
        android:id="@+id/re3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/re1"
        android:background="#aa134ddf"></RelativeLayout>
 
    <RelativeLayout
        android:id="@+id/re4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/re3"
        android:background="#aaa10fc6"></RelativeLayout>
 
    <RelativeLayout
        android:id="@+id/re5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/re1"
        android:layout_toLeftOf="@+id/re2"
        android:layout_toRightOf="@+id/re3"
        android:layout_above="@+id/re4"
        android:background="#aa000000"></RelativeLayout>
 
</RelativeLayout>
 

위 예제의 결과 화면입니다. 

약간 복잡해 보일 수도 있지만 리니어 레이아웃에서 배웠던 것과 비슷합니다. 단지 LinearLayout에 없었던 속성들이 새로 들어간 것입니다.

상대 레이아웃에서 부모 컨테이너와의 상대적 위치를 이용해 뷰를 배치할 수 있는 속성들은 다음과 같습니다.

속성	설명
layout_alignParentTop	부모 컨테이너의 위쪽과 뷰를 맞춤
layout_alignParentBottom	부모 컨테이너의 아래쪽과 뷰의 아래쪽을 맞춤
layout_alignParentLeft	부모 컨테이너의 왼쪽 끝과 뷰의 왼쪽 끝을 맞춤
layout_alignParentRight	부모 컨테이너의 오른쪽 끝과 뷰의 오른쪽 끝을 맞춤
layout_centerHorizontal	부모 컨테이너의 수평 방향 중앙에 배치함
layout_centerVertical	부모 컨테이너의 수직 방향 중앙에 배치함
layout_centerlnParent	부모 컨테이너의 수평과 수직 방향 중앙에 배치함

부모 컨테이너가 아니라 다른 뷰와의 상대적 위치를 이용해 뷰를 배치할 수 있는 속성들은 다음과 같습니다.

속성	설명
layout_above	지정한 뷰의 위쪽에 배치함
layout_below	지정한 뷰의 아래쪽에 배치함
layout_toLeftOf	지정한 뷰의 왼쪽에 배치함
layout_toRightOf	지정한 뷰의 오른쪽에 배치함
layout_alignTop	지정한 뷰의 위쪽과 맞춤
layout_alignBottom	지정한 뷰의 아래쪽에 맞춤
layout_alignLeft	지정한 뷰의 왼쪽과 맞춤
layout_alignRight	지정한 뷰의 오른쪽과 맞춤
layout_alignBaseline	지정한 뷰와 내용물의 아래쪽 기준선을 맞춤

위의 내용을 바탕으로 XML 을 분석하면 될 것 입니다. 

먼저 부모 RelativeLayout 안에 5개의 RelativeLayout을 만들고 각각 색을 다르게 한 다음 ID값을 부여 합니다. ID 값이 re1 인 레이아웃의 속성은 layout_alignParentLeft 와 layout_alignParentTop 의 값을 true로 주었습니다. 그렇다면 이 레이아웃은 부모의 왼쪽과 위쪽에 뷰를 맞출 것입니다. 그리고 layout_toLeftOf="@+id/re2" 에 의해 ID가 re2인 레이아웃의 왼쪽에 붙게 됩니다. 이런 속성들을 파악하시어 각각의 레이아웃의 배치를 분석해 보면 위와 같은 화면이 나타날 것 입니다. 나머지는 여러분이 직접 분석해보시면 이해가 가실 겁니다. 

이상으로 RelativeLayout에 대해서 알아 보았습니다. 수고하셨습니다.