[Android] 안드로이드 layout_weight 가로세로 비율 맞추기

◇ 안드로이드 layout_weight 란?

 

  안드로이드의 weight를 알아보기 전에 weight의 뜻은 무게입니다. 무게가 layout이랑 무슨 관련이 있나 싶지만 layout의 가로 세로의 길이를 무게 단위로 나타내어 정렬하는 의미입니다.

 

 

  예를 들어 설명하자면, 안드로이드 가로가 100dp인 디바이스가 있습니다. 좌측에 70dp의 TextView 우측에 30dp인 ImageView를 설정하여 개발하여 apk를 배포하였습니다. 가로가 200dp인 다른 디바이스에서 이 어플리케이션을 사용한다면 반쪽으로 쪼개져서 우측의 남은 100dp는 공백으로 처리가 됩니다. 가로 세로크기를 상수로 지정하면 디바이스 크기에 따라 크게 보이거나 작게보일 수 있다는 제한이 있습니다.

  이 문제를 해결하기 위해 layout_weight를 사용한다면 원하는 특정 비율로 길이를 맞추어 디바이스 크기에 제한없이 Layout을 표현할 수 있습니다.

 

 

 

◇ 안드로이드 layout_weight 사용법

 

  안드로이드 weight 는 고정 비율을 주고싶은 Layout 또는 컴포넌트에 android:layout_weight="1" 을 넣어주면 됩니다. android:weightSum="5" 값을 상위(부모) 레이아웃에게 설정하고 하위 레이아웃에게 layout_weight를 3과 2를 각각 설정해주면 3:2의 비율로 레이아웃 길이가 설정됩니다. weighSum은 하위 각각 레이아웃 weight의 값의 합이 되어야 하며 값을 초과하게될 경우 레이아웃이 View에서 벗어나게 됩니다. 말로 설명하니 이해가 안되죠? 소스를 보며 확인해 봅시다.

 

 

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Radio Button"
            android:textSize="30dp" />

        <RadioButton
            android:id="@+id/r_btn1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="라디오 버튼1" />

        <RadioButton
            android:id="@+id/r_btn2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="라디오 버튼2" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:text="Radio Group"/>

        <RadioGroup
            android:id="@+id/radioGroup"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RadioButton
                android:id="@+id/rg_btn1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="라디오 그룹1 버튼1" />

            <RadioButton
                android:layout_weight="1"
                android:text="라디오 그룹1 버튼2"
                android:id="@+id/rg_btn2"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />

        </RadioGroup>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:text="Radio Group"/>

        <RadioGroup
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RadioButton

                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="라디오 그룹2 버튼1" />

            <RadioButton
                android:layout_weight="1"
                android:text="라디오 그룹2 버튼2"

                android:layout_width="0dp"
                android:layout_height="wrap_content" />

        </RadioGroup>

    </LinearLayout>

</LinearLayout>

10 : LinearLayout의 layout_weight 값을 2로 설정

37 : LinearLayout의 weight 값을 1로 설정

73 : LinearLayout의 weight 값을 1로 설정

 

첫번째 레이아웃의 height 비율은 2

두번째 레이아웃 height 비율은 1

세번째 레이아웃 height 비율은 1

 

높이는 2 : 1 : 1 비율로 설정을 하였습니다.

 

 

 

하나 주의해야할 점은 비율을 설정하고 싶은 길이가, 가로인지 세로인지 결정해야하며 세로로 설정하였다면 weight를 주는 레이아웃의 height값은 0dp로 설정해주어야 합니다. warp_content 로 안하시길 바랍니다. wrap_content로 설정하였을 때 비율이 맞지 않는 경우가 자주 발생하니 weight를 사용하신다면 꼭 0dp 사용하셔야합니다!! 중요합니다. 더 정확하게 설정하기 위하여 상위 레이아웃에 weightSum을 사용하면 더욱 좋습니다.

 

 

 

 ◇ layout_weight 문제점

 

   문제점이라기보다는 장점이 많은데 굳이 하나의 문제점을 뽑아보자면 안드로이드 디바이스는 크기가 손바닥 내외의 크기입니다. 하지만 테블릿의 경우는? 얘기가 달라집니다. 비율대로하여 값을 넣어주었는데 가로세로 크기가 광범위하게 커져버리니 레이아웃 내의 TextView 값이나 특정 레이아웃들이 길쭉하거나 작게 보이게되는 경우가 발생합니다. 이부분을 처리해주는 방식을 따로 설정해 주어야합니다. 이미지 같은경우도 크게 작용합니다. 이미지 사이즈는 레이아웃이 커짐에 따라 길이가 동시에 증가하지 않습니다. 이를 대처하여 나인패치를 적용해 주어야 하는데 저도 시도해보지 않아서 추후에 사용해보고 올리겠습니다. 감사합니다.

 

 

 

 잘못된 점 지적은 환영하며

 

궁금하신 점은 댓글로 남겨주세요