리니어 레이아웃(Linear Layout)

~19/5/23(목)11:40.1차

리니어 레이아웃

Linear(리니어)는 '선' 이라는 의미를 내포하고 있습니다.

즉 리니어 레이아웃은 뷰들의 배치를 선같이 한줄로 나열한다는 것 입니다.

기본적으로 단방향으로 뷰들을 쌓아 배치합니다.

간단히 테트리스를 생각하시면 됩니다.

주요 속성

orientation
weight

orientation =horizontal, vertical

horizontal =가로방향으로 나열
vertical =세로 방향으로 나열

뷰가 배치될 방향 결정

weight
리니어 레이아웃에 배치된 뷰들의 속성으로 레이아웃 내에서
얼마만큼의 크기를 차지할지 정하는  비율

예 ) 1:1 - 1대1의 비율로 리니어 레이아웃의 공간을 차지

1:2 1대 2의 비율, 1:3 1대 3의 비율로 레이아웃 내의 공간을 차지

₩표로 수정, 각 속성별 간단 설명 그림 첨부₩

리니어 레이아웃을 한번 적용 시켜 보겠습니다.

네모 박스와 같이 기존 적용되어 있던 Constrint Layout을 Linear Layout으로
다시 작성해 줍니다.

프리뷰를 보면 기존 제약 레이아웃이 리니어 레이아웃으로 바뀌었고,
중간에 위치했던 Hello World! 문구가 좌측 상단으로 옮김이 확인 되었습니다.



간단한 예제를 만들며 리니어 레이아웃을 공부해 보겠습니다.

먼저 완성된 예제를 살펴보겠습니다.

화면 하단부터 차례 차례 큰 사각형의 1/2배 씩 크기가 작아지는 모양이 보입니다.
이 예제는 리니어 레이아웃의 특징을 잘 나타낸 예제라고 생각합니다.

예제 코드를 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/holo_red_light"
    tools:context=".MainActivity"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:background="@android:color/holo_orange_light"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:background="@android:color/holo_orange_dark"
            >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:background="@android:color/holo_green_light"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical"
                    android:background="@android:color/holo_blue_light"
                    >
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="horizontal"
                        android:background="@android:color/holo_purple"
                        >
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:background="@android:color/darker_gray"
                            >
                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:orientation="horizontal"
                                android:background="@android:color/black"
                                >

                            </LinearLayout>
                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                >

                            </LinearLayout>
                        </LinearLayout>
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            >

                        </LinearLayout>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        >

                    </LinearLayout>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    >

                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                >

            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            >

        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        >

    </LinearLayout>
</LinearLayout>

간단해 보이는 예제임에도 코드가 매우 길어 보여 당황스럽지만,
막상 코드를 읽어보면 별것 없습니다.

색칠한 레이아웃 하나, 빈 레이아웃 하나씩 번갈아가며
사용한 것 이므로 매우 단순한 구조입니다.

이제 코드의 일부를 보겠습니다.

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="horizontal"

android:background="@android:color/holo_orange_light"

>

<!-- 이곳에 다른 뷰(레이아웃, 위젯 등) 추가 -->

</LinearLayout>

이것이 기본적인 리니어 레이아웃의 구조 입니다.

width로 가로의 크기를
height로 세로의 크기를
weight로 비율의 크기를
orientation으로 방향을,
background로 백그라운드 색상을 정해
레이아웃의 속성을 정해줍니다.

그 후, 서술했듯  꺽쇠 밑의 부분에 다른 뷰들을 집어 넣어 배치를 할 수가 있습니다.

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="horizontal"

android:background="@android:color/holo_orange_light"

>

<LinearLayout 

android:layout_width="match_parent" 

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="vertical" 

android:background="@android:color/holo_orange_dark"

>

</LinearLayout>



</LinearLayout>

이런식으로 뷰들을 차례 차례 배치해 예제와 같이 만들어 나갈 수 있습니다.
단, 중간중간 색 표시를 위해 각 레이아웃마다 빈 레이아웃도 1개씩 추가를 해
각기 다른 색을 보일수 있도록 하였습니다.

₩영상 첨부₩