#8 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : RelativeLayout편

#1 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 환경 구축

#2 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 디렉토리와 파일 구조

#3 안드로이드 스튜디오로 안드로이드 앱 만들기 - 액티비티(Activity) 뷰(View) 구조

#4 안드로이드 스튜디오로 안드로이드 앱 만들기 - UI 작성 방법 : 자바코드 VS 레이아웃 XML

#5 안드로이드 스튜디오로 안드로이드 앱 만들기 - 뷰(View)의 기초 속성

#6 안드로이드 스튜디오로 안드로이드 앱 만들기 - 뷰(View)의 계층구조

#7 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : LinearLayout편

RelativeLayout 소개

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

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

■ android:layout_above : 기준 뷰의 윗부분에 배치

■ android:layout_below : 기준 뷰의 아랫부분이 배치

■ android:layout_toLeftOf : 기준 뷰의 왼쪽에 배치

■ android:layout_toRightOf : 기준 뷰의 오른쪽에 배치

RelativeLayout의 이해롤 돕기 위해서 아래 화면을 만들어보자

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
 
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"/>
 
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:text="하늘하늘"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_toRightOf="@id/icon"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="안녕하세요. 잘 지내시는 지요?"
        android:layout_below="@id/name"
        android:layout_marginTop="16dp"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="18.1.23"
        android:layout_toRightOf="@id/name"/>
 
</RelativeLayout>
 

위 속성대로 RelativeLayout을 사용한 화면을 만들었더니 결과는 다음과 같다.

이상하다.

이름 밑에 내용문자열이 배치되긴 했지만, 화면 왼쪽으로 밀려 프로필 사진에 겹쳐 있다. 이런 현상을 해결하기 위해 RelativeLayout에는 다음과 같은 align 속성들이 있다.

align 속성

RelativeLayout에서 뷰를 배치할 때 위에서 언급한 layout_above, layout_below, layout_toLeftOf, layout_toRightOf 속성도 중요하지만, 기준이 되는 뷰와 왼쪽 변을 맞추거나 윗변을 맞추는 등의 align 작업도 중요하다.

위 화면에서 이름과 내용의 왼쪽 변을 맞추어 정렬해야한다. 또 이름과 날짜가 옆 방향으로 잘 배치되었지만, 날짜의 폰트 크기가 이름보다 작다. 이때 대부분 문자열 하단을 맞추는게 일반적이다. align 속성은 다음과 같다.

■ android:layout_alignTop : 기준 뷰와 윗부분을 정렬

■ android:layout_alignBottom : 기준 뷰와 아랫부분을 정렬

■ android:layout_alignLeft : 기준 뷰와  왼쪽을 정렬

■ android:layout_alignRight : 기준 뷰와  오른쪽을 정렬

■ android:layout_alignBaseline : 기준 뷰와  텍스트 기준선을 정렬

다음은 위 화면에서 align 속성을 설정한 코드이다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
 
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"/>
 
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:text="하늘하늘"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_toRightOf="@id/icon"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="안녕하세요. 잘 지내시는 지요?"
        android:layout_below="@id/name"
        android:layout_marginTop="16dp"
        android:layout_alignLeft="@+id/name"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="18.1.23"
        android:layout_toRightOf="@id/name"
        android:layout_alignBaseline="@+id/name"/>
 
</RelativeLayout>
 

거의 다 된거같지만 뭔가하나 부족하다. 

일단 name와 content가 왼쪽 정렬 잘 되었고, name과 date도 기준선에 잘 정렬되었다. 하지만 궁극적으로 원했던 건 date가 화면 오른쪽에 딱 달라붙는 것이다.

이는 layout_marginLeft 값으로 name과 간격을 주어 오른쪽으로 밀면 되지 않나 싶지만, 안드로이드 스마트폰 크기는 다양해서 어떤 스마트폰에서는 화면에서 안 보일 수도 있고, 어떤 스마트폰에서는 화면 오른쪽이 너무 많이 남는 문제가 생긴다.

이 문제를 위해서 RelativeLayout에는 뷰를 배치할 때 특정 뷰를 RelativeLayout 영역의 상하좌우로 밀 수 있는 속성이 있다. alignParentXXX이다.

alignParentXXX 속성

■ android:layout_alignParentTop : 부모의 윗부분에 뷰의 상단을 위치

■ android:layout_alignParentBottom : 부모의 아랫부분에 뷰의 하단을 위치

■ android:layout_alignParentLeft : 부모의 왼쪽에 뷰의 왼쪽을 위치

■ android:layout_alignParentRight : 부모의 오른쪽에 뷰의 오른쪽을 위치

■ android:layout_centerHorizontal : 부모의 가로 방향 중앙에 뷰를 위치

■ android:layout_centerVertical : 부모의  세로 방향 웅앙에 뷰를 위치

■ android:layout_centerInParent : 부모의 가로세로 중앙에 뷰를 위치

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

그럼 또 다시 수정해보자. 날짜 출력 TextView에 layout_toRightOf 속성을 제거하였고 layout_alignParentRight="true" 속성만 추가하면된다

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
 
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"/>
 
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:text="하늘하늘"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_toRightOf="@id/icon"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="안녕하세요. 잘 지내시는 지요?"
        android:layout_below="@id/name"
        android:layout_marginTop="16dp"
        android:layout_alignLeft="@+id/name"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="18.1.23"
        android:layout_alignBaseline="@+id/name"
        android:layout_alignParentRight="true"/>
 
</RelativeLayout>
 

완성.