로그인 바로가기 하위 메뉴 바로가기 본문 바로가기
난이도
심화

안드로이드 앱 프로그래밍

임시 이미지 정재곤
http://www.boostcourse.org/mo316/notice/2589
좋아요 1439 수강생 20255
아래의 글은 BOOSTER 서포터즈로 활동했던 김구라니(rbfks1***)님이
작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
1)링크: https://blog.naver.com/rbfks1221/221795254137
2)작성날짜: 20/02/03
<본문작성>

1. 레이아웃 만들기

5. 상대 레이아웃

[부스트코스] 안드로이드 프로그래밍

1) 상대 레이아웃 (RelativeLayout)

[LECTURE] 1) 상대 레이아웃 (RelativeLayout) : edwith

들어가기 전에 리니어 레이아웃이 동작하는 방식을 이해했다면 레이아웃을 만드는 것이 그리 어렵지 않을 것입니다. 그런데 화면의 위와 아래쪽에 작은 뷰를 두고 그 뷰 사이에 꽉 차게 ... - 부스트코스

www.edwith.org


들어가기 전에

​

리니어 레이아웃이 동작하는 방식을 이해했다면 레이아웃을 만드는 것이 그리 어렵지 않을 것입니다.

그런데 화면의 위와 아래쪽에 작은 뷰를 두고 그 뷰 사이에 꽉 차게 다른 뷰를 넣어보려 하면 리니어 레이아웃으로 쉽게 안 되는 것도 있구나 하는 생각이 들 겁니다.

상대 레이아웃을 사용하면 화면의 위, 아래에 뷰를 붙일 수도 있고 다른 뷰의 옆에도 붙일 수 있습니다.

상대 레이아웃이 어떤 것인지 알아봅시다.


학습 목표

​

1) 상대 레이아웃이 어떤 것인지 이해하고 간단한 몇 개의 뷰를 추가해봅시다.

2) 상대 레이아웃 안에 넣은 뷰에 추가할 수 있는 대표적인 속성들이 어떻게 적용되는지 설명해봅시다.


핵심 단어

​

· 상대 레이아웃

· 부모 레이아웃과의 상대적 위치

· 다른 뷰와의 상대적 위치


학습하기

상대 레이아웃(RelativeLayout) 이란?

상대 레이아웃(RelativeLayout)은 뷰를 담고 있는 부모 레이아웃이나 그 안에 들어있는 다른 뷰들과의 상대적인 위치를 이용하여 화면을 배치하는 레이아웃입니다.

​

상대 레이아웃 사용 방식

지난 강의의 생각해보기 문제 중에

"화면의 위, 아래 끝에 작은 뷰를 배치하고 싶다면 리니어 레이아웃을 쓰는 것보다 더 좋은 방법이 있을까요?"

라는 질문이 있었습니다.

​

"상대 레이아웃(RelativeLayout)을 사용한다." 가 이 문제의 좋은 해답이 될 수 있죠!

​

상대 레이아웃(RelativeLayout)을 사용할 경우 화면 위, 아래쪽에 뷰를 배치하고 싶다면,​

layout_alignParentBottom, layout_alignParentTop 속성 값을 true로 설정하는 것만으로도 충분히 가능합니다.

​

그러나 리니어 레이아웃(LinearLayout)을 사용한다면, 뷰들을 위에서부터 차곡차곡 쌓아야만 가장 아래쪽까지 배치할 수 있죠.

​

이렇게 효과적인 화면 구성을 위해서는 상황에 알맞은 레이아웃을 잘 골라 사용할 수 있는 안목이 필요하답니다!

상대 레이아웃(RelativeLayout)을 이용한 뷰의 배치

상대 레이아웃 안에서 뷰들을 배치할 때는

같은 레이아웃 안에 들어있는 다른 뷰와의 상대적인 위치를 이용하게 됩니다.

​

역시 이와 관련된 다양한 속성들이 있는데요.

부모 레이아웃과의 상대적인 위치를 지정할 때

다른 뷰와의 상대적 위치를 지정할 때

layout_alignParentTop

layout_toLeftOf

layout_alignParentBottom

layout_toRightOf

layout_alignParentLeft

layout_alignTop

layout_alignParentRight

layout_alignBottom

layout_centerInParent

layout_below

​

layout_above

이 외에도 더 많은 속성들이 있으니 필요할 때 찾아서 사용하시면 된답니당 ㅎ.ㅎ

​

상대 레이아웃을 이용한 뷰의 배치 방법

​

예를 들어 위 그림처럼 화면을 구성하고 싶다면,

​

구현 결과

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginStart="20dp" android:layout_marginTop="70dp" android:layout_marginEnd="20dp" android:text="A" android:textSize="30sp" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/button" android:layout_alignEnd="@+id/button" android:layout_marginTop="100dp" android:text="B" android:textSize="30sp" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/button2" android:layout_marginEnd="50dp" android:layout_toStartOf="@+id/button2" android:text="C" android:textSize="30sp" /> </RelativeLayout>

이런 식으로 상대 레이아웃(RelativeLayout)의 다양한 속성들을 사용하면 되지 않을까 싶어요!

위, 아래 뷰를 두고 가운데 꽉 차게 배치하기

​

그렇다면 위, 아래에는 버튼 등의 뷰를 두고, 가운데의 뷰는 꽉 차게 만들고 싶다면 어떻게 해야 할까요?

​

먼저 상대 레이아웃(RelativeLayout)을 사용하여,

위쪽에 있는 뷰에는 ​layout_alignParentTop 속성과

android:layout_alignParentTop="true"

아래쪽에 있는 뷰에는 layout_alignParentBottom 속성

android:layout_alignParentBottom="true"

을 지정합니다.

​

그리고 가운데 뷰의 ​layout_height 속성 값을 match_parent로 지정하고,

android:layout_height="match_parent"

layout_above와 layout_below 속성을 추가로 지정하면,

android:layout_below="@+id/button_top" android:layout_above="@+id/button_bottom"

위, 아래의 뷰와 상관없이 가운데에 남아있는 공간이 뷰로 가득 채워진답니다!

​

구현 결과

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button_top" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:text="TOP" android:textSize="25sp"/> <Button android:id="@+id/button_center" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/button_bottom" android:layout_below="@id/button_top" android:background="#2196F3" android:text="CENTER" android:textSize="25sp" /> <Button android:id="@+id/button_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="BOTTOM" android:textSize="25sp"/> </RelativeLayout>

생각해보기

​

1. 상대 레이아웃을 잘 사용할 수 있다면 다른 레이아웃은 필요 없는 걸까요?

​

상대적인 위치로 뷰들을 배치하고 싶은 것이 아닌, 단순히 같은 성격의 뷰들을 나열하고 싶은 경우라면

리니어 레이아웃(LinearLayout)이 훨씬 편리할 것이고,

​

화면의 전환이 필요한 경우라면 프레임 레이아웃(FrameLayout)을 써야 할 겁니다.

​

이렇게 상황이나 쓰임새에 맞는 레이아웃을 사용해야 효율적으로 화면을 구성할 수 있어요!

​

2. 리니어 레이아웃과 상대 레이아웃을 잘 조합해서 사용하는 방법을 생각해보세요.

​

전체적인 화면 구성을 봤을 때 위에서 아래로 각각의 뷰들이 쌓여있고 그 안에는 여러 개의 뷰를 상대적으로 배치해야하는 경우라면, 큰 틀을 리니어 레이아웃(LinearLayout) vertical로 잡은 뒤 그 안에 상대 레이아웃(RelativeLayout)을 넣는 방법이 굉장히 좋을 것 같네요!

​

3. 화면에 보이는 뷰들의 일부가 겹쳐있도록 만들 수도 있을까요?

 

뷰의 마진 값들을 조정하면, 겹쳐 보이게 만들 수 있습니다.


다음 포스팅에서는 프레임 레이아웃(FrameLayout)과 뷰의 전환에 대해 알아보도록 할게요!

 

*********************************************