[Android, Kotlin] 레이아웃 (2) RelativeLayout

Android/Kotlin

[Android, Kotlin] 레이아웃 (2) RelativeLayout

겨울시인 2022. 5. 6. 13:53

RelativeLayout 에 대해서 알아보자.

Layout : 앱 화면을 기본 바탕으로 생각했을때 그 안에서 본인이 그리고자 하는 기본 틀
Relative : 사전적 의미로 "상대적인" 되시겠다.

RelativeLayout:

ViewGroup의 하위 클래스로 View 간의 상대적인 배치 방식을 정의함.

View 의 위치(position)를 특정하고자 할때 자신의 부모(Parent) 또는 형제(Sibling)와의 상대적인 위치로 정의한다.

RelativeLayout 장, 단점

자신이 어떻게 화면을 구성할지에 따라 우리는 레이아웃에 대해 고민하게 된다. LinearLayout 구성이 편할때가 있고 때로는 Relative/ConstraintLayout이 더 적합한 상황이 있을 수 있다. 레이아웃은 혼합해서 사용하는 것이 가능하니 원하는 화면 구성이 있다면 일단 대략적으로라도 사용할 레이아웃을 미리 생각해 놓는것이 필수적이다.

RelativeLayout 의 장점은 무엇일까?

앞서 살펴봤던 LinearLayout에서는 View 가 스택에 쌓이듯 순차적인 방향성을 가진것을 알수 있었고 선후관계에 있어 그 규칙을 어길수가 없다. 그에 반해 RelativeLayout 은 상대적으로 자유롭다!
모든 View 의 Position을 특정할 때 혼자서 존재하는 것이 아니라 상대가 필요하다(Relative)
상대(부모 또는 형제 View)를 기준으로 위치를 특정하기 때문에 코딩의 순서가 중요하지 않고 정해진 규칙성이 덜하기에 자유롭다.

그에 따른 단점은?

코드의 가독성이 떨어질 수 있다.
단순한 배치라면 상관없겠지만 만약 복잡한 View 들을 상대적으로만 배치하고자 한다면 각 View 마다의 상대적 위치를 찾아야 하기 때문에 오히려 다른 Layout 보다 복잡하게 느껴질 수 있음을 염두해 두어야 한다.

Positioning 속성 (1)

layout_above : 기준 View의 위쪽
layout_below : 기준 View의 아래쪽
layout_centerInParent = layout_centerhorizontal + layout_centerVertical : (수평중간) + (수직중간) = 부모의 정중앙
layout_toStartOf (= layout_toLeftOf ) : 기준 View의 왼쪽
layout_toEndOf (= layout_toRightOf ) : 기준 View의 오른쪽

주의할 점(1)

상대 속성값의 기본 (Default) 으로 RelativeLayout 에서는 Left 와 Top 을 가진다.

예를 들어, 실제 기준 View의 바로 아래에 위치하고자 below 로 설정했어도 "Left" 가 남아있어 실제 적용값은 Left&below 가 되니 이와 같은 부분은 참고하여 속성값을 주어야 내가 원하는 위치에 정확히 배치가 가능하다.

주의할 점(2)

Start = Left / End = Right 의 결과가 같지만 일반적으로 Start 또는 End를 사용하는 것을 권장한다.

그 이유는 한국어와 같이 LTR(Left to right) 왼쪽에서 오른쪽으로 글자를 읽고쓰는 언어에서는 Start=Left/End=Right 가 통용되지만 RTL(Right to Left)와 같이 방향을 반대로 읽고 쓰는 언어를 쓰는 곳이라면 반대가 되므로 혼동을 초래할 수 있기에 방향에 상관없이 보다 명확한 의미를 주기 위해서는 layout_toStartOf / layout_toEndOf 를 쓰도록 하자.

<?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=".MainActivity">
    <TextView
        android:id="@+id/tv_awesome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#ED4A4A"
        android:text="겨울시인"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
    <TextView
        android:id="@+id/layout_above"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="layout_above"
        android:layout_above="@id/tv_awesome"/>
    <TextView
        android:id="@+id/layout_below"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="layout_below"
        android:layout_below="@id/tv_awesome"/>
    <TextView
        android:id="@+id/layout_toStartOf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="layout_toStartOf"
        android:layout_toStartOf="@id/tv_awesome"/>

    <TextView
        android:id="@+id/layout_toEndOf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="layout_toEndOf"
        android:layout_toEndOf="@id/tv_awesome"/>

</RelativeLayout>

Positioning 속성 (2)

layout_alignParentStart ( = layout_alignParentLeft ) : 기준 View = 부모, 부모의 시작점(왼쪽)
layout_alignParentEnd ( = layout_alignParentRight ) : 기준 View = 부모, 부모의 끝점(오른쪽)
layout_alignParentTop : 기준 View = 부모, 부모의 맨위
layout_alignParentBottom : 기준 View = 부모, 부모의 맨아래
layout_alignWithParentIfMissing : 기준 View가 없을 경우 그 부모를 기준 View로 설정한다.

Ex) layout_alignWithParentIfMissing : 기준 View 가 visibility 속성을 사용할 경우, 속성값에 따라 참조 가능-> 참조 불가능으로 상태가 변화할 경우를 대비하기 위한 경우에 사용 가능하다.

주의할 점

마찬가지로 속성값의 기본 (Default) 으로 Left 와 Top 을 가지고 있다는 것을 명심하자.

<?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=".MainActivity">
    <TextView
        android:id="@+id/tv_awesome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#ED4A4A"
        android:text="겨울시인"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
    <TextView
        android:id="@+id/layout_alignParentTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="Top_center"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"/>
    <TextView
        android:id="@+id/layout_alignParentBottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="Bottom_center"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>
    <TextView
        android:id="@+id/layout_alignParentStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="ParentStart"
        android:layout_centerHorizontal="true"
        android:layout_alignParentStart="true"/>
    <TextView
        android:id="@+id/layout_alignParentEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="ParentEnd "
        android:layout_centerHorizontal="true"
        android:layout_alignParentEnd ="true"/>
</RelativeLayout>

Positioning 속성 (3)

한 변의 기준으로 하는 정렬

layout_alignStart ( = layout_alignLeft ) : 기준 View의 왼쪽 변을 기준으로 정렬
layout_alignEnd ( = layout_alignRight) : 기준 View의 오른쪽 변을 기준으로 정렬
layout_alignTop : 기준 View의 윗변을 기준으로 정렬
layout_alignBottom : 기준 View의 아랫변을 기준으로 정렬

<?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=".MainActivity">
    <TextView
        android:id="@+id/tv_awesome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#ED4A4A"
        android:text="겨울시인"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
    <TextView
        android:id="@+id/layout_alignStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="layout_alignStart"
        android:layout_alignStart="@id/tv_awesome"/>
    <TextView
        android:id="@+id/layout_alignEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:background="#4AACED"
        android:text="layout_alignEnd"
        android:layout_alignParentBottom="true"
        android:layout_alignEnd="@id/tv_awesome"/>
    <TextView
        android:id="@+id/layout_alignTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:background="#4AACED"
        android:text="alignTop"
        android:layout_alignTop="@id/tv_awesome"/>
    <TextView
        android:id="@+id/layout_alignBottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#4AACED"
        android:text="alignBottom"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/tv_awesome"/>

</RelativeLayout>

Positioning 속성 (4)

layout_alignBaseline : 기준 View의 폰트 기준선(Baseline)을 기준으로 View 폰트 기준을 잡는다.

마지막으로..

Android 에서 레이아웃은 크게 3가지.
그 중 두번째 RelativeLayout 주요 속성들에 대해 알아보았다.

LinearLayout 링크 참고

RelativeLayout

ConstraintLayout (포스팅 예정..)

저작자표시