[모든 팔레트 정복] 5. Layout(레이아웃) - 개요와 LinearLayout

안녕하세요? 닉네임간편입니다. 이번 시간에는 팔레트 요소 중 Layout(레이아웃)에 대해서 알아보겠습니다.

먼저 설명에 앞서, 레이아웃 자체에 대해서 설명드리겠습니다.

1. Layout이란

레이아웃은 UI를 위한 구조를 정의하며, 모든 요소는 뷰와 뷰 그룹 객체의 계층 구조를 사용하여 빌드됩니다.

이때 뷰는 위젯이라고도 하며, 일반적으로 흔히 사용되는 TextView나 ImageView 등에 해당합니다.

뷰 그룹은 일반적으로 레이아웃이라고 하며 여러 유형이 있습니다.

2. 만드는 법

레이아웃은 XML 파일로 선언하여 만들 수 있고, 또한 런타임에 레이아웃 요소를 인스턴스 화해서 만들 수 있습니다. 그러나 XML 파일로 레이아웃을 만들면 해당 코드를 분리할 수 있어 유지보수에 더 효과적이고, 다양한 화면 크기와 방향에 여러 가지 레이아웃을 쉽게 적용할 수 있습니다. 따라서 주로 XML 파일로 만들게 됩니다.

이때 XML 파일에서 루트는 딱 하나만 존재해야 하며, 뷰와 뷰 그룹 모두 루트가 될 수 있습니다.

이후 액티비티에서 onCreate() 콜백 메서드가 호출될 때 레이아웃 리소스를 로드하면 앱에서 화면이 나오게 됩니다.

3. 참조

앱을 컴파일할 때 XML 파일로 만든 레이아웃에 있는 요소를 참조하기 위해선 ID가 필요합니다.

ID란, 트리 내에서 뷰를 고유하게 식별할 수 있도록 하는 일종의 식별자입니다. 앱을 컴파일할 때는 ID가 정수형으로 참조되지만, 우리가 ID를 지정할 때에는 문자열로 지정합니다.

아래는 예시입니다.

android:id="@+id/view

@은 XML 파서가 ID 문자열의 나머지를 파싱하고 확장하여 ID 리소스로 식별해야 함을 나타냅니다.

그 뒤의 + 기호는 이것이 새 리소스 이름이며, 이것을 반드시 생성하여 리소스에 추가해야 한다는 것을 뜻합니다.

이것을 앱에서 참조하려면 일반적으로 onCreate() 메서드 내에서 뷰 객체의 인스턴스를 생성하고 이를 참조합니다.

var textView : TextView = findViewById(R.id.textView)

혹은 뷰 결합을 사용할 수도 있습니다.

아래는 예시입니다.

private lateinit var binding : ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle) {
		super.onCreate(savedInstanceState)
	  binding = ActivityMainBinding.inflate(layoutInflater)
    val rootview = binding.root
	   setContentView(rootview)

		binding.textView.setText("바꿈")
}

 

4. LinearLayout

1) 정의

용어 그대로 수직 혹은 수평 방향으로 하위 요소를 배치하는 레이아웃입니다. 이때 배치하는 방향은 orientation을 사용해 지정할 수 있습니다.

2) 유용성

만들어진 순서대로 뷰가 배치되기 때문에 가장 간단하게 뷰를 배치할 수 있습니다.

3) 위치 지정 방법

추가되는 모든 하위 요소는 수직 혹은 수평 방향에 따라 순서대로 쌓이게 됩니다.

4) 가중치

weight 속성을 통해 개별 요소에 '가중치'를 할당할 수 있습니다. 쉽게 말해, 특정 뷰의 '중요도'에 따라서 화면의 공간을 차지할 수 있도록 합니다. weight 값은 기본으로 0이며, 뷰 그룹의 여백(남은 모든 공간)이 선언된 비율에 따라 요소들에 할당됩니다.

이제부터 그림을 통해 살펴보겠습니다.

A) 두 개의 View의 weight을 각각 1로 설정해준 것입니다. 이때 두 뷰 모두 width가 0dp이기 때문에 정확하게 전체 뷰의 절반씩 차지하게 됩니다(1:1)

B) 만일 하나의 뷰의 width 값이 설정되었다면, 그 값을 제외한 나머지 여백을 절반씩 차지합니다. 본 예시에서는 왼쪽 뷰의 width가 50dp로 설정되어있는데, 그 값을 제외한 나머지 여백을 1:1로 나누어 할당받으니 한쪽으로 치우쳐진 것을 확인할 수 있습니다.

C) weightsum 이라는 기능이 있습니다. 이는 쉽게 말해 weight로 전체적인 비율을 설정할 때 그 가중치들의 합의 최댓값을 설정해주는 것입니다. 그림을 보면 아무리 1:1의 비율이라고 하더라도 weightsum이 7이기 때문에 화면 전체를 차지하진 못하는 걸 확인할 수 있습니다.

D) gravity를 통해 요소들을 정렬할 수 있습니다. 그림을 보면 첫 번째 초록색 요소의 layout_gravity를 center_horizontal로 설정하면 수평 방향으로 가운데에 위치하도록 합니다.

그런데 이때 layout_gravity와 gravity는 차이가 있습니다. 첫 번째 요소는 layout_gravity를 이용해 뷰 자체를 정렬하였습니다. 그러나 두 번째 요소는 gravity="center"를 이용해 자신의 뷰 안에 있는 요소, 즉 문자열을 가운데에 정렬했습니다.

즉, layout_gravity는 요소 자신을, gravity는 요소 자신의 하위 요소들을 정렬하는 것입니다.

 

코드는 다음과 같습니다.

[activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@color/teal_700"/>
        <View
            android:id="@+id/view2"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@color/purple_700"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:orientation="horizontal">
        <View
            android:layout_width="50dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@color/teal_700"/>
        <View
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@color/purple_700"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:orientation="horizontal"
        android:weightSum="7">
        <View
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@color/teal_700"/>
        <View
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@color/purple_700"/>
    </LinearLayout>
</LinearLayout>

5. 마무리

이번 시간에는 Layout 자체에 대해서, 그리고 LinearLayout에 대해서 알아보았습니다.

Layout은 종류가 많고 특히 중요하기 때문에 이번 시간에는 LinearLayout에 대해서만 다루고, 다음 시간부터는 하나씩 다루겠습니다.