[Android] 레이아웃 Layout - 제약 레이아웃 / 리니어 레이아웃 / 테이블 레이아웃 / 프레임 레이아웃 / Constraint Layout / Linear Layout / Table Layout / Frame Layout / 레이아웃 종류 / 레이아웃 생성

 

안드로이드 앱을 백엔드와 프론트엔드로 구분한다면

다음과 같이 볼 수 있다.

 

· 백엔드 - 자바 & 코틀린

· 프론트엔드 - 레이아웃

 

 

앱 개발자라면, 백엔드 언어만 공부할 것이 아니라

프론트엔드를 담당하는 레이아웃 또한 다룰 줄 알아야 한다.

 

이번 포스팅에서는 레이아웃에 대해 공부해보자.

 

 

 

---

 

레이아웃이란?

 

공식 문서에서는 다음과 같이 설명한다.

'앱에서 UI 를 위한 구조를 정의하는 요소'

 

사전적 의미는 다음과 같다.

'글이나 그림 등을 효과적으로 설계 · 배치하는 일'

 

 

레이아웃은 View Group 이라고 볼 수 있다.

우리는 뷰(View) 요소를 효과적으로 설계 · 배치하면 된다.

 

 

 

레이아웃 생성

 

1. 액티비티 추가

 

 

새로운 액티비티를 추가하면 기본적으로 2개의 파일이 생성된다.

 

 

자바 개발 기준으로 설명하면, 자바 파일과 레이아웃 xml 파일이

각 1개의 쌍으로 생성되는 것을 확인할 수 있다.

 

하나의 액티비티를 위해서 프론트/백엔드가 구성되는 모습이다.

 

 

 

2. 물론, Layout 만 따로 생성할 수도 있다.

 

 

개발을 하다보면 언젠가는,

독립적으로 존재해야 하는 레이아웃 파일을 필요로 할 것이다.

 

 

 

레이아웃의 종류

 

레이아웃의 종류는 다양하다.

그 중에서 알아볼 레이아웃은 다음과 같이 4종류이다.

 

· Constraint Layout
· Linear Layout
· Table Layout
· Frame Layout

 

---

 

이외에도 자주 사용되었지만,

현재는 권장되지 않는 레이아웃이 있다.

 

· Grid Layout
· Relative Layout

 

위 2개의 레이아웃은 현재 Legacy 상태이다.

*Legacy : 더 좋은 성능의 새로운 기술로 대체됨.

 

deprecated 와는 다른 의미이지만, 맥락은 비슷하다고 보면 된다.

 

사용성이 떨어지고, 점차 사용량이 줄어들게 되면

언제 사라지게 될지 모른다는 이야기다.

 

웬만해서는 위 2개의 레이아웃은 사용을 권장하지 않는다.

 

---

 

그럼 위에서 언급한 4개의 레이아웃에 대해 알아보자.

 

 

· Constraint Layout
제약 레이아웃

 

Constraint Layout

 

말 그대로, 사용에 있어서 제약 조건이 있다.

해당 View 가 다른 요소와 연결되어 있어야 한다는 것이다.

(다른요소 : 레이아웃, View 등)

 

다른 요소와 연결되어야지만 위치가 고정되는 특징이 있다.

 

최소 2개의 연결선을 지정해줘야 사용할 수 있다.

(2개 미만은 에러를 내뿜는다)

 

 

위 사진에 4개의 연결선이 있고,

해당 코드가 4줄 있는 것을 확인할 수 있다.

 

값이 'parent' 로 지정되어 있기에,

부모 요소인 레이아웃과 연결되었다.

 

 

액티비티 초기 구성 시 기본 값으로 설정되어 있으며,

편리한 사용성 덕분에 현재로서 가장 많이 사용된다.

 

 

Relative Layout 의 상위 호환 레이아웃이며, 그렇기에

Relative Layout 을 Legacy 탭으로 이동시킨 레이아웃이다.

 

 

 

---

· Linear Layout
리니어 레이아웃

 

*Linear : 선형의, 선

 

선으로 이루어진 레이아웃이다.

여기서 선이란 가로, 세로를 표현한다.

 

 

orientation 으로 방향을 정해줘야 한다.

 

· vertical : 세로

· horizontal : 가로

 

 

이해가 쉽도록 아래와 같이 표현했다.

 

Linear Layout

 

View 를 서로 중첩할 수 없다는 특징이 있다.

View 의 크기와 상관없이 한 줄을 차지한다.

 

여러 목록을 나열할 때 주로 사용한다.

 

메시지, 채팅방 등을 생각해볼 수 있겠다.

(리사이클러뷰에서 많이 사용된다)

 

 

---

· Table Layout
테이블 레이아웃

 

이름과 같이 테이블 느낌의 구조를 이루며,

표 형태의 레이아웃을 구현할 때 주로 사용한다.

 

 

가로 방향으로 나열되는 열(Column)과,

세로 방향으로 나열되는 행(Row)으로 구성된다.

 

3열 2행의 테이블 레이아웃을 표현해봤다.

 

해당 사진의 xml 코드는 다음과 같다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".TableActivity">


    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableRow>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:background="#ff0000"
            android:text="A" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:background="#00ff00"
            android:text="B" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="30dp"
                android:background="#0000ff"
                android:text="C" />

        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="30dp"
                android:background="#ffff00"
                android:text="D" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="30dp"
                android:background="#00ffff"
                android:text="E" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="30dp"
                android:background="#ff00ff"
                android:text="F" />

        </TableRow>

    </TableLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

행을 추가할 때는 <TableRow> 태그를 작성해줘야 한다.

 

열을 추가할 때는 별도로 작성해줄 요소는 없고,

해당 View를 작성해주면 열이 추가된다.

 

 

---

· Frame Layout
프레임 레이아웃

 

주로 View 요소를 레이아웃 전면에 표시할 때 사용한다.

 

Frame 은 '틀', '액자' 라는 의미를 가지고 있다.

그리고, 그 의미와 비슷한 동작 방식을 보여준다.

 

Frame Layout

 

레이아웃 내에서 제일 마지막에 작성된 View 가

화면상으로 제일 전면에 표시되는 특징이 있다.

마치 액자에 사진을 끼워 넣는 느낌이다.

 

하지만 공식 문서에서는, 하나의 프레임 레이아웃에는

하나의 View 만을 포함할 것을 권장하고 있긴 하다.

 

 

프레임 레이아웃 내에서는 속성값을 지정하여

자식 View 의 위치를 조정할 수 있다.

(Center, Left, Right, Top, Bottom 등)

 

 

 

---

 

 

레이아웃은 뭔가 다루기 쉬운 것 같으면서도 어렵다고 느낀다.

 

이런 저런 시도를 해볼 때마다 예상대로 될 듯 안될 듯한다.

 

레이아웃도 결국 많이 사용해 볼수록 익숙해지는 것 같다.