[Android] LinearLayout을 사용해서 화면을 일정 비율로 3등분하기

Sample app을 만들고 있는데 화면을 3등분 하려고 한다.

정확히 동일한 가중치로 나누지는 않고 중간에 본문은 좀 많이 할당을 하고, 상단과 하단은 조금 적게 할당을 하고 싶었다.

비율로 따지자면 1:3:1 정도?

 

LinearLayout에 weightSum을 사용하면 된다.

나는 LinearLayout 안에 LinearLayout을 추가해서 layout_weight를 사용했다.

 

전체 LinearLayout에 weightSum = 500을 주고

그 밑으로 layout_weight = 100, 300, 100을 주면 된다.

 

전체 코드를 보면

<?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:weightSum="500"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:layout_weight="100" >
        <TextView
            android:text="Script Service"
            android:textSize="22dp"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
    
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="300"
        android:fillViewport="true"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="20dp">
            <TextView
                android:text="(Script)"
                android:textAlignment="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/tv_script"
                android:textColor="#00FF00"
                android:textSize="22dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:layout_weight="100">
        <Button
            android:id="@+id/btn_record"
            android:text="START"
            android:layout_gravity="center"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

 

결과 화면은 다음과 같다.