[안드로이드/Layout] Relative Layout 상대적 레이아웃

Relative Layout

: 상대적 레이아웃

 

1. 화면에 따라서 (부모가 기준)

2. 특정한 뷰를 지정해서 사용

 

 

---

1) 부모 뷰 기준으로 처리하는 방법

Parent가 들어가는 속성

- layout_centerInParent="true"
- layout_alignParentTop="true"

- layout_alignParentBottom="true"

- layout_alignParentRight="true"

- layout_alignParentLeft="true"

 

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

    <!-- 화면 중앙 -->
    <TextView
        android:layout_centerInParent="true"
        android:background="@color/purple_200"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- 화면 하단(왼쪽) -->
    <TextView
        android:layout_alignParentBottom="true"
        android:background="@color/purple_200"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- 화면 하단(오른쪽) -->
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:background="@color/purple_200" />

    <!-- 화면 상단(왼쪽) -->
    <TextView
        android:layout_alignParentTop="true"
        android:background="@color/purple_200"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- 화면 상단(오른쪽) -->
    <TextView
        android:layout_alignParentRight="true"
        android:background="@color/purple_200"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

</RelativeLayout>

 

 

 

 

2) 특정 뷰 기준으로 처리하는 방법

변수를 선언해 기준으로 만들기

 

변수 선언 방법

     기준이 될 layout에 id="@+id/변수명" 으로 선언

 

변수 사용 방법

     배치할 layout에  layout_~~="@id/변수명"

 

- layout_alignTop="@id/변수명"

- layout_alignBottom="@id/변수명"

- layout_toRightOf="@id/변수명"

- layout_toLeftOf="@id/변수명"

- layout_above="@id/변수명"
- layout_below="@id/변수명"

 

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

    <TextView
        android:id="@+id/view1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@color/black" />

    <!-- view1을 기준으로 top 정렬 + view1을 기준으로 right 정렬 -->
    <TextView
        android:layout_alignTop="@id/view1"
        android:layout_toRightOf="@id/view1"
        android:background="@color/purple_200"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- view1을 기준으로 top 정렬 + view1을 기준으로 left 정렬 -->
    <TextView
        android:layout_alignTop="@id/view1"
        android:layout_toLeftOf="@id/view1"
        android:background="@color/purple_200"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- view1을 기준으로 top 정렬 + view1을 기준으로 위(above) 정렬 -->
    <TextView
        android:layout_centerInParent="true"
        android:layout_above="@id/view1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/purple_200" />

    <!-- view1을 기준으로 top 정렬 + view1을 기준으로 아래(below) 정렬 -->
    <TextView
        android:layout_centerInParent="true"
        android:layout_below="@id/view1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/purple_200" />

    <!-- view1을 기준으로 left 정렬 -->
    <TextView
        android:layout_toLeftOf="@id/view1"
        android:background="@color/purple_500"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- view1을 기준으로 right 정렬 -->
    <TextView
        android:layout_toRightOf="@id/view1"
        android:background="@color/purple_500"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- view1을 기준으로 위(above) 정렬 -->
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_above="@id/view1"
        android:background="@color/purple_500" />

    <!-- view1을 기준으로 아래(below) 정렬 -->
    <TextView
        android:layout_below="@id/view1"
        android:background="@color/purple_500"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- 부모기준과 자식기준 두가지를 사용해 보자 -->

    <!-- 화면기준 right 정렬 + view1을 기준으로 위(above) 정렬 -->
    <TextView
        android:layout_above="@id/view1"
        android:layout_alignParentRight="true"
        android:background="@color/purple_500"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- 화면기준 right 정렬 + view1을 기준으로 아래(below) 정렬 -->
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_below="@id/view1"
        android:layout_alignParentRight="true"
        android:background="@color/purple_500" />

    <!-- 화면기준 bottom 정렬 + view1을 기준으로 left 정렬 -->
    <TextView
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@id/view1"
        android:background="#8BEA1E"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <!-- 화면기준 bottom 정렬 + view1을 기준으로 right 정렬 -->
    <TextView
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/view1"
        android:background="#8BEA1E"
        android:layout_width="50dp"
        android:layout_height="50dp"/>
        
</RelativeLayout>

 

 

---

실습해보기

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

    <!-- 기준 center -->
    <TextView
        android:id="@+id/view"
        android:layout_centerInParent="true"
        android:background="@color/black"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <!-- above + left -->
    <TextView
        android:layout_toLeftOf="@id/view"
        android:layout_above="@id/view"
        android:background="#FF0000"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <!-- above + center -->
    <TextView
        android:layout_centerInParent="true"
        android:layout_above="@id/view"
        android:background="#FF5900"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <!-- above + right -->
    <TextView
        android:layout_toRightOf="@id/view"
        android:layout_above="@id/view"
        android:background="#FFDD00"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <!-- center + left -->
    <TextView
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@id/view"
        android:background="#62FF00"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <!-- center + right -->
    <TextView
        android:layout_centerInParent="true"
        android:layout_toRightOf="@id/view"
        android:background="#00FFD9"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <!-- below + left -->
    <TextView
        android:layout_toLeftOf="@id/view"
        android:layout_below="@id/view"
        android:background="#0037FF"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <!-- below + center -->
    <TextView
        android:layout_centerInParent="true"
        android:layout_below="@id/view"
        android:background="#7700FF"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <!-- below + right -->
    <TextView
        android:layout_toRightOf="@id/view"
        android:layout_below="@id/view"
        android:background="#FF00FB"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

</RelativeLayout>