[깡샘의 안드로이드 프로그래밍] 정리 6 - Relative Layout

본 글은 [깡샘의 안드로이드 프로그래밍 - 루비페이퍼] 의 내용을 발췌한 것입니다.

좀더 자세한 내용은 책을 통해 확인해 주세요.

 

 

 

 

4장. 레이아웃을 활용한 다양한 뷰 배치

 

4.2.1. RelativeLayout

 

RelativeLayout은 화면에 이미 배치된 뷰를 기준으로 다른 뷰의 위치를 지정하는 레이아웃입니다.

RelativeLayout에 Button을 포함한 후 다른 Button을 포함하면, 이전 Button 위에 덮어쓰듯이 올라가게 됩니다. 이때 가로세로 방향의 orientation을 생각할 수 있는데, orientation 속성은 LinearLayout에만 지정할 수 있는 속성입니다. RelativeLayout은 뷰의 상대 위치를 지정하여 배치하며, 자동으로 가로나 세로로 나열하지는 않습니다.

 

RelativeLayout에서 상대 위치를 지정하는 속성은 다음처럼 4개를 제공합니다.

 

•  android:layout_above: 기준 뷰의 윗부분에 배치
•  android:layout_below: 기준 뷰의 아랫부분에 배치
•  android:layout_toLeftOf: 기준 뷰의 왼쪽에 배치
•  android:layout_toRightOf: 기준 뷰의 오른쪽에 배치

 

위 4가지 속성값은 기준 뷰의 id입니다. RelativeLayout의 이해를 돕기 위해서 LinearLayout에서 만든 목록 화면을 예로 들어 보겠습니다.

 

 

RelativeLayout에 직접 뷰 4개를 상대 위치로 배치해보겠습니다.

 

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView

android:id="@+id/icon"/>

<TextView

android:id="@+id/name"

android:layout_toRightOf="@id/icon"/>

<TextView

android:id="@+id/content"

android:layout_below="@id/name"/>

<TextView

android:id="@+id/date"

android:layout_toRightOf="@id/name"/>

</RelativeLayout>

 

먼저, RelativeLayout에 프로필 사진을 위한 ImageView를 표시한 다음, 사진 오른쪽에 이름을 표시하고자 첫 번째 TextView에 layout_toRightOf="@id/icon"으로 설정하였습니다. 

그리고 이름 아래에 내용을 표시하고자 두 번째 TextView에 layout_below="@id/name"을 설정하였습니다.

마지막으로 날짜를 이름 오른쪽에 표시하고자 세 번째 TextView에 layout_toRightOf="@id/name"을 설정하였습니다. 

그리고 기준이 되는 상대 뷰를 지칭하고자 모든 뷰에 id 속성을 지정하였습니다

 

 

RelativeLayout을 사용한 결과를 보면 전체 배치는 되었는데 화면이 이상합니다. 사람 이름 하위에 내용 문자열이 배치되긴 했지만, 화면 왼쪽으로 밀려 프로필 사진에 겹쳐 있습니다. 다음 절에서 이 문제를 해결해보겠습니다.