[Android] LinearLayout(선형 레이아웃) 정리

LinearLayout이란

LinearLayout은 뷰를 가로나 세로 방향으로 나열하는 레이아웃 클래스이다.

orientation이라는 속성을 통해서 horizontal(가로)이나 vertical(세로)값을 방향을 지정한다.

LinearLayout은 방향만 설정하면 뷰를 추가한 순서대로 나열한다. 화면에서 벗어나더라도 줄을 자동으로 바꾸지 않는다.

 

https://devlog-h.tistory.com/28 : 이미지 출처

 

위 그림 처럼 만약 LinearLayout의 orientation 속성 값을 vertical로 지정했다면 세로로 나열하고, horizontal로 나열한다면 가로로 나열한다.

 

방향만 설정한다면 뷰를 추가한 순서대로 나열한다.

 

그렇다면 가로세로가 중첩된 구조는 LinearLayout으로 만들 수 없을까? 아니다.

이럴 때는 LinearLayout을 중첩하면 된다. 레아웃 클래스도 뷰이므로 다른 레이아웃 클래스에 포함할 수 있다. 

 

LinearLayout 가중치

 layout_weight 속성을 사용하면 수치를 따로 계산하지 않아도 각 뷰에 설정한 가중치로 여백을 채울 수 있어 편리하다.

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="BUTTON1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON2" />

</LinearLayout>

 

위와 같이 버튼 2개를 가로로 출력했을 때, BUTTON1에 android:layout_weight="1" 이라고 속성만 추가해줘도, 가로 방향의 모든 여백을 BUTTON1으로 채우는 것을 확인할 수 있다.

 

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="BUTTON1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="BUTTON2" />

</LinearLayout>

 

위 코드에서는 BUTTON2에도 속성을 추가하였습니다. 그렇다면 이것은 화면에 어떤식으로 나올까요?

가로 여백을 각각 1/4만큼, 3/4만큼 나누어 차지합니다.

 

그렇다면 중첩된 레아이웃에서는 어떤식으로 작동할까?

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="BUTTON1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:text="BUTTON2" />
    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="BUTTON3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON4" />

</LinearLayout>

 

 

각 레이아웃의 가중치가 서로 영향을 끼치지 않는 모습을 보이고 있다.

즉, layout_weight는 같은 영역에 있는 뷰끼리만 여백을 나누어 차지하는 것을 알 수 있다.

 

LinearLayout 정렬

뷰를 정렬할 때는 gravity와 layout_gravity속성을 사용한다. 만약 이 속성을 이용하지 않는다면 기본값은 lefy/top이다. 즉, 왼쪽 위를 기준으로 정렬한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:textSize="15dp"
        android:textColor="#FF0000"
        android:background="@color/black"
        android:textStyle="bold"
        android:text="Hello World"
        android:gravity="right||bottom"
        android:layout_gravity="center_horizontal"

</LinearLayout>

 

 

gravity 속성을 right||bottom(오른쪽 아래) 값으로, layout_gravity 속성 값을 center_horizontal(가로로 가운데)값으로 지정했다.

gravity와 layout_gravity 값은 모두 뷰를 정렬하는 속성이지만 정렬 대상이 다르다.

gravity 속성의 정렬 대상은 콘텐트이다. 따라서 위 예에서는 텍스트 뷰의 콘텐트인 "Hello World" 문자열이 텍스트 뷰가 차지하는 영역에서 오른쪽 아래에 표시된다.

layout_gravity는 뷰 자체를 정렬하는 속성이다. 따라서 텍스트 뷰 전체가 가로로 가운데에 표시된다.

참고

https://developer.android.com/guide/topics/ui/layout/linear?hl=ko

선형 레이아웃  |  Android 개발자  |  Android Developers