[Android] 레이아웃

LinearLayout

LinerLayout은 뷰를 가로나 세로 방향으로 나열하는 레이아웃이다.
orientation 속성을 이용해 horizontal, vertical 값으로 방향을 지정할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"/>

</LinearLayout>

위의 코드를 통해 다음과 같은 결과를 얻을 수 있다.

layout_weight

해당 화면의 여백을 채우기 위해 layout_weight 속성이 사용된다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        android:layout_weight="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"/>

</LinearLayout>

gravity, layout_gravity

• gravity : 콘텐츠 정렬
• layout_gravity : 뷰 자체를 정렬

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/main">

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#FF0000"
        android:textSize="15dp"
        android:textStyle="bold"
        android:textColor="#FFFFFF"
        android:text="HelloWorld"
        android:gravity="right|bottom"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

위의 사진과 같이 gravity 속성을 통해 TextView의 콘텐츠인 "HelloWorld"가 오른쪽 밑에 나타났고, layout_gravity 속성을 통해 전체 TextView 컴포넌트가 센터에 나타났다.

RelativeLayout

RelativeLayout은 상대 뷰 위치를 기준으로 정렬하는 레이아웃이다.

• android:layout_above : 기존 뷰의 위쪽에 배치
• android:layout_below : 기존 뷰의 아래쪽에 배치
• android:layout_toLeftOf : 기존 뷰의 왼쪽에 배치
• android:layout_toRightOf : 기존 뷰의 오른쪽에 배치
• android:layout_alignTop : 기존 뷰와 위쪽을 맞춤
• android:layout_alignBottom : 기존 뷰와 아래쪽을 맞춤
• android:layout_alignLeft : 기존 뷰와 왼쪽을 맞춤
• android:layout_alignRight : 기존 뷰와 오른쪽을 맞춤
• android:layout_alignBaseline : 기존 뷰와 텍스트 기준선을 맞춤
• andriod:layout_alignParentTop : 부모 위쪽에 맞춤
• andriod:layout_alignParentBottom : 부모 아래쪽에 맞춤
• andriod:layout_alignParentLeft : 부모 왼쪽에 맞춤
• andriod:layout_alignParentRight : 부모 오른쪽에 맞춤
• andriod:layout_alignParentVertical : 부모 세로 방향 중앙에 맞춤
• andriod:layout_alignParentHorizontal : 부모 가로 방향 중앙에 맞춤
• andriod:layout_alignParentInParent : 부모의 가로,세로에 맞춤

위와 같은 속성을 추가하지 않으면 카드 쌓듯이 겹쳐진 결과를 확인할 수 있다. 이와 같은 경우에는 대부분 visibility 속성과 함께 사용된다.

GridLayout

테이블 화면을 만드는 레이아웃으로 orientation 속성을 이용해 가로, 세로 방향을 나열한다. 이때 vertical이면 rowCount를 사용하고 horizontal이면 columnCount 속성을 이용한다.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:columnCount="3"
    android:id="@+id/main">

    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="4"/>
    <Button android:text="5"/>

</GridLayout>

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:rowCount="3"
    android:id="@+id/main">

    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="4"/>
    <Button android:text="5"/>

</GridLayout>

• layout_row : 뷰 위치한 세로 방향 인덱스
• layout_column : 뷰 위치한 가로 방향 인덱스

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:columnCount="3"
    android:id="@+id/main">

    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button
        android:text="3"
        android:layout_row="1"
        android:layout_column="1"/>
    <Button android:text="4"/>
    <Button android:text="5"/>


</GridLayout>

• layout_columnSpan : 가로로 열 병합
• layout_rowSpan : 세로로 행 병합

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:columnCount="3"
    android:id="@+id/main">

    <Button
        android:text="1"
        android:layout_columnSpan="2"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="4"/>
    <Button android:text="5"/>


</GridLayout>

ConstraintLayout

레이아웃 편집기에서 레이아웃을 구성하는 방식으로 androidx에서 제공하는 라이브러리이다.

사용하기 위해서는 build.gradle.kts 파일에서 다음과 같은 설정이 필요하다.

implementation(libs.androidx.constraintlayout)