[Android]RelativeLayout 예제

RelativeLayout 예제

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" 

    android:padding="10px"

    android:background="@drawable/ic_launcher"

    >

    <TextView

      android:id="@+id/titleLable"

      android:text="찾기 도우미"

      android:textColor="#ff000000"

      android:textSize="24sp"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginTop="30px"

      android:layout_marginLeft="70px"

      android:layout_alignParentTop="true"

      />

    <RelativeLayout 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:padding="10px"

        android:background="#aaffffff"

        >

        <TextView 

            android:id="@+id/usernameLabel"

            android:text="Username : "

            android:textColor="#ff222222"

            android:textSize="18sp"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:paddingTop="10px"

            />

        <EditText 

            android:id="@+id/usernameEntry"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@id/usernameLabel"

            android:layout_alignBaseline="@id/usernameLabel"

            android:layout_marginLeft="10px"

            />

        <TextView 

            android:id="@+id/passwordLabel"

            android:text="Password : "

            android:textColor="#ff222222"

            android:textSize="18sp"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:paddingTop="26px"

            android:layout_below="@id/usernameLabel"

            />

        <EditText 

            android:id="@+id/passwordEntry"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@id/passwordLabel"

            android:layout_alignBaseline="@id/passwordLabel"

            android:layout_marginLeft="10px"

            android:inputType="textPassword"

            />

        <Button 

            android:id="@+id/loginBtn"

            android:layout_width="100sp"

            android:layout_height="wrap_content"

            android:layout_below="@id/passwordLabel"

            android:layout_alignParentLeft="true"

            android:layout_marginLeft="20px"

            android:layout_marginTop="26px"

            android:text="Login"

            android:drawableLeft="@drawable/ic_action_search"

            android:drawablePadding="2dip"

            />

        <Button

            android:id="@+id/exitBtn"

            android:layout_width="100sp"

            android:layout_height="wrap_content"

            android:layout_below="@id/passwordLabel"

            android:layout_alignParentRight="true"

            android:layout_marginRight="20px"

            android:layout_marginTop="26px"

            android:text="Exit"

            android:drawableLeft="@drawable/ic_action_search"

            android:drawablePadding="2dip"

            />

    </RelativeLayout>

</RelativeLayout>

결과

▶ 상대 레이아웃에서 부모 컨테이너와의 상대적 위치를 이용하는 속성

속성	설명
layout_alignParentTop	부모 컨테이너의 위쪽과 뷰의 위쪽을 맞춤
layout_alignParentBottom	부모 컨테이너의 아래쪽과 뷰의 아래쪽을 맞춤
layout_alignParentLeft	부모 컨테이너의 왼쪽 끝과 뷰의 왼쪽 끝을 맞춤
layout_alignParentRight	부모 컨테이너의 오른쪽 끝과 뷰의 오른쪽 끝을 맞춤
layout_centerHorizontal	부모 컨테이너의 수평 방향 중앙에 배치함
layout_centerVertical	부모 컨테이너의 수직 방향 중앙에 배치함
layout_centerInParent	부모 컨테이너의 수평과 수직 방향 중앙에 배치함

▶ 상대 레이아웃에서 다른 뷰와의 상대적 위치를 이용하는 속성

속성	설명
layout_above	지정한 뷰의 위쪽에 배치함
layout_below	지정한 뷰의 아래쪽에 배치함
layout_toLeftOf	지정한 뷰의 왼쪽에 배치함
layout_toRightOf	지정한 뷰의 오른쪽에 배치함
layout_alignTop	지정한 뷰의 위쪽과 맞춤
layout_alignBottom	지정한 뷰의 아래쪽과 맞춤
layout_alignLeft	지정한 뷰의 왼쪽과 맞춤
layout_alignRight	지정한 뷰의 오른쪽과 맞춤
layout_alignBaseline	지정한 뷰의 내용물의 아래쪽 기준선(baseline)을 맞춤