[AndroidStudio] RelativeLayout 복습

주로 리니어 레이아웃을 통해 그래비티를 수직, 수평으로 배치를 했었기에, 다른 xml이 약해 방학 기간동안 정리보고 싶어서 이렇게 xml 코드를 복습해보고자 한다.

 

우선 릴렉티브레이아웃은 간단하게 요악해서 "기준"을 정하고 다른 것들은 기준에 맞춰서 배치한다고 생각하면 편하다.

예시를 모두 살펴보자!

 

개념 정리

밑의 그림을 보면 이해가 쉬울 것이다. 단, 궁금한 점은 above 위치에서 toLeftOf 의 alignTop 위에 놓고 싶다면 어떻게 해야할까? 정답은 xml 코드에도 있지만, above에 toLeftOf를 걸면 된다 즉 아래의 선 안에 적혀진 부분은 그대로 가면 되는 것이고, 적혀지지 않은 부분은 위와 같이 해결하면 된다. 

기준을 모두 감싼 형태로 xml 코드를 구현해라

 

xml 코드만 기록하겠다! 혹시 avd에 실행하고 싶다면, 밑의 코드처럼 코틀린 코드에 실행할 레이아웃을 지정하면 된다.

setContentView(R.layout.relative_layout)

 

xml 코드

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

    <Button
        android:layout_width="150dp"
        android:id="@+id/baseBtn"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="기준"/>

    <Button
        android:layout_alignTop="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        />


    <Button
        android:layout_toLeftOf="@+id/baseBtn"
        android:layout_alignBaseline="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        />


    <Button
        android:layout_toLeftOf="@+id/baseBtn"
        android:layout_alignBottom="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        />

    <Button
        android:layout_below="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        />
    <Button
        android:layout_below="@+id/baseBtn"
        android:layout_alignLeft="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
        />

    <Button
        android:layout_below="@+id/baseBtn"
        android:layout_alignRight="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6"
        />

    <Button
        android:layout_below="@+id/baseBtn"
        android:layout_toRightOf="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"
        />

    <Button
        android:layout_toRightOf="@+id/baseBtn"
        android:layout_alignBottom="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"
        />

    <Button
        android:layout_toRightOf="@+id/baseBtn"
        android:layout_alignBaseline="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"
        />

    <Button
        android:layout_toRightOf="@+id/baseBtn"
        android:layout_alignTop="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="10"
        />

    <Button
        android:layout_above="@+id/baseBtn"
        android:layout_toRightOf="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="11"
        />

    <Button
        android:layout_above="@+id/baseBtn"
        android:layout_alignRight="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12"
        />

    <Button
        android:layout_above="@+id/baseBtn"
        android:layout_alignLeft="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="13"
        />

    <Button
        android:layout_above="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="14"
        />


</RelativeLayout>

 

실행화면

 

헷갈리는 점이 있다면, 실행화면이랑 xml 코드를 비교하면 도움이 될것이다:)