선형 레이아웃 2편 Linear Layout

Linear Layout을 사용해서 6개의 블록을 만들어봅시다.

 

바로 코드를 확인합니다.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#F44336"
            android:text="블록1"
            android:textColor="@color/black"
            android:textSize="50dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#9C27B0"
            android:text="블록2"
            android:textColor="@color/black"
            android:textSize="50dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#FFEB3B"
            android:text="블록3"
            android:textColor="@color/black"
            android:textSize="50dp" />

    </LinearLayout>

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#2196F3"
            android:text="블록4"
            android:textColor="@color/black"
            android:textSize="50dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#8BC34A"
            android:text="블록5"
            android:textColor="@color/black"
            android:textSize="50dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#009688"
            android:text="블록6"
            android:textColor="@color/black"
            android:textSize="50dp" />

    </LinearLayout>


</LinearLayout>

 

에뮬레이터 실행 결과

우선 부모 뷰의 Linear Layout 중에서 Orientation 속성을 Horizontal로 해주면, 수평 방향으로 전체적인 방향이 설정됩니다. 부모 뷰 안에 Linear Layout으로 이루어진 자식 뷰 하나를 생성합니다.

해당 자식 뷰가 전체적인 화면 UI를 차지하도록, width=0dp, height=match_parent으로 설정합니다. 만약 width="match_parent"로 설정하면, 두 번째 Linear Layout 자식 뷰에 포함된 블록 3~6이 보이지 않게 됩니다.

weight은 1로 설정합니다.

반응형

첫 번째 Linear Layout 부모 뷰에 TextView 자식 뷰 3개를 넣어줍니다. weight은 1로 설정하여 전체 비율 1에서 자식 3명이 각각 1씩 할당받도록 지정합니다.

 

두 번째 Linear Layout 부모 뷰 안에도 마찬가지로 TextView 자식 뷰 3개를 넣어줍니다.