[Android] 안드로이드 레이아웃 - LinearLayout(리니어 레이아웃) 사용 방법

이전 글에서 Layout의 종류 및 제작한 디자인을 보여 드렸습니다.

안드로이드 레이아웃 - 종류 및 예시

이번 글에서는 LinearLayout에 대해 좀 더 상세하게 사용을 해보도록 하겠습니다.

 

LinearLayout을 사용하는 방법은 간단합니다.

아래의 두 가지만 기억하시면 됩니다.

android:orientation=""
android:layout_weight=""​

사용법을 알아보겠습니다!~

LinearLayout 예제

먼저 LinearLayout을 만들어 줍니다.

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

세로 방향이기 때문에 android:orientation="vertical"을 설정해 줍니다.

그리고 안에 뷰들을 집어 넣겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="예제1"
        android:background="#e6e6e6"
        android:textSize="20sp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="예제2"
        android:background="#e6aabb"
        android:textSize="20sp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="예제3"
        android:background="#aabbcc"
        android:textSize="20sp" />
</LinearLayout>

간단하죠? 내가 쓰고 싶은 방향을 설정해준 후 안에 뷰들을 넣어주면 됩니다.

그러면 한 방향으로만 써야할까요? LinearLayout을 중첩해서 내가 원하는 방향으로 사용할 수 있습니다.

 

LinearLayout 예제

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="예제1"
        android:background="#e6e6e6"
        android:textSize="20sp" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="예제2"
            android:background="#e6aabb"
            android:layout_weight="1"
            android:textSize="20sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="예제3"
            android:layout_weight="1"
            android:background="#aabbcc"
            android:textSize="20sp" />
    </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="예제4"
        android:background="#eaccee"
        android:textSize="20sp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="예제5"
        android:background="#aaeecc"
        android:textSize="20sp" />
</LinearLayout>

여기서 예제2, 예제3을 보면 android:layout_weight="1"을 넣어주었습니다.

이 설정은 가중치를 설정해 주는 건데요

LinearLayout에서 자식 뷰들의 width(Horizontal일 때), height(Vertical일 때)을 match_parent를 설정하고 각자 weight값을 1을 주게 되면 모두 동일한 넓이 혹은 높이가 적용되게 됩니다.

 

 그러면 검색창 처럼 EditText와 Button을 넣어서 두 뷰의 크기가 다르게 적용되면서 LinearLayout을 사용할 때 어떻게 값을 주면 될까요??

 제가 처음 LinearLayout을 사용할 때 방금 말한 것을 어떻게 적용해야하는지 몰라 weight값을 20을 주고 나머지 하나에는 1을 주고 이런식으로 막 사용을 했었습니다.ㅋㅋㅋ

 그러면 바로 예제를 보여드리겠습니다.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

최소한의 크기를 가질 뷰(Button)는

 - android:layout_width="wrap_content"를 설정

나머지 공간을 채울 뷰(EditText)는

 - android:layout_width="0dp", android:layout_weight="1"을 설정

 

 

이 정도만 사용하면 LinearLayout은 내가 사용할 줄 안다! 라고 말할 수 있습니다.

LinearLayout을 이용하여 다양한 크기의 뷰들을 적용해 보시면 금방 익숙해 지실겁니다.

 

다음 글에는 ConstraintLayout을 사용해보도록 하겠습니다.

 

안드로이드에 관련한 궁금한 사항을 댓글이나 방명록에 작성해 주시면 답변드리겠습니다~!