안드로이드(Android) 레이아웃 RelativeLayout 정리

2021. 2. 21. 19:22

Relativelayout은 View의 상대적 위치를 이용하여 위치를 설정하는 방법입니다. 상대적 위치를 이용하여 View 들을 정렬 하므로 기준이 되는 View는 ID 값 설정이 필수적 입니다.RelativeLayout은 중첩된 View 그룹을 없애고 레이아웃 계층 구조를 평면으로 유지하여 성능을 개선 하고 중첩된 LinearLayout을 대체할 수 있습니다.

1. 기준 View와의 상대적 위치

기준 View를 중심으로 추가되는 View의 위치를 위, 아래, 왼쪽, 오른쪽 등 상대적 위치에 위치 시키는 옵션 입니다. 상대적 위치의 설정 값으로 기준 View의 ID가 사용되므로 기준이 되는 View에는 꼭 아이디 값이 부여되어 있어야 합니다.

attributes	설명
android:layout_above	기준 View의 위 선에 View의 위 선을 맞춤
layout_below	기준 View의 아래 선에 View의 아래 선을 맞춤
layout_toLeftOf	기준 View의 왼쪽 선에 View의 왼쪽 선을 맞춤
layout_toRightOf	기준 View의 오른쪽 선에 View의 오른쪽 선을 맞춤

잠시 잘못된 예제를 하나 보도록 하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/cntText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:background="#F6D55C"
        android:text="중앙" />

    <TextView
       android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_above="@+id/cntText"
        android:background="#DDED553B"
        android:text="Above" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_below="@+id/cntText"
        android:background="#DDED553B"
        android:text="Below" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_toLeftOf="@+id/cntText"
        android:background="#E3AA"
        android:text="toLeftof" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_toRightOf="@+id/cntText"
        android:background="#E3AA"
        android:text="toRightof" />
</RelativeLayout>

위와 같이 기준이 되는 View가 좌측 상단에 위치하게 되면 상단과 좌측에 있는 View는 보이지 않는 영역으로 나가게 됩니다. 그래서 새로운 예제에서는 android:layout_centerInParent = "true" 를 사용하여 기준 View를 중앙에 위치 시켰고 다른 예제에서도 동일한 현상이 발생하는 경우 기준 View의 위치를 잡아주는 방법을 사용하였습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/cntText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        android:background="#F6D55C"
        android:text="중앙" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        android:layout_above="@+id/cntText"
        android:background="#DDED553B"
        android:text="Above" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        android:layout_below="@+id/cntText"
        android:background="#DDED553B"
        android:text="Below" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/cntText"
        android:background="#E3AA"
        android:text="toLeftof" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/cntText"
        android:background="#E3AA"
        android:text="toRightof" />
</RelativeLayout>

좌측, 우측 정렬을 다른 옵션을 사용하여 위치 시킬 수 있습니다. 문장의 시작 위치가 좌측이 아닌 우측에서 시작하는 국가를 위한 방안으로 정렬도 좌측, 우측이 아닌 시작과 끝으로 설정하는 방법입니다.

attributes	설명
layout_toStartOf	기준 View의 시작 선에 View의 시작 선을 맞춤
layout_toEndOf	기준 View의 끝 선에 View의 끝 선을 맞춤

2. 기준 View와 정렬

기준 View를 기준으로 좌측, 우측, 상단, 하단의 끝 선을 정렬하는 기능입니다. 예제에서는 각 정렬 별로 View를 하나씩만 표현하여 보았습니다. 끝 선을 맞추기 위하여 모든 View에는 기준이 되는 View의 ID 값인 android:layout_alignBottom="@+id/cntText" 을 포함하고 있습니다.

attributes	설명
layout_alignTop	기준 View의 위쪽 선에 View의 위쪽 선을 맞춤
layout_alignBottom	기준 View의 아래쪽 선에 View의 아래쪽 선을 맞춤
layout_alignLeft	기준 View의 왼쪽 선에 View의 왼쪽 선을 맞춤
layout_alignRight	기준 View의 오른쪽 선에 View의 오른쪽 선을 맞춤

<?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">

    <TextView
        android:id="@+id/cntText"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        android:background="#F6D55C"
        android:text="중앙" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_alignTop="@id/cntText"
        android:background="#E3AA"
        android:text="alignTop" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_alignBottom="@+id/cntText"
        android:background="#E3AA"
        android:text="alignBottom" />
    <TextView
        android:id="@+id/alignLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_alignLeft="@+id/cntText"
        android:background="#E3AA"
        android:text="alignLeft" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_below="@+id/alignLeft"
        android:layout_alignRight="@+id/cntText"
        android:background="#E3AA"
        android:text="alignRight" />
</RelativeLayout>

정렬 방법에서도 시작과 끝을 이용하여 정렬 해줄 수 있습니다. 추가로 기준 View의 텍스트를 이용하여 정렬 하는 방법도 있습니다.

attributes	설명
layout_alignStart	기준 View의 시작 선에 View의 시작 선을 맞춤
layout_alignEnd	기준 View의 끝 선에 View의 끝 선을 맞춤
layout_alignBaseline	기준 View의 Text 기준선에 맞추어 정렬

<?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">

    <TextView
        android:id="@+id/cntText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="50dp"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        android:background="#F6D55C"
        android:text="중앙" />

    <TextView
        android:id="@+id/alignStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_alignStart="@id/cntText"
        android:background="#E3AA"
        android:text="alignStart" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_below="@id/alignStart"
        android:layout_alignEnd="@id/cntText"
        android:background="#E3AA"
        android:text="alignEnd" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_below="@id/alignStart"
        android:layout_alignBaseline="@id/cntText"
        android:background="#E3AA"
        android:text="alignBaseline" />
</RelativeLayout>

3. 부모(Parent) 창 기준 정렬

부모 창의 좌측, 우측, 상단, 하단에 View을 정렬하는 방법입니다. 기준이 되는 View는 존재하지 않고 부모 창에 원하는 위치를 잡아 View를 배열하는 방법입니다. 여기서도 상대적 위치가 없으면 모든 View가 Top으로 모여 겹쳐 보이기 때문에 일부 View에 상대적 위치를 추가하여 표현하였습니다.

attributes	설명
layout_alignParentTop	true 이면 부모 창의 위쪽 선에 View의 위쪽 선을 맞춤
layout_alignParentBottom	true 이면 부모 창의 아래쪽 선에 View의 아래쪽 선을 맞춤
layout_alignParentLeft	true 이면 부모 창의 시작 선에 View의 시작 선을 맞춤
layout_alignParentRight	true 이면 부모 창의 끝 선에 View의 끝 선을 맞춤

<?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">

    <TextView
        android:id="@+id/alignParentTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_alignParentTop="true"
        android:background="#E3AA"
        android:text="alignParentTop" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_alignParentBottom="true"
        android:background="#E3AA"
        android:text="alignParentBottom" />
    <TextView
        android:id="@+id/alignParentRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_alignParentRight="true"
        android:layout_below="@id/alignParentTop"
        android:background="#E3AA"
        android:text="alignParentRight" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/alignParentRight"
        android:background="#E3AA"
        android:text="alignParentLeft" />

</RelativeLayout>

부모(Parent)창 정렬에도 시작과 끝을 이용하여 좌측, 우측 정렬을 표현할 수 있습니다.

attributes	설명
layout_alignParentStart	true 이면 부모 창의 시작 점에 View의 시작 점을 맞춤
layout_alignParentEnd	true 이면 부모 창의 끝점에 View의 끝 점을 맞춤

4. 중앙 정렬

지금까지는 어느 끝부분에 맞추어 정렬하는 방법들을 알아 보았는데 이번에는 그냥 중앙에 위치시키는 방법들입니다.

attributes	설명
layout_centerVertical	true 이면 부모 창 세로의 중앙에 위치
layout_centerHorizontal	true 이면 부모 창 가로의 중앙에 위치
layout_centerInParent	true 이면 부모 창 가로와 세로의 중앙에 위치

- copy coding -

저작자표시 비영리 변경금지

'Android' 카테고리의 다른 글

License for package Android SDK Build-Tools 29.0.2 not accepted (0)	2021.03.01
안드로이드 스튜디오 스마트폰 연결 안될 때 인식 방법 (0)	2021.02.28
안드로이드(Android) 레이아웃 LinearLayout 정리 (0)	2021.02.14
안드로이드(Android) 권한(Permission) 요청 및 획득 (8)	2021.01.25
안드로이드(Android) 핸드폰 version 정보와 API Level 확인 방법 (0)	2021.01.21

Copy Coding

안드로이드(Android) 레이아웃 RelativeLayout 정리

'Android' 카테고리의 다른 글

+ Recent posts

티스토리툴바