[Android] Layout3 — Relative Layout

• 본 포스트는 Kotlin 언어로 Android studio 에서 작업할 수 있는 내용을 담고 있습니다.
• 본 포스트는 Kotlin 언어에 관한 설명은 없습니다. Kotlin에 관한 내용은 저의 다른 포스트를 참고해주시면 감사하겠습니다.

dEpayse_publication

Relative Layout

Relative Layout은 포함하는 뷰들이 서로의 상대적인 위치에 따라서 배치되는 레이아웃이다. Fig1는 gravity가 center일 때 Relative Layout에서 어떻게 뷰를 배치할 수 있는지 나타낸 애니메이션이다.

Fig1. Relative Layout Animation

사용법

xml에서 Relative Layout 사용하기

Fig2. xml에서 RelativeLayout사용

xml상에서 RelativeLayout을 사용하는 방법은 간단하다. 가장 바깥의 레이아웃이 아니라면, RelativeLayout은 Fig2처럼 필수 속성인 layout_width와 layout_height 값만 주고, <RelativeLayout>과 </RelativeLayout>사이에 View들을 배치하면 된다.

kotlin 파일에서 Relative Layout 사용하기

Fig3–1. Kotlin 파일에서 RelativeLayout 추가

Fig3–2. Fig3–1실행 결과

Fig3–1은 코드에서 Relative Layout을 추가하는 방법이다. Activity를 생성했을 때 보이는 기본적인 코드에 관한 내용은 아래 링크된 포스트의 ‘생성된 Activity 살펴보기 파트’를 참고하자.

[Android] Activity

코드는 relativeLayout 을 화면에 추가하는 코드이고, 추가할 relativeLayout은 가장 바깥의 relativeLayout_outer라는 id를 갖는 relativeLayout에 들어간다. Layout 객체나 View객체를 생성한 후에는 addView()함수를 이용하여 추가해줘야한다. LayoutParams에 관련된 내용은 아래 포스트를 참조하자.

[Android] Layout1 — ViewGroup

주요 속성

1. Relative Layout의 속성을 이용하기 전에 알아야 할 내용이 있다. Relative Layout은 어떤 View를 기준으로 상대적인 위치에 배치하는 방법을 사용하기 때문에, 기준으로 삼을 View를 나타내는 수단으로 id속성을 사용한다. View에 Id를 지정해주는 방법은 다음과 같다.

• android:id=“@+id/아이디 이름”

android의 xml 파일에서 “@”가 의미하는 것은 “~에” 라는 위치의 의미이다. “+”가 의미하는 것은 id를 관리하는 클래스에 새로 지정한 아이디를 추가하겠다는 뜻이다. 다른 View에서 기준 View를 표시할 땐 “+”기호 없이 사용하면 된다.

2. 왼쪽, 오른쪽에 관련된 속성을 사용할 때 Left, Start 와 Right, End라는 단어들을 접하게되는데, Start와 End는 나라마다 기준이 다르다. 우리나라는 왼쪽에서 오른쪽으로 글을 쓰고 읽기 때문에 Start는 Left와 같은 의미가 되고, End는 Right와 같은 의미가 되지만 몇몇 나라는 반대인 경우도 있다.

다른 View의 상하좌우, 대각선에 배치

Fig4. 다른 뷰의 상하좌우, 대각선에 배치

Fig4는 Relative Layout에서 다른 뷰의 상하좌우, 대각선에 배치한 결과를 보여준다. Relative Layout의 특성을 보여주기 위한 속성을 제외하고 다른 속성은 생략했다. layout xml에서 다음과 같은 속성을 사용하여 Relative Layout의 View를 다른 View의 상하좌우에 배치할 수 있다. 속성 값으로는 기준이 되는 View의 id를 입력하면 된다.

• 위 : layout_above
• 아래 : layout_below
• 왼쪽 : layout_toLeftOf
• 오른쪽 : layout_toRightOf

대각선에 뷰를 배치하는 방법은 위 속성 중 두 가지를 같이 사용하여 가능하다. Fig4와 같이 배치하기 위해 layout_centerInParent 속성을 true로 모든 View에 적용하였다. 이 속성은 다음 part에 바로 등장하므로 어떤 속성인지 바로 알 수 있겠지만, 적용시킨 이유는 주의할 점 part에서 확인할 수 있다.

부모 View내의 상하좌우, 대각선, 중앙에 배치

Fig5. 부모 View내의 상하좌우, 대각선, 중앙에 배치

Fig5는 Relative Layout에서 부모 뷰 안에서 상하좌우, 대각선과 중앙에 배치한 결과를 보여준다. Relative Layout의 특성을 보여주기 위한 속성을 제외하고 다른 속성은 생략했다. layout xml에서 다음과 같은 속성을 사용하여 Relative Layout의 View를 부모 View의 상하좌우와 중앙에 배치할 수 있다. 속성 값으로는 true, false를 입력하면 된다.

• 위 : layout_alignParentTop
• 아래 : layout_alignParentBottom
• 왼쪽 : layout_alignParentLeft
• 오른쪽 : layout_alignParentRight
• 수평선 중앙 : layout_centerHorizontal
• 수직선 중앙 : layout_centerVertical
• 수평선&수직선 중앙 : layout_centerInParent

다른 View의 상하좌우 선에 맞추기

Fig6–1. 다른 View의 상하좌우 선에 맞추기

Fig6은 Relative Layout에서 다른 뷰의 상하좌우 선에 맞춘 결과를 보여준다. Relative Layout의 특성을 보여주기 위한 속성을 제외하고 다른 속성은 생략했다. layout xml에서 다음과 같은 속성을 사용하여 Relative Layout의 View를 다른 뷰의 상하좌우 선에 맞춰서 배치할 수 있다. 속성 값으로는 기준이 되는 View의 id를 입력하면 된다.

• 위 : layout_alignTop
• 아래 : layout_alignBottom
• 왼쪽 : layout_alignLeft
• 오른쪽 : layout_alignRight

또는 TextView의 baseLine을 다른 TextView의 baseLine과 맞출 수도 있다.

• baseLine 맞추기 : layout_alignBaseLine

Fig6–2. baseLine을 다른 뷰의 baseLine과 맞추기

단, 이 경우 height를 wrap_content가 아닌 포함하는 내용보다 큰 사이즈를 주었을 때 예상대로 값이 나오지 않는 것을 볼 수 있었다. 이 점을 숙지하고 사용하면 좋을 것 같다.

주의할 점

Relative Layout의 기본 정렬과 gravity

Relative Layout의 기본 값은 layout_alignParentTop과 layout_alignParentStart가 true이다. 즉 Relative Layout 안의 View에 아무 설정을 하지 않았다면 View가 Relative Layout의 왼쪽 위에 배치된다.

또한 Relative Layout에서도 Linear Layout처럼 gravity 속성을 줄 수 있는데, 이 값은 생각한 것처럼 적용되지 않을 수 있다. Relative Layout의 특성상 View들이 부모 View 혹은 다른 View의 상대적인 위치에 배치되는데, gravity 값도 View마다 개별 적용된다면 위치 속성이 겹칠 수 있다. Relative Layout은 상대적인 위치가 더 중요하기 때문에, Relative Layout의 gravity는 View들을 Relative Layout의 배치가 끝난 후에 배치한 모든 View들을 하나로 묶어서 적용된다. Fig7–1의 경우를 살펴보자.

Fig7–1. Relative Layout의 기본 정렬과 gravity 예시

Fig7–1을 보면 Relative Layout에 gravity가 적용되어 있다. 가운데 View를 배치하고 그 왼쪽에 View를 배치하면 두 View가 나란히 가운데에 있을 것 같은데 결과는 다르다. 그 이유가 바로 gravity가 제일 나중에 모든 View들을 하나의 단위로 여기고 적용되기 때문이다. Fig7–2를 보면 Fig7–1이 적용되는 과정을 알 수 있다.

Fig7–2. Fig7–1이 만들어지는 과정

Fig7–2의 2번에서 left View가 왼쪽 위에 배치되는데, 그 이유가 layout_alignParentTop과 layout_alignParentStart가 true이기 때문이다. 따라서 둘을 나란히 Relative Layout의 중앙에 배치하려면 두 View에 모두 centerInParent를 true로 줘야한다. 다른 View의 상하좌우, 대각선에 배치 part에서 모든 View에 centerInParent를 true로 준 이유도 여기에 있다.

Fig7–3. Relative Layout의 기본 정렬과 gravity 예시

View 겹칠 때는 FrameLayout

Relative Layout에서 View들을 겹쳐서 보여줄 수 있다. 예를 들어, 더 큰 View 안에서 더 작은 View를 align할 때 사용자 눈에 겹쳐보인다. 그러나 Relative Layout은 View의 배치가 다른 View를 기준으로 해서 계산하여 이루어지는 경우가 많으므로 View를 배치하는데 FrameLayout보다 더 많은 연산이 이루어진다. FrameLayout은 View들을 겹쳐 여러 View들 중 하나의 View만 보여주거나, 겹친 View들을 보여줄 때 사용하는 Layout이므로 View를 겹칠 때는 FrameLayout을 사용하자.

Reference

주의할 점 part

1. [개발자를 위한 레시피] “안드로이드 렐러티브레이아웃. (Android RelativeLayout)” — https://recipes4dev.tistory.com/126
2. [Android Developer] “RelativeLayout” — https://developer.android.com/reference/android/widget/RelativeLayout.html