[UI] Relative Layout

패스트캠퍼스 강의 [UI] 09~12

부모 Component
상대적으로 자식 view의 위치를 정해줄 수 있는 component
상대적 = 어떤 기준을 중심으로
기준이 될 수 있는 것:
    1. 부모 view (화면 전체)
    2. 특정 view

---

<시작 단계>

1. res -> layout 폴더에서 New -> Layout Resource File 생성
2. RelativeLayout으로 변경
3. orientation은 LinearLayout의 속성이기 때문에 삭제

---

<부모를 기준으로 view를 배치하는 경우>

• parent 키워드가 들어가있는 속성

 

• Center 키워드가 들어가있는 속성

---

<특정 view를 기준으로 하는 경우>

• 이름 부여

view들을 서로 구분하기 위해, 그리고 특정 view를 기준으로 하기 위해 이름을 부여한다. 여기서 이름을 id라고 한다.

id 속성은 모든 view가 가지고 있다.

"@+id/ ~~~": ~~~ 표시에 원하는 이름을 적는다.

    <TextView
        android:id="@+id/center"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="#FFEB3B" />

 

• 위치 속성 사용

주의할 점: 바로 옆에 붙는것이 아니라 끝선을 맞춘다.

---

Relative Layout 실습

 

부모 기준: centerHorizontal, centerVertical

특정 view 기준: above, below, left, right를 섞어서 사용함

아래는 소스코드

코드

<?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">

    <TextView
        android:id="@+id/center1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:text="center"
        android:background="#FFEB3B" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/center1"
        android:layout_centerHorizontal="true"
        android:text="above, center"
        android:background="#E91E63" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@+id/center1"
        android:layout_centerInParent="true"
        android:text="below, center"
        android:background="#03A9F4" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_toRightOf="@+id/center1"
        android:layout_centerInParent="true"
        android:text="right, center"
        android:background="#8BC34A" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_toLeftOf="@+id/center1"
        android:layout_centerInParent="true"
        android:text="left, center"
        android:background="#FF5722" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@+id/center1"
        android:layout_toLeftOf="@+id/center1"
        android:text="below, left"
        android:background="#673AB7" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@+id/center1"
        android:layout_toRightOf="@+id/center1"
        android:text="below, right"
        android:background="#009688" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/center1"
        android:layout_toLeftOf="@+id/center1"
        android:text="above, left"
        android:background="#FF9800" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/center1"
        android:layout_toRightOf="@+id/center1"
        android:text="above, right"
        android:background="#3F51B5" />

</RelativeLayout>