[안드로이드 기초] 리니어 레이아웃 (LinearLayout) 개념과 사용법

●  목적

레이아웃은 View를 배치할 수 있도록 배치 방식을 정의해 둔 것이다. 안드로이드 개발 플랫폼에서는 각각 사용 목적에 따라 View 들을 효과적으로 배치할 수 있도록 여러가지 레이아웃을 제공하는데, 이번 포스팅에서는 LinearLayout의 정의와 사용 방법에 대해 알아보도록 한다. 제일 대표적이고 일반적인 레이아웃이 바로 LinearLayout이 되겠다.

---

●  참고

View와 View Group의 개념이 헷갈릴 경우, 아래의 포스팅을 참고하면 도움이 될 것 같다.

[안드로이드 기초] 뷰 (View)와 뷰 그룹 (View Group) 개념 알아보기

 

---

●  LinearLayout 정의

출처 : tutorialspoint

LinearLayout은 프로그래머가 지정해 둔 방향대로 View를 쌓는다. 먼저 선언한 View의 순서대로 Layout에 하나씩 차곡차곡 배치되게 된다. View 들은 겹치지 않는다.

 

---

●  View의 배치방향 (orientation)

View를 배치하는 방향 (orientation)을 수평 (horizontal)으로 지정할 수도 있고, 수직 (vertical)으로 지정할 수도 있다. 일상 생활과 한 번 비유해서 손쉽게 살펴보도록 하자.

 

 

 

▣ android:orientation="horizontal"

우리가 도미노를 만들 때, 나무 막대기를 세워서 좌측에서 우측까지 하나하나 쌓기도 한다. 이는 지면 기준으로 따졌을 때 수평 방향으로 하나하나 쌓는 것이다.

horizontal 속성을 적용시킨 안드로이드 LinearLayout에서는 좌측에서 우측(→)으로 View를 하나씩 배치한다.

 

안드로이드 스튜디오에서의 실습 예시는?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼1"
        android:textSize="35dp"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼2"
        android:textSize="35dp"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼3"
        android:textSize="35dp"/>

</LinearLayout>

 

 

▣ android:orientation="vertical"

 

택배 박스를 쌓는 것은 어떤가. 하나씩 차곡차곡 위아래로 쌓는다. 이는 지면 기준으로 따졌을 때 수직 방향으로 하나하나 쌓는 것으로 LinearLayout의 개념에서 바라본다면, 마찬가지로 방향 (orientation)이 수직 (vertical)이 된다.

물론 일상생활과 조금의 차이는 있다. 우리는 택배 박스를 쌓을 때 아래에서 위(↑)로 쌓지만, vertical 속성을 부여한 안드로이드 LinearLayout에서는 위에서 아래 (↓) 로 View를 하나씩 배치한다.

 

안드로이드 스튜디오에서의 실습 예시는?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼1"
        android:textSize="35dp"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼2"
        android:textSize="35dp"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼3"
        android:textSize="35dp"/>

</LinearLayout>

 

---

●  View의 정렬방향 (layout_gravity, gravity)

LinearLayout 내부에 속해있는 View 들의 배치 위치를 결정하는 속성이다. layout_gravity 속성과 gravity 속성이 있는데, 이름은 비슷해도 사용 방법은 전혀 다르다.

▣ android:layout_gravity="위치"

부모 View (ex. LinearLayout 등) 의 자식 View의 정렬 위치를 지정한다.

어렵게 생각할 것 없이, 간단하게 생각해 보자. gravity 단어 앞에 layout 한 글자가 더 붙었다. 이를 한 단어씩 나눠서 생각해 본다면, layout + gravity 의 합성어가 된다. 직독직해로 해석 해 보면, 레이아웃 + 중력이 된다.

View 레이아웃 자체에 중력을 준다는 의미가 되겠다.

 

▣ android:gravity="위치"

View 내부 콘텐츠의 위치를 지정한다.

gravity를 해석해 보면 말 그대로 중력이다. 코드 이해가 잘 안 된다면 일상생활의 예시를 통해 이해해 보자. 뉴턴은 사과 나무 아래에 누워있다가 사과가 떨어지는 것 덕분에 지구의 중력을 발견했다.

이를 android:gravity 처럼 생각해 본다면, 지구 (layout) 안에 사과 나무 (View) 가 있었고, 중력이 아래 (gravity="bottom") 로 주어졌다. 이 때문에 사과 나무 (View) 는 그대로 있고, 사과 (View 내부 콘텐츠) 가 떨어졌다고 할 수 있지 않을까?

 

정확한 비유 까지는 아니지만...

어느정도 이해하는데 도움이 될 것이라고는 생각한다. 실제로 나도 이 부분이 계속 헷갈리고 어려웠지만, 이 부분을 알고있지 못하면 View 배치에 있어 꽤 곤란한 상황이 되기 때문에 내 마음대로 상황을 만들어 가면서 이해하도록 노력했다.

 

layout_gravity는 layout + gravity (View 자체의 중력) 로 이해하고, gravity는 상기 적어둔 예시를 통해 View 내부에 중력값이 적용되기 때문에, View 내부 콘텐츠가 중력의 영향을 받는다고 이해한 것이다.

▣ 위치값

상단 정렬 : top
하단 정렬 : bottom
좌측 정렬 : start
우측 정렬 : end
중앙 정렬 : center

Tip. RTL 언어 문화권 대응으로 안드로이드 API 17부터 추가된 용어가 start와 end이다.

       우리나라처럼 텍스트를 좌측에서 우측으로 읽는 문화권은 start = left, end = right로 대응되고,

       아랍처럼 텍스트를 우측에서 좌측으로 읽는 문화권은 start = right, end = left에 대응된다.

 

필요한 경우, | 연산자를 통해 값들을 조합해서 사용할 수 있다. 단, | 연산자 사이에 공백이 없어야 한다. 예를 들어, 상단 좌측 정렬은 "left|top" , 하단 우측 정렬은 "end|bottom" 처럼 말이다.

---

●  View의 정렬비율 (weight)

LinearLayout의 orientation (방향)대로 View가 배치된다는 사실을 앞서 알아보았다. weight 속성은 부모 속성인 LinearLayout의 orientation 방향값을 상속받아 수평 또는 수직으로 정렬된 View들의 정렬비율을 결정한다.

 

 

 

▣ LinearLayout 속성값이 horizontal 일 때, android:layout_weight="값"

horizontal 속성은 View 를 수평으로 배치한다. 따라서 android:layout_weight="값" 은 수평 방향으로 정렬비율이 결정되어 배치된다.

layout_weight는 무조건 남아있는 여유 공간에 비율을 맞추어 배치하므로, layout_weight 값이 적용되기 위해서는 View가 배치되는 방향의 값을 0으로 주어야 한다.

따라서 LinearLayout 속성값이 horizontal 일 경우,
View에 android:layout_width="0dp" 값을 주어야 수평 방향의 정렬비율인 android:layout_weight="값" 이 정상적으로 결정된다.

 

안드로이드 스튜디오에서의 실습 예시는?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="버튼1"
        android:textSize="10dp"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="버튼2"
        android:textSize="10dp"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="버튼3"
        android:textSize="10dp"/>

</LinearLayout>

 

 

 

▣ LinearLayout 속성값이 vertical 일 때, android:layout_weight="값" 

vertical 속성은 View 를 수직으로 배치한다. 따라서 android:layout_weight="값" 은 수직 방향으로 정렬비율이 결정되어 배치된다.

layout_weight는 무조건 남아있는 여유 공간에 비율을 맞추어 배치하므로, layout_weight 값이 적용되기 위해서는 View가 배치되는 방향의 값을 0으로 주어야 한다.

따라서 LinearLayout 속성값이 vertical 일 경우,
View의 android:layout_height="0dp" 값을 주어야 수직 방향의 정렬비율인 android:layout_weight="값" 이 정상적으로 결정된다.

 

안드로이드 스튜디오에서의 실습 예시는?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="버튼1"
        android:textSize="10dp"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:text="버튼2"
        android:textSize="10dp"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:text="버튼3"
        android:textSize="10dp"/>

</LinearLayout>

---

●  View의 기준점에 맞춘 정렬 (baselineAligned)

View들의 높이와 너비가 각기 다를 경우, 기준점을 정해서 정렬을 실시한다. 이 옵션은 View들이 수평으로 나란히 배치되어 있을 때만 적용되므로, android:orientation="horizontal" 일 때만 적용되니 참고하자. baselineAligned의 기본 default 값은 true 이며, 아래 사진을 통해 조금 더 알아보도록 하자.

 

 

 

▣ android:baselineAligned="true"

따로 지정해 주지 않아도 baselineAligned의 값은 true이다. baselineAligned 값이 true일 경우, Text들의 첫번째 줄을 기준점으로 삼아 정렬되기 때문에 위와 같은 현상이 벌어진다. 그냥 보았을 때는 일렬로 정렬되어 있지 않아 보이지만, 자세히 보면 각 Text들의 첫번째 줄을 기준으로 삼아 정렬되어 있는 모습이 확인된다.

 

 

 

▣ android:baselineAligned="false"

위와 같은 상황을 방지하기 위해서는, baselineAligned의 값을 false로 지정하면 된다. 상황에 맞게 baselineAligned의 값을 default 값인 true로 지정할 것인지, false로 지정할 것인지 판단해 활용하면 되겠다.