[android] RelativeLayout (상대 레이아웃)

앞 포스팅에서 리니어 레이아웃에 대해 알아 보았다.

RelativeLayout도 리니어레이아웃과 비슷하기때문에 크게 어려움은 없을 것이다.

RelativerLayout은 위젯과 부모와의 위치관계 또는 위젯끼리의 관계를 지정함으로써 뷰를 배치하는 레이아웃이다.

---

RelativeLayout의 주요 속성

속성	설명
layout_above	~의 위에 배치한다.
layout_bealow	~의 아래에 배치한다.
layout_toLeftOf	~의 왼쪽에 배치한다.
layout_toRightOf	~의 오른쪽에 배치한다.
layout_alignLeft	~와 왼쪽 변을 맞춘다.
layout_alignTop	~와 위쪽 변을 맞춘다.
layout_alignRight	~와 오른쪽 변을 맞춘다.
layout_alignBottom	~와 아래족 변을 맞춘다.
layout_alignParentLeft	ture이면 부모와 왼쪽 변을 맞춘다.
layout_alignParentTop	true이면 부모와 위쪽 변을 맞춘다.
layout_alignParentRight	true이면 부모와 오른쪽 변을 맞춘다.
layout_alignParentBottom	true이면 부모와 아래쪽 변을 맞춘다.
layout_alignBaseline	~와 베이스라인을 맞춘다.
layout_alignWithParentIfMissing	layout_toLeftOf 등의 속성에 대해 앵커가 발견되지 않으면  부모를 앵커로 사용한다.
layout_centerHorizontal	true이면 부모의 수평 중앙에 배치한다.
layout_ centerVertical	true이면 부모의 수직 중앙에 배치한다.
layout_centerInParent	true이면 부모의 수평, 수직 중앙에 배치한다.

일반적인 레이아웃은 XML 코드의 순서대로 화면에 배치된다.

예를들어 A를 B위에 배치하고 싶다면 XML 문서상에 B를 먼저 기술한 후 A를 나중에 기술해야한다. 

B가 무엇인지 정의되지도 않았는데 A를 B위에 둔다는 지정을 할 수 없다.

다음 예제는 RelativeLayout안에 성호관계를 정의함으로써 배치한다.

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.    android:layout_width="fill_parent"
4.    android:layout_height="fill_parent"
5.    android:baselineAligned="true"
6.    android:orientation="vertical" >
7.  
8.     <RelativeLayout
9.        android:layout_width="match_parent"
10.        android:layout_height="wrap_content" >
11.  
12.         <TextView
13.            android:id="@+id/text1"
14.            android:layout_width="wrap_content"
15.            android:layout_height="wrap_content"
16.            android:layout_marginLeft="10dp"
17.            android:layout_marginRight="10dip"
18.            android:text="text1"
19.            android:textAppearance="?android:attr/textAppearanceLarge" />
20.  
21.         <TextView
22.            android:id="@+id/text2"
23.            android:layout_width="wrap_content"
24.            android:layout_height="wrap_content"
25.            android:layout_toRightOf="@id/text1"
26.            android:text="text2"
27.            android:textAppearance="?android:attr/textAppearanceLarge" />
28.  
29.         <TextView
30.            android:id="@+id/text3"
31.            android:layout_width="wrap_content"
32.            android:layout_height="wrap_content"
33.            android:layout_alignParentRight="true"
34.            android:layout_below="@id/text2"
35.            android:text="text3"
36.            android:textAppearance="?android:attr/textAppearanceLarge" />
37.  
38.         <TextView
39.            android:id="@+id/text4"
40.            android:layout_width="wrap_content"
41.            android:layout_height="wrap_content"
42.            android:layout_alignBottom="@id/text3"
43.            android:layout_toLeftOf="@id/text3"
44.            android:text="text4"
45.            android:textAppearance="?android:attr/textAppearanceLarge" />
46.     </RelativeLayout>
47.  
48. </LinearLayout>

배치결과이다.

첫 차일드는 별다른 속성이 없으므로 좌측상단에 배치가 됐다.

text2는 text1오른쪽에 넣는다고 지정했으므로 text1 오른쪽에 배치된다. 

이때 text2가 text1 오른쪽임을 지정하기 위해 text1에 id를 지정하고, text2에 layout_toRightOf속성에 text1의 아이디를 지정했다.

이 룰을 적용하기 위해 text1은 XML 문서상에 먼저 나와야 한다.

text3은 text2아래에 놓고 부모의 오른쪽 변에 맞추었다. 그래서 text2보다 아래줄에 놓이지만 화면의 오른쪽 끝에 정렬되었다.

text4는 text3의 왼쪽에 놓고 text3와 하단정렬을 맞추어 오른쪽 변에 가지런히 정렬했다.

화면상에 text3가 먼저 보이지만 text4가 text3의 위치를 기준으로 배치되므로 XML 문서에서는  text3가 먼저 나와야한다.

이 뒬의 순서를 바꿔버리면 text4가 참조할 위치를 제대로 구하지 못하므로 text1과 겹쳐서 나타난다.

통상 부모의 변에 달라붙는 위젯을 먼저 선언하고 주위에 배치되는 위젯을 나중에 선언하는 것이 편리하다.