[안드로이드] RelativeLayout 속성 및 사용방법

 

안드로이드 - RelativeLayout 속성 및 사용방법

 

 

   목차

1. RelativeLayout이란?
2. RelativeLayout 속성
3. RelativeLayout.LayoutParams 속성
   • 부모 뷰그룹과의 정렬을 위한 속성
   • 자식뷰들과의 정렬을 위한 속성
   • 속성 조합에 따른 뷰의 크기 변화
4. RelativeLayout 사용예제

 

 

1. RelativeLayout이란?

 

RelativeLayout은 다른 뷰와의 상대적인 위치 관계를 설정하여 화면에 배치하는 레이아웃을 말합니다. 이때 기준이 되는 뷰를 지정하기 위해서는 기준뷰에 id값이 설정되어 있어야 합니다.

LinearLayout이 여러개로 중첩된 뷰그룹을 사용하여 화면을 나타내는 반면 RelativeLayout은 하나의 뷰그룹 안에 자식 뷰들을 배치하여 화면을 나타낼 수 있습니다. 

 

 

 

2. RelativeLayout 속성

 

RelativeLayout의 기본적인 주요 속성은 다음과 같습니다. 

 

1) gravity : 해당 뷰안에 담겨 있는 컨텐츠에 영향을 미치는 중력 방향을 지정합니다. (ex, gravity="center")

2) ignoreGravity : 해당 뷰그룹에 설정된 gravity에 영향을 받지 않는 자식 뷰를 지정합니다. (ex, ignoreGravity="button1")

 

 

 

3. RelativeLayout.LayoutParams 속성

 

RelativeLayout 안에 포함된 자식뷰들이 사용할 수 있는 XML 속성은 크게 부모 뷰그룹과의 상대적 위치를 나타내는 속성과 자식뷰들간의 상대적 위치를 나타내는 속성으로 나뉘어집니다. 이 속성들은 부모 뷰그룹안에서 자식뷰들이 화면 배치를 위해 사용되며 그 종류는 아래와 같습니다. 

 

 

1) 부모 뷰그룹과의 정렬을 위한 속성

 

   속성값으로 true 또는 false가 사용됩니다. (ex, layout_alignParentLeft="true")

1. layout_alignParentLeft : 해당 뷰와 부모 뷰그룹의 왼쪽이 일치되도록 정렬합니다. 
2. layout_alignParentRight : 해당 뷰와 부모 뷰그룹의 오른쪽이 일치되도록 정렬합니다. 
3. layout_alignParentTop : 해당 뷰와 부모 뷰그룹의 위쪽이 일치되도록 정렬합니다. 
4. layout_alignParentBottom : 해당 뷰와 부모 뷰그룹의 아래쪽이 일치되도록 정렬합니다. 
5. layout_centerInParent : 부모 뷰그룹의 정중앙에 위치시킵니다.
6. layout_centerHorizontal : 부모 뷰그룹의 수평방향 중앙에 위치시킵니다. 
7. layout_centerVertical : 부모 뷰그룹의 수직방향 중앙에 위치시킵니다. 

 

2) 자식뷰들과의 정렬을 위한 속성

 

   속성값으로 지정뷰의 id값이 사용됩니다. (ex, layout_alignLeft="+id/textView1")   

1. layout_alignLeft : 지정된 뷰와 왼쪽라인을 서로 일치시킵니다 
2. layout_alignRight : 지정된 뷰와 오른쪽라인을 서로 일치시킵니다. 
3. layout_alignTop : 지정된 뷰와 위쪽라인을 서로 일치시킵니다. 
4. layout_alignBottom : 지정된 뷰와 아래쪽라인을 서로 일치시킵니다. 
5. layout_alignBaseline : 지정된 뷰와 텍스트 라인이 서로 일치되도록 정렬합니다. 
6. layout_toLeftOf : 지정된 뷰의 왼쪽라인 왼쪽옆에 배치합니다.  
7. layout_toRightOf : 지정된 뷰의 오른쪽라인 오른쪽옆에 배치합니다.  
8. layout_above : 지정된 뷰의 위쪽라인 위에 배치합니다.  
9. layout_below : 지정된 뷰의 아래쪽라인 아래에 배치합니다.  

 

반응형

 

 

3) 속성 조합에 따른 뷰의 크기 변화

 

RelativeLayout을 사용하게 되면 그 안에 포함된 자식뷰는 여러 속성을 조합하여 사용할 경우 속성의 내용에 따라 뷰의 크기가 변화될 수 있습니다. 

 

RelativeLayout 사용시 속성 조합에 따른 뷰의 크기 변화

 

 

 

4. RelativeLayout 사용예제

 

RelativeLayout을 사용하여 화면을 구성한 예시입니다. 

 

RelativeLayout 사용예제

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:text="기준뷰"
        android:textSize="24dp"
        android:gravity="center"
        android:background="#40C4FF" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼1"
        android:textSize="24dp"
        android:textColor="@color/white"
        android:background="#C62828"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="버튼2"
        android:textSize="24dp"
        android:textColor="@color/white"
        android:background="#C62828"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_alignRight="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:text="버튼3"
        android:textSize="24dp"
        android:textColor="@color/white"
        android:background="#C62828"/>
</RelativeLayout>