레이아웃을 활용한 다양한 뷰 배치 - RelativeLayout, ConstraintLayout

RelativeLayout

RelativeLayout은 화면에 이미 배치된 뷰를 기준으로 다른 뷰의 위치를 지정하는 레이아웃이다. layout_above, layout_below, layout_toLeftOf, layout_toRightOf 이렇게 네 개로 상대적 위치를 지정한다. 상대적 위치를 지정하는 레이아웃인 만큼 먼저 기준이 될 뷰를 인식해야 하므로 id 부여는 필수이다.

align

상대적인 위치를 설정하고 나서 화면을 깔끔하게 하기 위해서는 정렬을 해야한다. 즉, 왼쪽 변을 맞추든 윗 변을 맞추든 선을 맞춤으로써 UI가 더 깔끔해 질 수 있고 이는 align을 이용한다

alignParentXXX

부모 뷰의 면적에서 원하는 위치에 배치하는 기능을 한다

RelativeLayout 실습

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

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

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.kimjungkwon.relativelayouttest.MainActivity">

<ImageView

android:id="@+id/profile" // 상대적 배치를 위해 뷰 인식을 해야해서 id 항상 부여

android:src="@drawable/character"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:adjustViewBounds="true"

android:maxHeight="80dp"

android:maxWidth="80dp"

android:padding="10dp"/>

<TextView

android:id="@+id/name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/profile"

android:text="홍길동"

android:textSize="20dp"

android:layout_marginLeft="10dp"

android:layout_marginTop="10dp"/>

<TextView

android:id="@+id/greeting"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/name"

android:layout_alignLeft="@+id/name"

android:layout_marginTop="5dp"

android:text="안녕하세요. 잘 지내시는 지요?"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="17. 1. 11"

android:layout_alignParentRight="true"/> // 부모 뷰의 면적에서 위치 결정

</RelativeLayout>

ConstraintLayout

RelativeLayout와 같은 원리로 id를 잡아 상대적 위치를 설정하는 것이다. 단지 RelativeLayout보다 위치 지정하는 속성이 더 많다는 것만 알고 일단 넘어가도록 한다.