[안드로이드] 뷰그룹 - RelativeLayout

· 최초작성 : 2015. 10. 12.

· 최종수정 : 2015. 11. 08.

· 작성/수정내용 :

  - RelativeLayout 속성 정리

    각 그림에 대한 text 설명 추가

---

시작하기에 앞서...

지난 포스팅에 이어 많이 늦었지요 ㅜㅜ

컴퓨터가 날아 갔었어요. 그래서 이참에 아주 새 컴퓨터로 맞췄습니다.

덕분에 아주 날아 다니네요 ㅎㅎㅎㅎ 자랑하고 싶네요 ㅎㅎㅎ 제 새 컴퓨터~ ㅎㅎㅎㅎ

# 안드로이드 뷰그룹 - RelativeLayout

앞으로 몇 번의 포스팅에서는 '웹툰 바로가기' 어플에서 대략적으로 보기만 했던 내용들에 내해서 속성값 같은것들을 정리해 볼까 합니다.

오늘은 첫 번째로 RelativeLayout 레이아웃을 가지고 이야기 해보려고 합니다.

RelativeLayout 은 LinearLayout와 함께 가장 많이 사용되는 뷰그룹일거 같습니다.

이름에서 알 수 있듯이 RelativeLayout는 각 뷰들의 위치를 설정 할 때, 기준과의 관계를 따져서 정합니다.

따라서 activity_main.xml 에 각각의 뷰를 정의 할때

'B'뷰는 'A(기준뷰)' 뷰의 '왼쪽이다', '오른쪽이다.', '위다', '아래다' 하는 식으로 속성을 설정하게 됩니다.

그럼 차근차근 샘플을 보도록 할께요~

자세한 설명을 붙이지 않더라도 딱 보면 아실거 같아요 ㅎ

우선 아래 소스처럼

기준이 되는 'View 1" 뷰를 화면 중앙에 위치 시켜줍니다.

activity_main.xml

<?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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity">

    <Button
        android:id="@+id/txtView1"
        android:text="View 1"
        android:textStyle="bold"
        android:background="#FFFF00"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="center"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

그리고 다른 뷰에서 "View 1"를 알 수 있도록 id도 하나 추가 해주었습니다.

android:id="@+id/txtView1"

뷰나 뷰그룹웨 ID를 부여 할때는 위와 같이

android:id="@+id/ID이름"

그리고 반대로 뷰를 참조해야 할 경우라면???

간단합니다.

android:id="@id/ID이름"

@ 다음에 '+' 만 빼면 되요 ㅎ

다른 뷰를 위치 시키기 전에 우선 

RelativeLayout가 자체적으로 가지고 있는 속성을 한 번 볼께요

속성	속성값	내용
android:gravity	아래 표 참조	해당 Layout에 포함되는 뷰들의 정렬 방법을 설정 한다
android:ignoreGravity	@id/뷰ID	gravity의 정렬에서 지정한 뷰에 대해서는 정렬 적용을 받지 안는다.

위의 속성은 여러가지 뷰에서 공통적으로 사용되고 있으니 잘 알아 두는 것이 좋습니다.

gravity는 해당 뷰가 포함하는 하위 뷰들에 대한 정렬을 지정합니다.

해당뷰가 뷰그룹이면 포함되는 뷰그룹과 뷰에 대해서 정렬을 지정하고

해당뷰가 일반 버튼뷰이거나 텍스트 뷰이면 그 안에 텍스트 같은 것들에 대해 정렬을 지정하는 것이죠

위의 속성값은 다음 포스팅에 정리 할께요~

이번 포스팅에서는 RelativeLayout에 속성에 대해서 정리해 볼께요~

(이것만 해도 이미지 양이 많더라구요 ㅜㅜ)

속성	속성값	설명
layout_above	기준뷰 ID	기준뷰의 상단에 해당뷰의 하단과 일치시킨다.
layout_below	기준뷰 ID	기준뷰의 하단에 해당뷰의 상단을 일치시킨다.
layout_toStartOf	기준뷰 ID	기준뷰의 왼쪽에 해당뷰의 오른쪽을 일치시킨다.
layout_toEndOf	기준뷰 ID	기분뷰의 오른쪽에 해당뷰의 왼쪽을 일치시킨다.
layout_toLeftOf	기준뷰 ID	기준뷰의 왼쪽에 해당뷰의 오른쪽을 일치시킨다. ( = layout_toStartOf)
layout_toRightOf	기준뷰 ID	기준뷰의 오른쪼에 해당뷰의 왼쪽을 일치시킨다. ( = layout_toendOf)
layout_alignTop	기준뷰 ID	기준뷰의 상단과 해당뷰의 상단을 일치시킨다.
layout_alignBottom	기준뷰 ID	기준뷰의 하단과  해당뷰의 하단을 일치시킨다.
layout_alignLeft	기준뷰 ID	기준뷰의 왼쪽과 해당뷰의 왼쪽을 일치시킨다.
layout_alignRight	기준뷰 ID	기준뷰의 오른쪽과 해당뷰의 오른쪽을 일치시킨다.
layout_alignStart	기준뷰 ID	기준뷰의 왼쪽과 해당뷰의 왼쪽을 일치시킨다. ( = layout_alignStart)
layout_alignEnd	기준뷰 ID	기준뷰의 오른쪽과 해당뷰의 오른쪽을 일치시킨다. ( = layout_alignEnd)
layout_alignBaseline	기준뷰 ID	기준뷰의 베이스라인과 해당뷰의 베이스라인을 일치시킨다.
layout_alignParentTop	true or false	부모뷰의 상단과 해당뷰의 상단을 일치시킨다.
layout_alignParentBottom	true or false	부모뷰의 하단과 해당뷰의 하단을 일치시킨다.
layout_alignParentLeft	true or false	부모뷰의 왼쪽과 해당뷰의 좌측을 일치시킨다.
layout_alignParentRight	true or false	부모뷰의 오른쪽과 해당뷰의 오른쪽을 일치시킨다.
layout_alignParentStart	true or false	부모뷰의 왼쪽과 해당뷰의 왼쪽을 일치시킨다.
layout_alignParentEnd	true or false	부모뷰의 오른쪽과 해당뷰의 오른쪽을 일치시킨다.
layout_centerHorizontal	true or false	부모뷰의 가로 중앙에 정렬시킨다.
layout_centerInParent	true or false	부모뷰의 정가운데 정렬 시킨다.
layout_centerVertical	true or false	부모뷰의 세로 중앙에 정렬 시킨다.

속성값이 참 많네요... 제 타이핑 실력이 많이 늘어나는 느낌입니다. ㅎㅎ

간단하게 볼 수 있도록 화면도 같이 보는게 좋을거 같네요

아래 그림은 위의 속성을 모두 한번에 표현해 본것인데요

으아...... 뭔가 더 복잡해졌습니다. 

이름이 비슷한 속성끼리 모아서 다시 한 번 보겠습니다

우선 layout_above, layout_below 입니다.

속성명	설명	기준뷰	TEXT
layout_above	기준뷰의 상단에 해당뷰의 하단과 일치시킨다.	VIEW 1	VIEW 2
layout_below	기준뷰의 하단에 해당뷰의 상단을 일치시킨다.	VIEW 1	VIEW 3

기준뷰 (View1)을 기준으로 각각 상단과 하단에 위치시킵니다.

그리고 layout_toStartOf, layout_toEndOf, layout_toLeftOf, layout_toRightOf, 입니다.

속성명	설명	기준뷰	TEXT
layout_toStartof	기준뷰의 왼쪽에 해당뷰의 오른쪽을 일치시킨다.	VIEW 1	VIEW 4
layout_toEndOf	기분뷰의 오른쪽에 해당뷰의 왼쪽을 일치시킨다.	VIEW 1	VIEW 5
layout_toLeftOf	기준뷰의 왼쪽에 해당뷰의 오른쪽을 일치시킨다. ( = layout_toStartOf)	VIEW 1	VIEW 6
layout_toRightOf	기준뷰의 오른쪼에 해당뷰의 왼쪽을 일치시킨다. ( = layout_toendOf)	VIEW 1	VIEW 7

위의 그림에서 사실 view4와 view6, view5와 view7은 서로 겹쳐서 원래

화면엔 view6과 view7 밖에 보이지 않았습니다.

xml에서 그림을 그릴때 안드로이드는 가장 첫줄부터 차례대로 읽어 내려가면서 그림을 그립니다.

따라서 특별한 위치 지정이 없어 그림 그리는 위치가 같을 경우

나중에 지정된 뷰가 이전에 뷰를 덮어 버리는 현상이 있습니다.

위의 그림도 마찬가지 입니다.

layout_toStartOf와 layout_toLeftOf는 결과적으로 나타내는 위치가 동일하기 때문에

나중에 기술한 VIEW6 이 VIEW4를 덮어서 보이지 않지만,

위 그림 처럼 보이게 하기 위해서 view6과 view7에는 또다른 속성을 하나 더 넣어 주었습니다.

바로 layout_below 입니다. 기준뷰로는 각각 view4와 view5를 사용했구요

다음은 layout_alignTop, layout_alignBottom, layout_alignLeft, layout_alignRight, layout_alignStart, layout_alignEnd, layout_alignBaseLine 입니다.

속성명	설명	기준뷰	TEXT
layout_alignTop	기준뷰의 상단과 해당뷰의 상단을 일치시킨다.	VIEW 1	VIEW 8
layout_alignBottom	기준뷰의 하단과  해당뷰의 하단을 일치시킨다.	VIEW 1	VIEW 9
layout_alignLeft	기준뷰의 왼쪽과 해당뷰의 왼쪽을 일치시킨다.	VIEW 1	VIEW 10
layout_alignRight	기준뷰의 오른쪽과 해당뷰의 오른쪽을 일치시킨다.	VIEW 1	VIEW 11
layout_alignStart	기준뷰의 왼쪽과 해당뷰의 왼쪽을 일치시킨다. ( = layout_alignStart)	VIEW 1	VIEW 12
layout_alignEnd	기준뷰의 오른쪽과 해당뷰의 오른쪽을 일치시킨다. ( = layout_alignEnd)	VIEW 1	VIEW 13
layout_alignBaseLine	기준뷰의 베이스라인과 해당뷰의 베이스라인을 일치시킨다.	VIEW 1	VIEW 14

역시나 비슷한 기능을 하는 녀석들이 있네요

마찬가지로 겹쳐서 가려지는 부분이 발생하기 때문에 layout_below로 모두 보이게끔 하였습니다.

지금까지 기준뷰는 뷰그룹안에 있는 어떠한 뷰 였습니다.

따라서 속성값이 기준뷰의 ID였습니다.

하지만 아래에서 나올 녀석들은 속성값이 true 또는 false 로 위와는 다릅니다.

해당 속성들은 기준뷰에 상관없이 부모 뷰그룹에만 관계가 있습니다.

layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignRight, layout_alignParentStart, layout_alignParentEnd 입니다.

속성명	설명	기준뷰	TEXT
layout_alignParentTop	부모뷰의 상단과 해당뷰의 상단을 일치시킨다.	VIEW 1	VIEW 15
layout_alignParentBottom	부모뷰의 하단과 해당뷰의 하단을 일치시킨다.	VIEW 1	VIEW 16
layout_alignParentLeft	부모뷰의 왼쪽과 해당뷰의 좌측을 일치시킨다.	VIEW 1	VIEW 17
layout_alignParentRight	부모뷰의 오른쪽과 해당뷰의 오른쪽을 일치시킨다.	VIEW 1	VIEW 18
layout_alignParentStart	부모뷰의 왼쪽과 해당뷰의 왼쪽을 일치시킨다.	VIEW 1	VIEW 19
layout_alignParentEnd	부모뷰의 오른쪽과 해당뷰의 오른쪽을 일치시킨다.	VIEW 1	VIEW 20

마지막으로 중앙정렬과 관계된 3가지 속성입니다.

layout_centerHorizontal, layout_centerInParent, layout_centerVertical

속성명	설명	기준뷰	TEXT
layout_centerHorizontal	부모뷰의 가로 중앙에 정렬시킨다.	VIEW 1	VIEW 21
layout_centerInParent	부모뷰의 정가운데 정렬 시킨다.	VIEW 1	VIEW 22
layout_centerVertical	부모뷰의 세로 중앙에 정렬 시킨다.	VIEW 1	VIEW 23

모두 속성 직관적으로 되어있어 금방 이해하기 쉽습니다.

마지막으로 RelativeLayout의 속성에서 반드시 알고 넘어가야 할 부분이 있습니다.

바로 속성의 유연성입니다.

'웹툰 바로가기' 에서 보면

TextView 의 크기가 ImageView 보다 작아서 텍스트가 이미지의 중앙 하단에 위치하도록 하는 것이 어려웠었죠

뷰들은 기본적으로 아무 설정이 왼쪽 상단으로 정렬이 되도록 되어 있습니다.

따라서 두개의 가로길이다 다른 뷰가 왼쪽정렬이 되어 있었던 경우이죠

(아래 그림에서 보면 View1과 View3의 관계 였네요)

이때 두가지 속성을 중첩 적용하여 TextView의 크기를 ImageView와 동일하게 늘려서 텍스트가 중앙에 위치 할 수 있도록 하였습니다.

예를 들어 봅시다

아래 그림에서 View2의 세로 길이와 View3의 가로 길이를 View1의 크기에 맞게 늘이려면 어떻게 해야 할까요?

<Button
    android:id="@+id/btnView1"
    android:text="View 1"
    android:textStyle="bold"
    android:background="#FFFF00"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:gravity="center"
    android:layout_centerInParent="true"
    />

<Button
    android:text="View 2"
    android:textStyle="bold"
    android:textColor="#FFFFFF"
    android:background="#8877FF"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:gravity="center"
    android:layout_toStartOf="@id/btnView1"
    android:layout_alignTop="@+id/btnView1"
    />

<Button
    android:text="View 3"
    android:textStyle="bold"
    android:textColor="#FFFFFF"
    android:background="#8877FF"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:gravity="center"
    android:layout_below="@id/btnView1"
    android:layout_alignLeft="@+id/btnView1"
    />

실행하면 아래 그림과 같은 화면이 나오게 됩니다.

View2, View3를 지정할 때 View1의 크기와 동일하게 맞출 수도 있겠지만

추천하는 방법이 아닙니다.

요즘 스마트기기의 장비의 크기는 천차만별이어서 각각의 뷰에 크기를 지정하면, 여러 기기에서 모두 대응을 할 수가 없습니다.

이때 아래와 같이 사용 할 수 있습니다.

<Button
    android:id="@+id/btnView1"
    android:text="View 1"
    android:textStyle="bold"
    android:background="#FFFF00"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:gravity="center"
    android:layout_centerInParent="true"
    />

<Button
    android:text="View 2"
    android:textStyle="bold"
    android:textColor="#FFFFFF"
    android:background="#8877FF"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:gravity="center"
    android:layout_toStartOf="@id/btnView1"
    android:layout_alignTop="@+id/btnView1"
    android:layout_alignBottom="@id/btnView1"
    />

<Button
    android:text="View 3"
    android:textStyle="bold"
    android:textColor="#FFFFFF"
    android:background="#8877FF"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:gravity="center"
    android:layout_below="@id/btnView1"
    android:layout_alignLeft="@+id/btnView1"
    android:layout_alignRight="@id/btnView1"
    />

차이점을 찾으 셨나요??

View2와 View3 각각 맨 아랫줄에 한줄씩 더 추가 하여 주었습니다.

그럼 아래 그림처럼 쭉~ 늘어나게 됩니다.

위와 같은 방법은 스마트본 가로보기에서 세로보기로 크기 변화가 일어나거나 할경우 유용하게 사용할 수 있습니다.

입력 버튼은 크기를 고정하여 먼저 위치를 고정시켜 놓고 입력 받는 뷰를 위와 같이 설정 한다면

굉장히 유연한 프로그램이 되겠죠

다음 포스팅에서는 gravity 속성값들에 대해서 알아 보도록 하겠습니다~