[android] ConstraintLayout의 사용 예시

14 Dec 2023

android

ConstraintLayout은 안드로이드 앱을 디자인하는 데 사용되는 강력한 레이아웃 매니저입니다. 이 블로그 포스트에서는 ConstraintLayout을 사용하는 간단한 예시를 살펴보겠습니다.

1. 의존성 추가

먼저, 안드로이드 프로젝트의 build.gradle 파일에 ConstraintLayout 라이브러리의 의존성을 추가합니다.

implementation 'androidx.constraintlayout:constraintlayout:2.1.0'

2. XML 레이아웃 설정

다음으로, XML 레이아웃 파일에서 ConstraintLayout을 설정합니다. 예시로 두 개의 TextView를 수평으로 배치하는 간단한 레이아웃을 만들어 보겠습니다.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World"
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

위의 코드는 두 개의 TextView를 수평으로 배치하는 레이아웃을 생성합니다. 첫 번째 TextView는 parent의 시작 부분과 상단에, 두 번째 TextView는 첫 번째 TextView의 오른쪽에 배치되도록 ConstraintLayout을 사용하였습니다.

이제 앱을 실행하면 두 TextView가 ConstraintLayout을 통해 올바르게 배치된 것을 확인할 수 있습니다.

3. 결론

위 예시에서는 간단하게 두 개의 TextView를 ConstraintLayout을 사용하여 배치하는 방법을 살펴보았습니다. ConstraintLayout은 더 복잡한 레이아웃도 쉽게 구현할 수 있으며, 화면의 크기나 방향에 따라 유연하게 대응할 수 있는 장점이 있습니다. 안드로이드 앱을 개발할 때 ConstraintLayout을 적극 활용하여 유연하고 효율적인 레이아웃을 설계할 수 있습니다.

참고 문헌: