레이아웃: RelativeLayout

레이아웃(ViewGroup): RelativeLayout

RelativeLayout은 디자인에서 원하는 위치에 위젯을 배치할 수 있다.

1) ignoreGravity

gravity로 정렬 속성을 지정한 뒤 ignoreGravity를 써서 특정 위젯을 지정하면 해당 위젯은 gravity가 적용되지 않는다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="130dp"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="right"
    android:ignoreGravity="@+id/button2"
    tools:context="com.progdv.app12_relativelayout.MainActivity">

    <Button
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:text="View1"
        android:id="@+id/button"
 />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View2"
        android:id="@id/button2"
 />
</RelativeLayout>

2) layout_align

layout_align으로 배치를 조절해줄 수 있다.

<?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="160dp"
    android:background="#ffca4e">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View1"
        android:id="@+id/button3"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
 />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View2"
        android:id="@+id/button4"       
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View3"
        android:id="@+id/button5"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View4"
        android:id="@+id/button6"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"

        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View5"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View6"
        android:id="@+id/button8"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"/> />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View7"
        android:id="@+id/button9"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View8"
        android:id="@+id/button10"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View9"
        android:id="@+id/button11"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        />
</RelativeLayout>

3) layout_above, layout_below

layout_above, layout_below : 기준이 되는 객체의 위쪽(above)나 아래쪽(below)으로 위치하게끔 하는 기능

layout_toLeftOf, layout_toRightOf : 기준이 되는 객체의 왼쪽/오른쪽에 밀착

layout_alignLeft, layout_alignRight : 기준이 되는 객체와 동일한 세로 라인상에서 왼쪽/오른쪽에 정렬

centerInParent : 부모 객체에 맞춰 중앙 정렬

<?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="300dp"
    android:background="#00d9ce">

    <Button
        android:id="@+id/baseView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:text="BaseView"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_above="@id/baseView"
        android:layout_toLeftOf="@id/baseView"
        android:text="1" />

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_above="@id/baseView"
        android:layout_alignLeft="@id/baseView"
        android:text="2"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_above="@id/baseView"
        android:layout_centerInParent="true"
        android:text="3"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="4"
        android:layout_above="@id/baseView"
        android:layout_alignRight="@id/baseView"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="5"
        android:layout_above="@id/baseView"
        android:layout_toRightOf="@id/baseView" />

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/baseView"
        android:layout_toLeftOf="@id/baseView"
        android:text="6"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="7"
        android:layout_alignTop="@id/baseView"
        android:layout_toRightOf="@id/baseView"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="8"
        android:layout_alignBaseline="@id/baseView"
        android:layout_toLeftOf="@id/baseView"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="9"
        android:layout_alignBaseline="@id/baseView"
        android:layout_toRightOf="@id/baseView"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="10"
        android:layout_alignBottom="@id/baseView"
        android:layout_toLeftOf="@id/baseView"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="11"
        android:layout_alignBottom="@id/baseView"
        android:layout_toRightOf="@id/baseView"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/baseView"
        android:layout_toLeftOf="@id/baseView"
        android:text="12"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/baseView"
        android:layout_alignLeft="@id/baseView"
        android:text="13"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/baseView"
        android:layout_centerInParent="true"
        android:text="14"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/baseView"
        android:layout_alignRight="@id/baseView"
        android:text="15"/>

    <Button
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="16"
        android:layout_below="@id/baseView"
        android:layout_toRightOf="@id/baseView"/>

</RelativeLayout>

4) 가변적인 영역 잡기

layout_alignParentLeft/layout_alignParentRight : 부모 태그 기준으로 왼쪽, 오른쪽에 배치

다음 왼쪽 객체의 오른쪽, 오른쪽 객체의 왼쪽에 위지하도록 하면 크기가 그에 맞게 가변된다.

<?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="wrap_content"
        android:layout_height="wrap_content"
        android:text="View1"
        android:layout_alignParentLeft="true"
        android:id="@+id/view1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View2"
        android:layout_alignParentRight="true"
        android:id="@+id/view2"/>
         />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="View3"
        android:layout_toRightOf="@id/view1"
        android:layout_toLeftOf="@id/view2"
        android:id="@+id/view3" />

</RelativeLayout>

5) 투명 속성 visibility

android:visibility의 속성으로 gone, invisible, visiblie로 보이게 안보이게 하며 영역을 잡아줄 수 있다.

visibility로 객체를 보이지 않게 하면 이 객체를 참조하는 객체에도 영향을 줘서 레이아웃에 문제가 생길 수 있는데 

참조하는 객체에 android:layout_alignWithParentIfMissing="true"로 영향을 받지 않게 해줄 수 있다.

<?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:id="@+id/view10"
        android:text="view10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:visibility="gone"
        />

    <Button
        android:id="@+id/view11"
        android:text="view11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/view10"
        android:layout_below="@id/view10"
        android:layout_alignWithParentIfMissing="true"
        />

    <Button
        android:id="@+id/view12"
        android:text="view12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/view11"
        android:layout_below="@id/view11"
        />
    
</RelativeLayout>