안드로이드 강의05-렐러티브 레이아웃(RelativeLayout)

렐러티브 레이아웃(RelativeLayout)

리니어레이아웃과 더불어 가장 많이 사용하는 레이아웃이다. 리니어 레이아웃으로 구현할 수도 있지만 렐러티브 레이아웃을 이용하면 더욱 쉽게 구현가능한 것들이 있습니다.

렐러티브 레이아웃은 언제 사용하는 레이아웃일까?

아래와 같이 양쪽에 버튼이 있고 가운데 TextView가 있는 형태를 예를 듭니다. 양쪽의 버튼은 고정사이즈이고 가운데 텍스트뷰는 유동적으로 너비를 줘야합니다. 이유는?

현재 너무나 다양한 사이즈의 안드로이드 폰이 있기 때문에 특정 폰을 기준으로 개발하지 않는 한 이런식으로 레이아웃을 배치해야 모든 폰에서 깔끔한 UI를 볼 수 있습니다.

오늘 배워볼 코드에 대한 실행 화면입니다. 

안드로이드 스튜디오는 가상 머신이 아주 잘 되어 있어서 폰이 없어도 기본적인 테스트는 가능합니다.

여기서 한가지 생각해야 될 부분이 있습니다. 

이부분이 렐러티브 레이아웃의 핵심입니다. 보통 레이아웃은 코드상 먼저 작성한 뷰가 먼저 배치가 됩니다. 하지만 렐러티브 레이아웃은 다릅니다. 상대적인 레이아웃 배치를 하기 때문에 순서가 조금다릅니다.

순서는 다음과 같습니다.

뷰의 입장에서 검은색 배경이 부모레이아웃인 렐러티브 레이아웃입니다.

1. 버튼 1을 부모의 왼쪽에 배치

2. 버튼 2를 부모의 오른쪽에 배치

3. 텍스트뷰를 버튼1의 왼쪽과 버튼2의 오른쪽 부모의 중앙에 배치

왜 이런순서대로 xml에서 선언을 해야 할까요? 이유는 xml은 순서대로 코드를 파싱하기 때문입니다.

2번과 3번의 순서를 변경하면 텍스트뷰를 정렬할 때 버튼2를 찾을 수 없다고 오류가 나게 됩니다. 이점만 유의하시면 렐러티브 레이아웃을 사용하는데 어려움은 없을겁니다.

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

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="BUTTON1"
            />

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/btn1"
            android:layout_toLeftOf="@id/btn2"
            android:layout_centerVertical="true"
            android:text="TextView"
            android:background="#ffffff"
            />

</RelativeLayout>

위의 코드를 보면 버튼을 두개 우선 선언합니다. 그리고 버튼에 각각 아이디를 주고 각각 부모의 왼쪽과 오른쪽에 배치를 합니다.

그 속성이 layout_alignParentLeft와 layout_alignParentRight입니다.

그리고 텍스트뷰는 버튼1의 오른쪽 버튼2의 왼쪽에 배치를 합니다.

그 속성이layout_toRightOf, layout_toLeftOf입니다.

그리고 텍스트 뷰같은경우 width를 match_parent를 주어서 최대로 주면 위의 버튼1의 오른쪽 버튼2의 왼쪽에 꽉차는 레이아웃이 완성되게 됩니다. 

이와 반대도 가능합니다. 

바로 위에 버튼 아래에 버튼 그리고 남는 공간은 TextView로 채우는 방법인데요 위의 코드에서 몇몇 코드만 변경하면 쉽게 가능합니다.

코드는 아래와 같습니다.

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

        <Button
            android:id="@+id/btn1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="BUTTON1"
            />

        <Button
            android:id="@+id/btn2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="BUTTON2"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/btn1"
            android:layout_above="@id/btn2"
            android:layout_centerVertical="true"
            android:text="TextView"
            android:background="#ffffff"
            />

</RelativeLayout>

위의 코드와 비슷합니다.

단 버튼의 배치와 Text의 정렬이 바뀌었는데요

버튼을 layout_alignParentTop와 layout_alignParentBottom 을 이용해서 아래위로 배치하였고 TextView를 

버튼1의 아래에 배치하는 layout_below를 주었습니다. 그리고 버튼2의 윗쪽에 배치하는 above를 주었습니다.

이런식으로 렐러티브 레이아웃을 사용하시면 됩니다.

렐러티브 레이아웃과 리니어 레이아웃 이 두가지를 사용하시면 왠만한 프로젝트는 모두 가능합니다.

다음 강의에는 나머지 레이아웃을 간단히 알아보도록 할께요~ 질문 남겨주시면 시간 날때 답해드립니다^^ 평일 업무시간에는 답못드려요~