Please Enable JavaScript!
Gon[ Enable JavaScript ]

안드로이드(Android) 레이아웃(Layout) gravity, layout_gravity 차이점을 알아보자.

 

환경 : Eclipse Mars, Android 4.2.2

 

위젯이나 레이아웃 옵션중 gravity layout_gravity 은 아주 헷갈리는 것들중 하나 입니다. 같은 정렬 옵션인 것 같은데 어떤 차이가 있는지 그림과 xml 설정값을 통해 알아 보겠습니다.

 

▼ 우선 gravity layout_gravity 의 차이점은 다음과 같습니다. 그러니까 gravity는 자신을 정렬하는 것이고, layout_gravity 는 부모에 포함된 위젯을 정렬하라는 말이 됩니다.

 

layout_gravity : 자신을 포함하고 있는 부모 위젯 레이아웃에서 옵션값에 따라 정렬

gravity : 자신의 뷰에서 포함하고 있는 데이터를 정렬,

 

아래 XML LinearLayout 내부에 3개의 ImageView 가 존재합니다. ImageView 에는 layout_gravity 가 설정이 되어 있죠. 이것의 의미는 LinearLayout 에서 자신의 위치를 셋팅하라는 말입니다. 그러니까 android:layout_gravity=”left” LinearLayout 에서 왼쪽에 배치하라는 말이 되는 것이죠. 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical" 
    android:background="#FFCC00">

    <ImageView
        android:id="@+id/imgView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#548745"
        android:layout_gravity="left"
        android:src="@drawable/diablo" />
    
    <ImageView
        android:id="@+id/imgView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#548745"
        android:layout_gravity="center"
        android:src="@drawable/diablo" />
    
    <ImageView
        android:id="@+id/imgView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#548745"
        android:layout_gravity="right"
        android:src="@drawable/diablo" />
</LinearLayout>

 

 

▼ 다음은 gravity 에 대한 설명입니다. 아래 XML 에는 LinearLayout 와 그 속에 ImageView 가 하나 포함되어 있습니다. LinearLayout 에는 gravity=”left” 로 설정이 되어 있죠. 이 말은 자신이 포함하고 있는 ImageView 위젯을 왼쪽으로 배치하라는 말이 됩니다. 만약 LinearLayout layout_gravity 옵션을 적용하면 아무 변화도 없겠죠. LinearLayout 포함하는 부모 레이아웃이 없기 때문입니다. 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:orientation="vertical" 
    android:gravity="left"
    android:background="#FFCC00">

    <ImageView
        android:id="@+id/imgView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#548745"
        android:src="@drawable/diablo" />
    
</LinearLayout>

 

▼ 다음은 바로 위의 XML 과 내용이 비슷하지만 ImageView layout_gravity 가 추가되어 있는 것이 차이점 입니다. 이렇게 두개가 충돌하면 어떻게 될까요? 안드로이드는 이럴 경우 외부에서부터 차래대로 적용합니다. 그러니까 LinearLayout gravity=”left” 을 적용한뒤 다시 ImageView layout_gravity=”right” 를 적용시킵니다. 결과는 오른쪽으로 붙어서 나오는 것이죠. 느릴때는 왼쪽으로 갔다가 오른쪽으로 이동하는 것이 보입니다. 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:orientation="vertical" 
    android:gravity="left"
    android:background="#FFCC00">

    <ImageView
        android:id="@+id/imgView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#548745"
        android:layout_gravity="right"
        android:src="@drawable/diablo" />
    
</LinearLayout>

 

▼ 다음은 위, 아래, 왼쪽, 오른쪽이 아닌 중앙 상단이나 하단에 위치시키는 방법입니다. 이때는 or 기호를 이용해서 다중 옵션을 적용합니다. center|top 이라고 쓰시면 중앙에서 상단에 위치하라는 말이 됩니다. 이렇게 or 를 이용한 조합으로 다양한 위치에 배치시킬수가 있습니다.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:orientation="vertical" 
    android:gravity="center|top"
    android:background="#FFCC00">

    <ImageView
        android:id="@+id/imgView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#548745"
        android:src="@drawable/diablo" />
    
</LinearLayout>

 

▼ 다음은 center 과 동일한 결과를 얻을수 있는 표현법에 대해 알아 보겠습니다. center 는 이미지를 중앙에 위치시키는 것을 말합니다. center_vertical 은 가로에서 중앙을 말하며 center_horizontal 는 세로에서 중앙을 말하므로 두개를 합치면 중앙이 되는 것입니다. 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:orientation="vertical" 
    android:gravity="center_vertical|center_horizontal"
    android:background="#FFCC00">

    <ImageView
        android:id="@+id/imgView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#548745"
        android:src="@drawable/diablo" />
    
</LinearLayout>

Posted by 녹두장군

댓글을 달아 주세요

  1. 지나가던행인 2015.12.17 00:05  댓글주소  수정/삭제  댓글쓰기

    지나가다가 이 글덕에 정말 이해가 잘됐습니다.
    감사합니다. (__)

  2. 2016.03.01 18:40  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. 막내 2019.02.13 13:54  댓글주소  수정/삭제  댓글쓰기

    감사합니다 이해가 쉽게됬습니다!

  4. 아이유 2019.04.30 17:11  댓글주소  수정/삭제  댓글쓰기

    감사합니다ㅠㅠㅠㅠ