6. 안드로이드 레이아웃 살펴보기

1. 레이아웃 종류

- 레이아웃(Layout)은 내부에 위젯을 배치하는 틀이라고 보면 된다.

- 레이아웃의 종류에 따라 안에 위젯을 어떤 형태로 배치하는 지가 달라진다.

- 종류

FrameLayout

LinearLayout

RelativeLayout

TableLayout

ConstraintLayout

2. FrameLayout

- 가장 단순한 레이아웃이다.

- 좌측 상단을 기준으로 위젯을 차곡차곡 쌓기만 한다.

- 가장 먼저 배치한 위젯의 크기가 작다면 안보일 수도 있다.

- 너무 단순해서 화면 내에 하나의 위젯만 나오는 상황에서 사용되는 경우가 있다.

3. LinearLayout

- 위젯들을 선형으로 배치하는 레이아웃이다.

- RelativeLayout과 함께 가장 많이 사용하는 레이아웃 중 하나이다.

- orientation 속성을 변경하여 위젯을 위에서 아래 방향으로 배치하거나, 왼쪽에서 오른쪽 방향으로 배치할 수 있다.

- vertical : 위에서 아래(수직)

- horizontal : 왼쪽에서 오른쪽(수평)

- weightSum 속성을 통해 레이아웃 내 위젯들의 가중치를 줄 수 있다.

- 만약 레이아웃 내에 버튼이 두 개 있고 weightSum이 3이다. 버튼1의 layout_weight는 2이고 버튼2의 layout_weight는 1이라 했을때, 버튼 1의 크기가 버튼 2의 크기보다 두배 크게 표시된다.(width인지 height인지는 레이아웃의 orientation에 따라 다름)

- 이 경우 위젯의 layout_height="0dp" 가 되어야 한다. height가 weight에 의해 정해지기 때문에.

- horizontal인 경우에도 비슷한 형식으로 적용된다. 대신 layout_width="0dp"가 되야 한다.

- 다음은 리니어 레이아웃의 샘플 코드이다.

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

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Button" />
    
</LinearLayout>

4. RelativeLayout

- 상대적 위치에 기반하여 위젯을 배치하는 레이아웃이다.

- 배치된 위젯을 기반으로 상대적인 위치에 다른 위젯을 배치할 수 있다.

- 렐러티브 레이아웃에서 위젯을 배치하기 위해서는 layout_alignParent로 시작하는 속성을 사용해서 레이아웃의 특정 위치에 배치하거나, above와 같은 속성을 사용해서 다른 위치의 상대적 위치에 배치해야 한다.

- 다음은 렐러티브 레이아웃의 샘플 코드이다.

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

    <TextView
        android:id="@+id/nameText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:text="이름" />

    <EditText
        android:id="@+id/nameEdit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/nameText"
        android:layout_toStartOf="@+id/sendButton"
        android:hint="이름을 입력하세요" />

    <Button
        android:id="@+id/sendButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_below="@+id/nameText"
        android:text="전송" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="이름을 입력하고 전송 버튼을 누르세요!" />

    <Button
        android:id="@+id/cancelButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="취소" />

</RelativeLayout>

- 다음은 렐러티브 레이아웃 내의 특정 위치에 배치할 수 있는 속성이다. (아무 것도 지정하지 않을 경우 왼쪽 상단이 기본이다)

layout_alignParentStart="true"	부모 레이아웃의 왼쪽에 배치한다.
layout_alignParentEnd="true"	부모 레이아웃의 오른쪽에 배치한다.
layout_alignParentTop="true"	부모 레이아웃의 상단에 배치한다.
layout_alignParentBottom="true"	부모 레이아웃의 하단에 배치한다.
layout_centerInParent="true"	부모 레이아웃의 중앙에 배치한다.
layout_centerVertical="true"	부모 레이아웃에서 수직 중앙에 배치한다.
layout_centerHorizontal="true"	부모 레이아웃에서 수평 중앙에 배치한다.

- 다음은 레이아웃 내에서 다른 위젯과의 상대적 위치를 기반으로 위치를 배치할 수 있는 속성이다.

layout_above="@id/text"	text 아이디를 가진 위젯의 위쪽에 배치한다.
layout_below="@id/text"	text 아이디를 가진 위젯의 아래쪽에 배치한다.
layout_toStartOf="@id/text"	text 아이디를 가진 위젯의 왼쪽에 배치한다.
layout_toEndOf="@id/text"	text 아이디를 가진 위젯의 오른쪽에 배치한다.

- 속성을 겹치지 않게 명확히 선언하는 것이 중요하다. top과 bottom을 동시에 선언하거나 하면 결과가 엉뚱하게 나올 수도 있다.

5. TableLayout

- 테이블 형태로 위젯을 배치하는 레이아웃이다.

- 테이블 레이아웃은 각각의 행을 구성하는 <TableRow>를 사용해서 화면을 구성한다. 예를 들어, 특정 행이 4개의 열을 가지게 된다면 다른 행도 4개의 열을 가지게 된다. 물론 layout_span 하여 여러 열을 하나의 열로 merge할 수도 있다.

- 다음은 테이블 레이아웃의 샘플 코드이다.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">

    <TableRow>
        <TextView
            android:gravity="center"
            android:textStyle="bold"
            android:text="이름" />

        <EditText
            android:layout_span="3" />
    </TableRow>

    <TableRow>
        <TextView
            android:gravity="center"
            android:textStyle="bold"
            android:text="주소" />

        <EditText
            android:gravity="center"
            android:hint="주소1"/>

        <EditText
            android:gravity="center"
            android:hint="주소2"/>

        <EditText
            android:gravity="center"
            android:hint="주소3"/>
    </TableRow>

    <TableRow>
        <Button
            android:layout_width="30dp"
            android:layout_column="3"
            android:textStyle="bold"
            android:text="저장" />
    </TableRow>
    
</TableLayout>

- 코드를 보면 특이한 점이 있는데, 항상 보던 layout_width와 layout_height가 없다. 왜 그럴까? 테이블 레이아웃에서는 레이아웃을 테이블 형태로 배치하기 때문에 너비와 높이에 대한 속성이 큰 의미가 없기 때문이다.

- 그래서 다음과 같은 속성이 제공된다.

stretchColumns="*"	테이블의 모든 열을 화면에 가득 차도록 늘려준다.  모든 열들을 자동으로 늘리고 싶다면 "*"를 지정하고, 특정 열을 늘리고 싶다면 "0, 1"처럼 지정해야 한다.   이렇게 지정하면 2와 3열에 배치된 위젯을 먼저 표시하고 남은 영역을 0과 1열에 배치된 위젯이 채우게 된다.
layout_span="3"	span은 범위라는 뜻을 가지고 있다.  layout_span은 지정된 숫자만큼의 열 전체에 걸쳐 위젯을 배치하라는 설정이다.  여기서는 3이 지정되었으므로 3열에 걸쳐서 위젯이 배치된다.
layout_column="3"	<TableRow>의 특정 열 위치에 위젯을 배치하라는 의미를 가진다.  여기서는 3이 지정되었으므로 0, 1, 2열을 건너뛰고 3열에 버튼이 배치된다.

6. ConstraintLayout

- 아직까지 살펴본 레이아웃들은 [Design] 탭에서 마우스로 위젯을 다루는 것이 불편하다.

- 이러한 불편함을 해소하고 여러 레이아웃을 중첩시켜 위젯을 배치했을 때 생기는 복잡함과 속도 저하 등의 문제를 해결하기 위해 컨스트레인트 레이아웃이 개발되었다.

- API 레벨 9 진저브레드(Gingerbread) 부터 사용할 수 있으며, 이 레이아웃을 사용하기 위해서는 build.gradle 파일에 constraint-layout 라이브러리를 선언해야 한다. 구글에서 권장하는 레이아웃이라서 보통 프로젝트 생성 시에 자동으로 추가된다.

- 컨스트레인트 레이아웃은 다음과 같은 제약 사항을 설정할 수 있다.

- Margins : 여백

- Centering positioning : 중앙 배치

- Visibility behavior : 가시성에 기반한 동작

- Dimension constraints : 치수 제약

- Chains : 일련 관계

- Virtual Helpers objects : 가상 지원 객체

- 위젯 주변의 박스와 원 모양의 앵커 포인트(anchor point)를 어디에 연결하느냐에 따라 위젯의 위치가 결정된다.

- 나머지는 사용할 때 책이나 인터넷 보고 사용. 이건 그림과 같이 설명할게 너무 많아서 따로 설명 안함.

[출처] 한동호, '나의 첫 안드로이드 : 처음 시작하는 개발자를 위한', 한빛미디어, 2018