RelativeLayout 기본

Posted by ITPangPang
2016.04.13 14:27 안드로이드(android)/레이아웃(Layout)


RelativeLayout



- RelativeLayout은 프로젝트를 생성하면 기본적으로 생성되어있는 Layout이다.


- RelativeLayout은 이름 그대로 Relative(상대적인) 상대적으로 View나 Widget등을 배치하는 Layout이다.


- 간단하게 실험을 통해서 배치하는 법을 알아보겠습니다.





버튼 5개 생성

<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="match_parent"
tools:context=".MainActivity">
<Button
android:text="Btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="Btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="Btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="Btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="Btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>


프로젝트 생성된 바로 그 상태에서


버튼 5개만 아무 속성없이


생성해봤습니다.





버튼 5개가 한곳에 겹쳐서 출력되는

모습을 볼 수 있습니다.



그럼 LinearLayout의 Horizontal처럼

한줄에 5개의 버튼을 

나란히 배치하려면 어떻게 해야 할까요?


<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="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:text="Btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn2"
android:text="Btn2"
android:layout_toRightOf="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn3"
android:text="Btn3"
android:layout_toRightOf="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn4"
android:text="Btn4"
android:layout_toRightOf="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn5"
android:text="Btn5"
android:layout_toRightOf="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>


각 버튼마다 Id를 넣어주고

layout_toRightOf를 추가해서

ID에 해당하는 Widgets 오른쪽에

배치하겠다는 뜻입니다.





btn1 기준으로 

차례대로 오른쪽에 하나하나

배치가 잘 되었습니다.



이번에는 btn5를 기준 왼쪽으로

나열해보겠습니다



<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="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:text="Btn1"
android:layout_toLeftOf="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn2"
android:text="Btn2"
android:layout_toLeftOf="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn3"
android:text="Btn3"
android:layout_toLeftOf="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn4"
android:text="Btn4"
android:layout_toLeftOf="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn5"
android:text="Btn5"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>


먼저 Btn5에 alignParentRight="true" 

(부모(Parent)를 기준으로 Right에 배치시킨다는 뜻이겟죠)

추가 시켜서 오른쪽정렬을 시켰습니다


그 후에

toRightOf를 toLeftOf로 변경하여서

아까와 같은 방법으로

해당 id 왼쪽에 배치를 하였습니다.




Btn5가 오른쪽에 잘 붙어있고

그 후 Btn5기준으로 왼쪽으로

차례대로 잘 붙어있습니다.



이번에는 Btn3을 가운데에 놓고

Btn3을 기준으로 오른쪽 왼쪽으로

배치해보겠습니다.



순서를 바꿔서 결과를 먼저 보면





위와 같은 화면을 구성하려면

처음에 Btn3을 가운데에 놓고

아까와 같은 방법으로 toLeftOf, toRightOf를

사용하면 됩니다.


<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="wrap_content"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:text="Btn1"
android:layout_toLeftOf="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn2"
android:text="Btn2"
android:layout_toLeftOf="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn3"
android:text="Btn3"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn4"
android:text="Btn4"
android:layout_toRightOf="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn5"
android:text="Btn5"
android:layout_toRightOf="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>


위에서 RelativeLayout의

layout_height를 wrap_content로 변경해서

맨 윗줄에 배치되도록 하였습니다.

저 상태에서 wrap_content가 아닌

match_parent로 바꿔보면



match_parent로 변경하니

Btn3만 중앙에 있고

나머지 Btn들은 맨 윗줄에 있습니다.




이런식으로 나타내기 위해서는


<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="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:text="Btn1"
android:layout_centerInParent="true"
android:layout_toLeftOf="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn2"
android:text="Btn2"
android:layout_centerInParent="true"
android:layout_toLeftOf="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn3"
android:text="Btn3"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn4"
android:text="Btn4"
android:layout_centerInParent="true"
android:layout_toRightOf="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn5"
android:text="Btn5"
android:layout_toRightOf="@+id/btn4"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>


위와같이 부모 기준으로 

Center에 놓겠다고 다 적어주시면 됩니다.



이거 중앙에 한번 놓겠다고 코드를 

몇개나 적겠다는 건지...


아에 위에 Layout 하나 더 놓고

해당 Relative만 중앙에 배치시켜도 됩니다.


<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="match_parent"
android:gravity="center"
tools:context=".MainActivity">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/btn2"
android:text="Btn1" />

<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/btn3"
android:text="Btn2" />

<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Btn3" />

<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/btn3"
android:text="Btn4" />

<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/btn4"
android:text="Btn5" />
</RelativeLayout>
</RelativeLayout>


이번에는 버튼 아래에 EditText를 하나 놓아보겠습니다.





위와 같은 구성을 하려면 방법이 많겠지만


앞에서 Button만 묶은 layout을 하나로 썼으므로


그 Layout에 ID를 부여해서 바로 아래에 배치시키면 됩니다.



<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="match_parent"
android:gravity="center"
tools:context=".MainActivity">

<RelativeLayout
android:id="@+id/rl1"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/btn2"
android:text="Btn1" />

<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/btn3"
android:text="Btn2" />

<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Btn3" />

<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/btn3"
android:text="Btn4" />

<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/btn4"
android:text="Btn5" />
</RelativeLayout>

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="EditText"
android:layout_below="@+id/rl1"/>
</RelativeLayout>



그런데 EditText를 위와같이 말고

Button이 모여있는 Layout에서 같이 

사용하고 싶다면


아래와같이 사용하시면 됩니다.


<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="match_parent"
android:gravity="center"
tools:context=".MainActivity">

<RelativeLayout
android:id="@+id/rl1"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/btn2"
android:text="Btn1" />

<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/btn3"
android:text="Btn2" />

<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Btn3" />

<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/btn3"
android:text="Btn4" />

<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/btn4"
android:text="Btn5" />

<EditText
android:id="@+id/et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/btn3"
android:hint="EditText"/>
</RelativeLayout>
</RelativeLayout>


위에처럼 변경시켜주면 같은 결과를

얻을 수 있습니다.


centerHorizontal과 centerInParent의 차이는

가로 중앙에 놓느냐, 부모뷰 전체에 중앙에 놓느냐

차이입니다.


일단 Relativelayout의 기본은 여기서 마치고

다음글에서 다른 속성들과

다른 Layout들과도 복합해서

사용하는 방법을 알아보겠습니다.








이 댓글을 비밀 댓글로