[Android] RelativeLayout의 속성

참고 : 한국방송통신대학교 모바일앱프로그래밍 교재( https://press.knou.ac.kr/goods/textBookView.do?condCmdtCode=9788920035999&condLscValue=001&condYr=&condSmst= )

 

---

1) RelativeLayout

• 위젯과 부모 View와의 위치 관계 또는 위젯끼리의 관계를 지정함으로써 View를 배치하는 레이아웃
• 서로 간의 위치 관계가 화면이 구성되는 결과를 결정함
• 위젯끼리 관계를 지정하려면 먼저 '누구'를 지칭하기 위한 id가 필요하므로 기준이 되는 위젯에 id를 지정해야 함
• 상대적 위치가 지정되지 않으면, 자식 View의 기본 위치는 좌측 상단이 됨

 

2) RelativeLayout의 속성

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

 

• 예시 코드 1

<?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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TARGET"
        android:layout_centerInParent="true"
        android:id="@+id/target"
        android:textSize="30sp"
        android:background="#00D8FF" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/target"
        android:text="LEFT"
        android:id="@+id/left"
        android:textSize="20sp"
        android:background="#1DDB16" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/target"
        android:text="RIGHT"
        android:id="@+id/right"
        android:textSize="20sp"
        android:background="#1DDB16" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/target"
        android:text="TOP"
        android:id="@+id/top"
        android:textSize="20sp"
        android:background="#1DDB16" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/target"
        android:text="BOTTOM"
        android:id="@+id/bottom"
        android:textSize="20sp"
        android:background="#1DDB16" />

</RelativeLayout>

• 예시 코드 1의 결과

 

• 예시 코드 2

<?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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10px"
        android:text="TARGET"
        android:layout_centerInParent="true"
        android:id="@+id/target"
        android:textSize="30sp"
        android:background="#00D8FF" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/target"
        android:text="LEFT"
        android:id="@+id/left"
        android:textSize="20sp"
        android:background="#1DDB16" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/target"
        android:text="RIGHT"
        android:id="@+id/right"
        android:textSize="20sp"
        android:background="#1DDB16" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/target"
        android:text="TOP"
        android:id="@+id/top"
        android:textSize="20sp"
        android:background="#1DDB16" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/target"
        android:text="BOTTOM"
        android:id="@+id/bottom"
        android:textSize="20sp"
        android:background="#1DDB16" />

</RelativeLayout>

• 예시 코드 2의 결과

 

• 예시 코드 3

<?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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10px"
        android:text="KNOU"
        android:id="@+id/knou"
        android:textSize="30sp"
        android:background="#00D8FF" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/knou"
        android:text="Android"
        android:id="@+id/android"
        android:textSize="15sp"
        android:textColor="#1DDB16" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10px"
        android:layout_alignParentRight="true"
        android:layout_below="@id/knou"
        android:text="SERVICE"
        android:id="@+id/service"
        android:textSize="20sp"
        android:typeface="serif" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/service"
        android:layout_toLeftOf="@id/service"
        android:text="MOBILE"
        android:id="@+id/mobile"
        android:textSize="30sp"
        android:typeface="serif" />

</RelativeLayout>

• 예시 코드 3의 결과

service를 선언하고 mobile을 선언했듯이, 일반적으로 부모의 변에 달라붙는 위젯을 먼저 선언하고 주위에 배치되는 위젯을 나중에 선언하는 것이 편함

 

3) 리소스 컴파일러와의 관계

• 리소스는 빠른 배치를 위해 위젯 간의 관계에서 읽음
• 특정 View가 다른 View의 위치에 종속적일 때 기준이 되는 View를 먼저 정의함
• 그러다 보니 화면상의 순서와 레이아웃상의 순서가 다를 수 있음

 

4) RelativeLayout 배치순서 예제

A, B라는 View가 구성된 레이아웃이 있을 때,

레이아웃을 구성하는 XML 파일 상에는 B, A 순서로 되어 있더라도,

A가 B를 레이아웃의 기준으로 layout_above 속성으로 상대적인 레이아웃을 결정한다면,

화면상에는 B의 위에 상대적으로 A가 있게 됨

 

5) RelativeLayout의 배치상의 어려움

• 여러 View 끼리의 관계를 정의하다 보면 대체되는 배치를 찾기 어렵거나 비효율적인 경우가 있음
• 이럴 경우 화면상의 순서와 일치시키기 어려움

 

6) RelativeLayout의 논리상의 문제점

• 속성들을 조합하면 논리적으로 맞지 않는 조합이 발생할 수 있으므로 순서에 유의
  • ex) A를 B 왼쪽에 놓고 B를 A 왼쪽에 놓는 배치