7. 레이아웃 (LinearLayout, RelativeLayout, ConstraintLayout) 구조와 사용법

LinearLayout

• LinearLayout은 자식 뷰들을 수평(horizontal) 또는 수직(vertical)으로 일렬로 배치하는 레이아웃
• orientation 속성을 통해 방향을 설정할 수 있다.

주요 속성

속성	설명
android:orientation	vertical 또는 horizontal 설정
android:layout_weight	비율 기반으로 공간 분배
android:gravity	자식 뷰의 정렬 위치 설정
android:baselineAligned	텍스트의 기준선 정렬 여부 설정

 

예시

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" //수직 정렬
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이름"
        android:textSize="18sp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름을 입력하세요" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="확인" />
</LinearLayout>

 

TextView, EditText, Button이 수직으로 정렬된 LinearLayout

---

RelativeLayout

• RelativeLayout은 자식 뷰를 서로의 위치를 기준으로 배치할 수 있는 레이아웃
• 부모 뷰 또는 다른 뷰를 기준으로 상대적인 위치를 지정한다.

주요 속성

속성	설명
layout_alignParentTop	부모의 위쪽에 맞춤
layout_centerInParent	부모의 중앙에 배치
layout_below	특정 뷰 아래에 배치
layout_toRightOf	특정 뷰의 오른쪽에 배치
layout_alignBaseline	텍스트 기준선을 맞춤

 

예시

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="위쪽"
        android:layout_alignParentTop="true" //layout_alignParentTop 사용
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="가운데"
        android:layout_centerInParent="true" /> //layout_centerInParent 사용
</RelativeLayout>

 

button1은 상단 중앙, button2는 화면 중앙에 위치된 RelativeLayout

---

ConstraintLayout

• ConstraintLayout은 복잡한 레이아웃을 효율적으로 관리할 수 있는 강력한 레이아웃
• 뷰 간의 상대적인 위치와 크기를 설정할 수 있다.

핵심 개념

1. Anchor Point: 각 뷰의 Top, Bottom, Start, End에 제약 조건을 걸 수 있음
2. Bias: 제약 조건 사이에서 위치를 조절하는 비율 설정
3. Chains: 뷰들을 수평 또는 수직으로 연결하여 그룹화

주요 속성

속성	설명
app:layout_constraintTop_toTopOf	다른 뷰의 상단과 연결
app:layout_constraintStart_toStartOf	부모 뷰의 시작 부분과 연결
app:layout_constraintBottom_toBottomOf	다른 뷰의 하단과 연결
app:layout_constraintHorizontal_bias	수평 방향으로 위치 비율 조정 (0.0 ~ 1.0)

 

예시

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="중앙 버튼"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

버튼이 부모 뷰의 중앙에 정확히 배치된다.

---

레이아웃 비교

항목	LinearLayout	RelativeLayout	ConstraintLayout
배치 방식	수평/수직 정렬	상대적 배치	제약 기반 배치
유연성	낮음 (복잡한 레이아웃 불리)	중간 (제약에 한계)	높음 (복잡한 UI 관리 용이)
성능	효율적 (간단한 UI에 적합)	성능 저하 가능	최적화된 성능
사용 용도	단순한 리스트, 폼	뷰 간 상대적 배치	복잡한 화면, 반응형 UI