Android

[Android] Linear Layout(선형 레이아웃)

jane.dev 2021. 10. 21. 22:59
반응형
Linear Layout
세로 또는 가로의 단일 방향으로 하위요소를 정렬하는 뷰 그룹
모든 하위 요소들은 순차적으로 스택됨

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <!-- 위젯 배치 -->
</LinearLayout>

android:orientation 속성을 이용해 세로(vertical) 또는 가로(horizontal)의 레이아웃 방향 지정

 

LinearLayout 내부에 중첩해서 LinearLayout을 작성하면 구획을 나눠 배치가 가능해짐

<!-- 베이스가 되는 레이아웃으로 해당 구획 내부에 중첩된 레이아웃을 작성 -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">
    <!-- 중첩 1, orientation 속성이 vertical이기 때문에 가장 상단에 위치 -->
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:background="@color/white"
        android:orientation="horizontal">
        <!-- 중첩 1에서 다시 좌우 두개의 레이아웃으로 나눠짐 1 -->
        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:background="#EFEBEB"
            android:orientation="vertical"
            android:gravity="center|left"><!-- gravity 속성을 중앙이면서 왼쪽으로 지정 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"></Button>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"></Button>
        </LinearLayout>
        <!-- 중첩 1에서 다시 좌우 두개의 레이아웃으로 나눠짐 2 -->
        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:background="#EFEBEB"
            android:orientation="vertical"
            android:gravity="bottom|right"><!-- gravity 속성을 하단이면서 오른쪽으로 지정 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"></Button>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"></Button>
        </LinearLayout>
    </LinearLayout>
    <!-- 중첩 2, 중앙에 위치 -->
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:background="@color/white"
        android:orientation="vertical">
        <!-- 중첩 2 내부의 레이아웃 -->
        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:background="#EFEBEB"
            android:orientation="horizontal"
            android:gravity="center"><!-- gravity 속성을 중앙으로 지정 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"></Button>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"></Button>
        </LinearLayout>
    </LinearLayout>
    <!-- 중첩 3, 가장 하단에 위치 -->
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:background="@color/white"
        android:orientation="vertical">
        <!-- 중첩 3 내부의 레이아웃 -->
        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:background="#EFEBEB"
            android:orientation="vertical">
            <Button
                android:id="@+id/btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"
                android:layout_gravity="right"></Button>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"></Button>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="button"
                android:backgroundTint="@color/black"
                android:layout_gravity="right"></Button>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:layout_gravity="bottom|left"
                android:text="button"
                android:backgroundTint="@color/black"></Button>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

android:layout_weight 속성으로 해당 레이아웃에 가중치 할당이 가능한데,

android:orientation="vertical" 인 경우에는 위에서 아래로 스택되기 때문에, android:layout_height을 "0dp"로 설정

android:orientation="horizontal" 인 경우에는 왼쪽에서 오른쪽으로 스택되기 때문에, android:layout_width을 "0dp"로 설정

 

가장 하단의 중첩된 레이아웃에는 다른 레이아웃과 달리 위젯에서 android:layout_gravity 속성을 이용해서 위치를 지정했는데,

android:gravity는 레이아웃에 작성해 해당 레이아웃에 포함된 위젯을 정렬하고

android:laytout_gravity는 위젯에 작성해 해당 위젯의 레이아웃에서 속성값에 따라 정렬