[안드로이드] view layouts (2) RelativeLayout, PercentRelativeLayout

RelativeLayout

- 모든 요소들이 다른요소 또는 부모요소를 기준으로 정렬된다.

- 방향 속성에 따라서 위치를 결정한다.

siblings 기준 position

• layout_above, layout_below, layout_toLeftOf, layout_toRightOf

parent 기준 position

• layout_centerHorizontal, layout_centerVertical

siblings 기준 정렬

• layout_alignTop, layout_alignBottom, layout_alignLeft, layout_alignRight, layout_alignBaseline

parent 기준 정렬

• layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight

ConstraintLayout 변경

RelativeLayout	ConstraintLayout
android:layout_alignParentLeft="true"	app:layout_constraintLeft_toLeftOf="parent"
android:layout_alignParentStart="true"	app:layout_constraintStart_toStartOf="parent"
android:layout_alignParentTop="true"	app:layout_constraintTop_toTopOf="parent"
android:layout_alignParentRight="true"	app:layout_constraintRight_toRightOf="parent"
android:layout_alignParentEnd="true"	app:layout_constraintEnd_toEndOf="parent"
android:layout_alignParentBottom="true"	app:layout_constraintBottom_toBottomOf="parent"
android:layout_centerHorizontal="true"	app:layout_constraintStart_toStartOf="parent"  app:layout_constraintEnd_toEndOf="parent"
android:layout_centerVertical="true"	app:layout_constraintTop_toTopOf="parent"  app:layout_constraintBottom_toBottomOf="parent"
android:layout_centerInParent="true"	app:layout_constraintStart_toStartOf="parent"  app:layout_constraintTop_toTopOf="parent"  app:layout_constraintEnd_toEndOf="parent"  app:layout_constraintBottom_toBottomOf="parent"

간단한 로그인 화면 예제

<?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="wrap_content">
 
    <TextView android:id="@+id/label" android:layout_width="match_parent"
              android:layout_height="wrap_content" android:text="Email" />
 
    <EditText android:id="@+id/inputEmail" android:layout_width="match_parent"
              android:layout_height="wrap_content" android:layout_below="@id/label" />
   
    <Button android:id="@+id/btnLogin" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:layout_below="@id/inputEmail"
            android:layout_alignParentLeft="true" android:layout_marginRight="5dp"
            android:text="Login" />
</RelativeLayout>

실행화면

추후 추가 예정

PercentRelativeLayout

과거에는 두 개의 element들을 같은 높이로 나란히 놓으려면, LinearLayout과 RelativeLayout을 같이 사용했지만

PercentRelativeLayout으로 대체할 수 있습니다.

( ConstraintLayout을 통해 설정하는 방법 : https://constraintlayout.com/layouts/percentlayout.html )

예제

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/top_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:background="#ff44aacc"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="70%" />

    <View
        android:id="@+id/top_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/top_left"
        android:background="#ffe40000"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="30%" />

    <View
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@+id/top_left"
        android:background="#ff00ff22"
        app:layout_heightPercent="80%" />
</android.support.percent.PercentRelativeLayout>

실행화면

추후 추가 예정