안녕하세요. 제임스 입니다.
이번에는 안드로이드에서 LinearLayout 과 함께 가장 많이 사용되고 있는 RelativeLayout 에 대해 정리해 보겠습니다.
■ Relativelayout 란?
뷰들을 상대적인 위치 정보를 설정하여 배치 시키는 형태 입니다.
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.RelativeLayout
■ RelativeLayout 속성
RelativeLayout 에는 많은 속성 값들이 존재 합니다.
◎ 부모 컨테이너를 기준으로 설정하는 속성 목록
layout_alignParentBottom : 부모 컨테이너의 아래쪽과 뷰의 아래쪽을 맞춤
layout_alignParentEnd : 부모 컨테이너의 끝과 뷰의 끝을 맞춤 (오른쪽 끝)
layout_alignParentLeft : 부모 컨테이너의 왼쪽 끝과 뷰의 왼쪽 끝을 맞춤
layout_alignParentRight : 부모 컨테이너의 오른쪽 끝과 뷰의 오른쪽 끝을 맞춤
layout_alignParentStart : 부모 컨테이너의 시작점을 뷰의 시작점에 맞춤 (왼쪽 끝)
layout_alignParentTop : 부모 컨테이너의 상단 끝과 뷰의 상단 끝을 맞춤
layout_centerHorizontal : 부모 컨테이너의 수평방향 중간에 맞춤
layout_centerVertical : 부모 컨테이너의 수직방향 중간에 맞춤
layout_centerInParent : 부모 컨테이너의 수직 & 수평 중간에 맞춤 (정중앙에 위치)
◎ id 값으로 지정한 뷰 기준으로 설정하는 속성 목록
layout_above : 지정한 뷰의 위쪽에 위치 시킴
layout_alignBaseline : 지정한 뷰와 내용물의 아래쪽 기준선에 맞춤
layout_alignBottom : 지정한 뷰의 아래쪽과 맞춤
layout_alignEnd : 지정한 뷰의 끝에 맞춤
layout_alignLeft : 지정한 뷰의 왼쪽에 맞춤
layout_alignRight : 지정한 뷰의 오른쪽에 맞춤
layout_alignStart : 지정한 뷰의 시작점에 맞춤
layout_alignTop : 지정한 뷰의 상단에 맞춤
layout_below : 지정한 뷰의 아래쪽에 위치 시킴
layout_toLeftOf : 지정한 뷰의 왼쪽에 위치 시킴
layout_toRightOf : 지정한 뷰의 오른쪽에 위치 시킴
위 목록들이 자주 사용하는 속성값들입니다.
위 값들만 적절히 잘 사용해 주시면 거의 모든 레이아웃 구성도 가능합니다.
■ 부모 컨테이너를 기준으로 설정하는 속성 예제
가장 위에 있는 민트색 바탕의 사각형에 속성01 부터 속성07 까지 사각형이 배치되어 있습니다.
속성01
- 어떠한 속성 값도 지정하지 않은 기본 상태로 RelativeLayout 내에서 좌측상단에 위치하게 됩니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#933c3c"
android:text="속성01"/>
속성02
- layout_alignParentRight 속성을 true 로 지정하여 부모 컨테이너의 오른쪽 끝에 위치하게 했습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#ce5d24"
android:text="속성02"
android:layout_alignParentRight="true"
/>
속성03
- layout_alignParentBottom 속성을 true 로 지정하여 부모 컨테이너의 가장 아래쪽에 위치하게 했습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#980cd9"
android:text="속성03"
android:layout_alignParentBottom="true"
/>
속성04
- layout_alignParentRight 속성 및 layout_alignParentBottom 속성을 true 로 지정하여 부모 컨테이너의 우측하단에 위치하게 했습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#f9f902"
android:text="속성04"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
속성05
- layout_centerHorizontal 속성을 true 로 지정하여 부모 컨테이너의 수평방향으로 중앙에 위치하게 했습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#d52d9a"
android:text="속성05"
android:layout_centerHorizontal="true"
/>
속성06
- layout_centerVertical 속성을 true 로 지정하여 부모 컨테이너의 수직방향으로 중앙에 위치하게 했습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#abf902"
android:text="속성06"
android:layout_centerVertical="true"
/>
속성07
- layout_centerInParent 속성을 true 로 지정하여 부모 컨테이너의 수직방향 및 수평방향 모두 중앙에 위치하게 했습니다. (정중앙 위치)
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#e7110a"
android:text="속성07"
android:layout_centerInParent="true"
/>
■ id 값으로 지정한 뷰를 기준으로 설정하는 속성 예제
아래쪽 하늘색 큰 사각형은 상단의 민트색 사각형을 기준으로 layout_below 지정하여 마진 5dp 를 준 상태입니다.
이번 화면에서는 속성07 의 붉은색 사각형을 기준으로 속성값을 지정 했습니다.
속성07
- layout_centerInParent 값을 true 로 지정하여 부모 컨테이너의 정중앙에 배치 시켰습니다.
- id 값을 tv_07 로 지정하여 다른 뷰들이 속성07을 기준으로 자리 배치를 하도록 합니다.
<TextView
android:id="@+id/tv_07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#e7110a"
android:text="속성07"
android:layout_centerInParent="true"
/>
속성08-1
- layout_toLeftOf 속성을 속성07의 id 값 기준으로 지정하여 속성07의 바로 왼쪽에 위치하고 있습니다.
- 수직방향으로의 속성값을 지정하지 않았으므로 default 값으로 상단에 붙어 있습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="10dp"
android:background="#0ae733"
android:text="속성08-1"
android:layout_toLeftOf="@id/tv_07"
/>
속성08-2
- layout_toLeftOf 속성을 속성07 기준으로 지정하여 속성07의 바로 왼쪽에 위치하고 있습니다.
- layout_alignTop 속성을 속성07 기준으로 지정하여 속성07의 상단과 속성08-2의 상단을 같은 위치에 배치 했습니다.
- 속성08-2 의 높이가 길어 속성07 보다 아래쪽으로 밀려 난것을 확인하실 수 있습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="10dp"
android:background="#0ae733"
android:text="속성08-2"
android:layout_toLeftOf="@id/tv_07"
android:layout_alignTop="@id/tv_07"
/>
속성09-1
- layout_toRightOf 속성을 주고 속성07의 바로 오른쪽에 위치하고 있습니다.
- 수직방향으로의 속성값을 지정하지 않았으므로 default 값으로 상단에 붙어 있습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="10dp"
android:background="#b0e70a"
android:text="속성09-1"
android:layout_toRightOf="@id/tv_07"
/>
속성09-2
- layout_toRightOf 속성을 주고 속성07의 바로 오른쪽에 위치하고 있습니다.
- layout_alignBottom 속성값을 지정하여 속성07의 한단과 속성09-2의 하단을 같은 위치에 배치 했습니다.
- 속성09-2 의 높이가 길어 속성07보다 위로 치솟아 오른것을 확인 하실 수 있습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="10dp"
android:background="#b0e70a"
android:text="속성09-2"
android:layout_toRightOf="@id/tv_07"
android:layout_alignBottom="@id/tv_07"
/>
속성10-1
- layout_above 속성을 주고 속성07의 바로 위에 위치하고 있습니다.
- 수평방향으로의 속성값을 지정하지 않았으므로 default 값으로 좌측에 붙어 있습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#955ed9"
android:text="속성10-1"
android:layout_above="@id/tv_07"
/>
속성10-2
- layout_above 속성을 주고 속성07의 바로 위에 위치하고 있습니다.
- layout_alignRight 속성값을 지정하여 속성07의 오른쪽 끝과 속성10-2의 오른쪽 끝을 일치 시켰습니다.
- 속성10-2 의 길이가 길어 속성07의 좌측으로 벗어나 있는 것을 확인 하실 수 있습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#955ed9"
android:text="속성10-2"
android:layout_above="@id/tv_07"
android:layout_alignRight="@id/tv_07"
/>
속성11-1
- layout_below 속성을 주고 속성07의 바로 아래에 위치하고 있습니다.
- 수평방향으로의 속성값을 지정하지 않았으므로 default 값으로 좌측에 붙어 있습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#d58a65"
android:text="속성11-1"
android:layout_below="@id/tv_07"
/>
속성11-2
- layout_below 속성을 주고 속성07의 바로 아래에 위치하고 있습니다.
- layout_alignLeft 속성을 지정하여 속성07의 좌측끝에 속성11-2의 좌측 끝을 일치 시켰습니다.
- 속성11-2 의 길이가 길어 속성07의 우측으로 벗어나 있는 것을 확인 하실 수 있습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#d58a65"
android:text="속성11-2"
android:layout_below="@id/tv_07"
android:layout_alignLeft="@id/tv_07"
/>
아래는 이번 예제를 위해 작성한 전체 레이아웃 입니다.
아래는 위 레이아웃을 구성하기 위해 작성한 xml 코드 전문입니다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tutorial.james.tutorial_linearlayout.MainActivity"
>
<RelativeLayout
android:id="@+id/rl_top"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#11cc99"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#933c3c"
android:text="속성01"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#ce5d24"
android:text="속성02"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#980cd9"
android:text="속성03"
android:layout_alignParentBottom="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#f9f902"
android:text="속성04"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#d52d9a"
android:text="속성05"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#abf902"
android:text="속성06"
android:layout_centerVertical="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#e7110a"
android:text="속성07"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7ee3ef"
android:layout_below="@id/rl_top"
android:layout_margin="5dp"
>
<TextView
android:id="@+id/tv_07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#e7110a"
android:text="속성07"
android:layout_centerInParent="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="10dp"
android:background="#0ae733"
android:text="속성08-1"
android:layout_toLeftOf="@id/tv_07"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="10dp"
android:background="#0ae733"
android:text="속성08-2"
android:layout_toLeftOf="@id/tv_07"
android:layout_alignTop="@id/tv_07"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="10dp"
android:background="#b0e70a"
android:text="속성09-1"
android:layout_toRightOf="@id/tv_07"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="10dp"
android:background="#b0e70a"
android:text="속성09-2"
android:layout_toRightOf="@id/tv_07"
android:layout_alignBottom="@id/tv_07"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#955ed9"
android:text="속성10-1"
android:layout_above="@id/tv_07"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#955ed9"
android:text="속성10-2"
android:layout_above="@id/tv_07"
android:layout_alignRight="@id/tv_07"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#d58a65"
android:text="속성11-1"
android:layout_below="@id/tv_07"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#d58a65"
android:text="속성11-2"
android:layout_below="@id/tv_07"
android:layout_alignLeft="@id/tv_07"
/>
</RelativeLayout>
</RelativeLayout>
참고로 android:text 값을 하드코딩으로 입력 한것이 보이실 겁니다.
이는 레이아웃 구조 설명을 위해 입력한 방식입니다.
string.xml 에 문장을 지정하고 해당 id 값을 호출하여 사용하는 방식을 사용하는 것을 권해 드립니다.
참고하세요 :)
▼ 도움이 되셨다면 로그인이 필요 없는 ▼
▼ 하트 클릭 한번 부탁 드립니다 ▼
감사합니다 :D
