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들과도 복합해서

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








저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로