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

반응형

안드로이드(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>

반응형

저작자표시비영리변경금지