[안드로이드 코딩_017] 안드로이드 레이아웃 Linear Layout

안녕하세요. 제임스 입니다. 

이번에는 안드로이드 레이아웃 종류 중 가장 기본중의 기본 Linear Layout 을 예제와 함께 정리해 보겠습니다. 

위와 같은 UI를 구성할 경우 아래와 같이 작성하게 됩니다. 

Example 1

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp"
    android:background="@android:color/holo_blue_bright">

</LinearLayout>

layout_width 및 layout_height 는 match_parent (부모뷰의 크기에 맞춤) 또는 wrap_content (자식 뷰의 크기에 맞춤) 두가지 옵션과 함께 직접 고정값을 주는 방식이 있습니다. 

width (길이) 를 match_parent (부모 View 의 크기에 맞춤) 로 설정했지만 marginLeft 및 marginRight 옵션을 추가 하여 양엽으로 20dp 씩 공백을 줬습니다. height (높이)는 30dp 로 고정값을 적용했습니다. 

그리고 배경색은 background 에 안드로이드에서 제공하는 색중 holo_blue_bright 라는 값을 참조하였습니다. 

Example 2

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp"
    android:padding="10dp"
    android:background="@android:color/holo_orange_light"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="30dp"
        android:background="@android:color/holo_purple">

    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="30dp"
        android:background="@android:color/holo_green_light">

    </LinearLayout>
</LinearLayout>

padding 10dp 를 줘서 예제 1번과 동일한 길이의 레이아웃 내부로 10dp 만큼 들어 간 형태로 자리 잡았습니다. 

orientation 이라는 값은 레이아웃이 수직구조를 가질 것인지 수평구조를 가질 것인지를 결정하는 속성입니다. 

만약 vertical(수직)로 설정 시 자식뷰들은 수직 방향으로 구성됩니다. 

예제에서는 horizontal (수평) 으로 설정하여 두개의 자식 LinearLayout 을 가지도록 설정했습니다. 

여기서 특이하게 layout_width 를 0dp 로 설정하고 weight 라는 속성 값을 둘다 동일하게 1 로 적용했습니다. 

이는 길이를 두개의 LinearLayout 이 똑같이 1:1 로 나눈다는 의미입니다. 

만약 한쪽이 weight="2" 다른 한쪽이 weight="1" 로 설정이 되었다면 부모 LinearLayout 내에서 화면을 2:1 로 나누게 됩니다. 

주의 할 점은 부모 LinearLayout 의 orientation 이 horizontal 이면 길이 방향으로 weight 값이 적용되고 

부모 LinearLayout 의 orientation 값이 vertical 이면 높이 방향으로 weight 값이 적용됩니다. 

Example 3

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp"
    android:padding="10dp"
    android:background="@android:color/holo_orange_light"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="100dp"
        android:layout_weight="1"
        android:layout_height="30dp"
        android:background="@android:color/holo_purple">

    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="30dp"
        android:background="@android:color/holo_green_light">

    </LinearLayout>
</LinearLayout>

예제 2번과 동일한 구조이지만 width 값만 100dp VS 0dp 로 잡았습니다. 

이경우 한쪽은 100dp 만큼 또 다른 한쪽은 0dp 만큼 길이를 가진채 나머지 남은 길이를 1:1 로 배분하게 됩니다. 

예를 들어 부모 LinearLayout 의 길이가 400dp 라고 했을때 위와 같은 경우 왼쪽은 100dp + 150dp 오른쪽은 150dp 의 길이를 가지게 된다는 것을 보여주는 예제 입니다. 

Example 4

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="#58ac92"
    android:gravity="center"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="gravity center"
        android:textSize="10dp"/>

</LinearLayout>

이번 예제에는 부모 LinearLayout 에 gravity 라는 속성 값을 추가 했습니다. 

이는 부모 LinearLayout 내부에서 자식 뷰의 위치를 지정하는 속성값으로 center / right / left / bottom / top 등의 값들이 있으며 서로 상반되는 값이 아니라면 "|" 기로를 이용하여 동시 적용이 가능합니다. 

4번 예제는 gravity 값을 center 로 지정하여 자식뷰인 버튼이 레이아웃의 한 가운데 들어 오게 한 예제 입니다. 

Example 5

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="#58ac92"
    android:gravity="right|bottom"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="gravity right and bottom"
        android:textSize="10dp"/>

</LinearLayout>

예제 4번 설명중 언급한 부분인데요. 

gravity 값을 "|" 기호를 이용하여 설정한 예제 입니다. 

gravity="right|bottom" 으로 설정하여 자식뷰를 부모뷰의 오른쪽 아래 방향에 위치하도록 설정했습니다. 

그 외에도 많은 속성 값들이 있지만 특히 많이 사용하는 속성 값들을 이용하여 예제를 작성 하였습니다. 

LinearLayout 을 이해하는데 많은 도움이 되었길 바라며 다음에는 RelativeLayout 에 대해 준비해 보겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D