[깡샘의 코틀린 프로그래밍] 정리 22 - RelativeLayout

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

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

 

 

 

22장. 레이아웃 및 사용자 이벤트 처리

 

22.1.2. RelativeLayout

 

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

 

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

 

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

 

 

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

 

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

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

03 …>

04   <ImageView

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

06   <TextView

07     android:id="@+id/name"

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

09   <TextView

10     android:id="@+id/content"

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

12   <TextView

13     android:id="@+id/date"

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

15 </RelativeLayout>

 

먼저, RelativeLayout에 프로필 사진을 위한 ImageView를 표시한 다음, 사진 오른쪽에 이름을 표시하고자 첫 번째 TextView에 layout_toRightOf="@id/icon"으로 설정했습니다. 그리고 이름 아래에 내용을 표시하고자 두 번째 TextView에 layout_below="@id/name"을 설정했습니다. 마지막으로 날짜를 이름 오른쪽에 표시하고자 세 번째 TextView에 layout_toRightOf="@id/ name"을 설정했습니다. 그리고 기준이 되는 상대 뷰를 지칭하고자 모든 뷰에i d 속성을 지정했습니다

 

 

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

 

align 속성

 

RelativeLayout에서 뷰를 배치할 때 layout_above , layout_below, layout_toLeftOf, layout_toRightOf 속성도 중요하지만, 기준이 되는 뷰와 왼쪽 변을 맞추거나 윗변을 맞추는 등의 작업도 중요 합니다. 이름과 내용이 위아래로 배치되었지만, 이름과 내용의 왼쪽 변을 맞추어 정렬해야 합니다. 또 이름과 날짜가 옆 방향으로 잘 배치되었지만, 날짜의 폰트 크기가 이름보다 작습니다. 이때 대부분 문자열하단을 맞추는 게 일반적입니다. 이 부분을 지원하기 위한 속성이a lign입니다.

 

• android:layout_alignTop 기준 뷰와 윗부분을 정렬
• android:layout_alignBottom 기준 뷰와 아랫부분을 정렬
• android:layout_alignLeft 기준 뷰와 왼쪽을 정렬
• android:layout_alignRight 기준 뷰와 오른쪽을 정렬
• android:layout_alignBaseline 기준 뷰와 텍스트 기준선을 정렬

 

align 속성값은 기준이 되는 뷰의 id 값입니다. 다음은 content, date 두 TextView에 align 속성을 지정한 예입니다.

 

01 <TextView

02   android:id="@+id/content"

03   android:layout_below="@id/name"

04   android:layout_alignLeft="@id/name"…/>

05 <TextView

06   android:id="@+id/date"

07   android:layout_toRightOf="@id/name"

08   android:layout_alignBaseline="@id/name"…/>

 

content는 name과 왼쪽 변(layout_alignLeft)을 맞추도록 설정했으며, date는 name과 문자열 기준선(layout_alignBaseline)을 맞추도록 설정했습니다.

 

 

alignParentXXX 속성

 

앞서 align 속성 지정 결과를 보면 name과 content가 왼쪽 정렬되었고, name과 date가 기준선 정렬 되었습니다. 여기에 하나를 더 추가해 보겠습니다. date의 경우 name 오른쪽에 잘 배치되었고 name과 기준선을 맞추었지만, 궁극적으로 원했던 건 date가 화면 오른쪽에 딱 달라붙는 것이었습니다. 이는 layout_marginLeft 값으로 name과 간격을 주어 오른쪽으로 밀면 되지 않나 싶지만, 안드로이드 스마트폰의 크기는 다양해서 어떤 스마트폰에서는 화면에서 안 보일 수도 있고, 어떤 스마트폰에서는 화면 오른쪽이 너무 많이 남을 수 있는 문제가 있습니다. R elativeLayout으로 뷰를 배치할 때 특정 뷰를 RelativeLayout 영역의 상하좌우로 밀 수 있는 속성이 alignParentXXX입니다.

 

• android:layout_alignParentTop 부모의 윗부분에 뷰의 상단을 위치
• android:layout_alignParentBottom 부모의 아랫부분에 뷰의 하단을 위치
• android:layout_alignParentLeft 부모의 왼쪽에 뷰의 왼쪽을 위치
• android:layout_alignParentRight 부모의 오른쪽에 뷰의 오른쪽을 위치
• android:layout_centerHorizontal 부모의 가로 방향 중앙에 뷰를 위치
• android:layout_centerVertical 부모의 세로 방향 중앙에 뷰를 위치
• android:layout_centerInParent 부모의 가로세로 중앙에 뷰를 위치

영역 어디에 뷰를 정렬할 것인가를 지정하는 속성이므로 값은 "true"로 설정합니다.

 

01 <TextView

02 android:id="@+id/date"

03 android:layout_alignParentRight="true"

04 android:layout_alignBaseline="@id/name"…/>