[Android] RelativeLayout 이용하여 위치 맞추기

[Android] RelativeLayout 이용하여 위치 맞추기

레이아웃 작업을 하다가 조금 더 작업량을 줄이거나 불필요한 소스를 줄이기 위한 작업을 하다보니 하나 알게되었다. 과거에는 어느 UI의 비율을 맞추는 작업을 하기 위해서 LinearLayout 을 감싸고 또 감싸서 비율을 맞추곤 했었다.

1. 그림

1번과 같이 화면을 구성한다고 했을때, 이전에는 Layout 을 겹치고 또 겹치는 행위를 했었다.

2. 그림

2번의 그림과 같이 첫 빨간선의 레이아웃을 그리고 그 안에 검정색의 각각의 레이아웃을 그리고 작업을 했다. 그러나 각 속성을 알고는 그럴 필요가 없음을 알게되었다.

3. 코드

<RelativeLayout
            android:layout_width="450dp"
            android:layout_height="300dp"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal">
 
            <EditText
                android:id="@+id/login_id"
                android:layout_width="300dp"
                android:layout_height="36dp"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/login_user_bg"
                android:lines="1"
                android:paddingLeft="120dp"
                android:paddingRight="10dp"
                android:singleLine="true" />
 
            <ImageButton
                android:id="@+id/btn_login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@id/login_id"
                android:layout_marginLeft="10dp"
                android:background="@drawable/btn_login" />
 
            <EditText
                android:id="@+id/login_pw"
                android:layout_width="300dp"
                android:layout_height="36dp"
                android:paddingLeft="120dp"
                android:paddingRight="10dp"
                android:singleLine="true"
                android:lines="1"
                android:inputType="numberPassword"
                android:layout_alignBottom="@id/btn_login"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/login_pw_bg" />
        </RelativeLayout>

3번의 코드에서 보다시피 RelativeLayout 과 함께 layout_toEndOf 으로 지정된 id의 끝에 배치시킨다. 그리고 alignBottom 의 속성을 활용해서 해당 id의 가장하단에 자신의 하단을 정렬 시킨다. 그러면 1번의 그림과 같이 레이아웃을 잡을 수 있게 된다.