상대적 레이아웃 2편 Relative Layout

모든 뷰에 고유한 이름을 부여할 수 있습니다.

 

이는 아래의 코드처럼, id값으로 지정합니다. 이름을 지정하면, 이름을 가진 뷰를 기준으로 다른 뷰의 위치를 옮길 수 있게 됩니다.

android:id="@+id/원하는 이름"

이름을 지정하면, res - values - ids.xml 파일에 해당 이름이 기록되게 됩니다.

* ids.xml 파일에 아래와 기록됩니다.

<resources>
    <item name="원하는 이름" type="id">원하는 이름</item>
</resources>

그럼 아래의 코드와 에뮬레이터 결과를 살펴 봅니다.

반응형

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


    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록1"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_above="@id/five"
        android:layout_toLeftOf="@id/five"
        android:background="#F44336" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록2"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_above="@id/five"
        android:layout_centerHorizontal="true"
        android:background="#FFEB3B" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록3"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_above="@id/five"
        android:layout_toEndOf="@id/five"
        android:background="#673AB7" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록4"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/five"
        android:background="#CDDC39" />

    <TextView
        android:id="@+id/five"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록5"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_centerInParent="true"
        android:background="#3F51B5" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록6"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/five"
        android:background="#00BCD4" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록7"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_below="@id/five"
        android:layout_toLeftOf="@id/five"
        android:background="#FFC107" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록8"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_below="@id/five"
        android:layout_centerHorizontal="true"
        android:background="#009688" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="블록9"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_below="@id/five"
        android:layout_toRightOf="@id/five"
        android:background="#973A3A" />

</RelativeLayout>

에뮬레이터 결과

위의 코드와 결과 사진처럼, 9개의 블록이 위치해 있습니다.

중요한 부분만 짚고 넘어가자면, 블록5를 기준으로 나머지 블록을 배치해 줍니다.

 

블록5에 "five"라는 id값을 부여해줍니다. 앞으로 나머지 블록은 모두 블록5를 기준으로 정렬할 것입니다.

 

블록1의 경우 android:layout_above="@id/five"와 android:layout_toLeftOf="@id/five"를 통해서 위치합니다. 블록5의 왼쪽 윗부분에 오기 때문입니다.

 

블록2는 android:layout_above="@id/five" 및 android:layout_centerHorizontal="true"를 적용합니다.

 

블록3은 android:layout_above="@id/five" 및 android:layout_toEndOf="@id/five"를 적용합니다.

 

블록4는 android:layout_centerVertical="true" 및 android:layout_toLeftOf="@id/five"를 적용합니다.

 

블록6은 android:layout_centerVertical="true" 및 android:layout_toRightOf="@id/five"를 적용합니다.

 

블록7은 android:layout_below="@id/five" 및 android:layout_toLeftOf="@id/five"를 적용합니다.

 

블록8은 android:layout_below="@id/five" 및 android:layout_centerHorizontal="true"를 적용합니다.

 

블록9는 android:layout_below="@id/five" 및 android:layout_toRightOf="@id/five"를 적용합니다.

 

각각 적용되는 속성의 명칭을 확인해 주십시오. 원하는 뷰를 기준으로 정하고 나머지 뷰를 저러한 속성으로 이동하면 됩니다.

 

에뮬레이터 결과과 중요한 속성값을 다시 정리하면 다음과 같습니다.