[Android/Kotlin] 안드로이드 ConstraintLayout(3) Guideline

안녕하세요. 지난번 Barrier에서 이어서 Guideline 기능에 대해서 알아보겠습니다.

 

2021/02/07 - [Android/Material Design] - [Android/Kotlin] 안드로이드 ConstraintLayout(1) Chain

2021/02/07 - [Android/Material Design] - [Android/Kotlin] 안드로이드 ConstraintLayout(2) Barrier

 

가이드라인은 디자인 작업을 하시는 분들에게 익숙한 개념입니다. 보통 안드로이드 디자인을 하는 툴인 Adobe XD 에서도 많이 사용하고 있습니다.

 

가이드라인을 생성하는 방법은 아래와 같습니다.

 

 

이러한 가이드 라인을 언제 사용하면 좋을까요?

 

안드로이드를 개발할 때 android:layout_marginStart="16dp" android:layout_marginEnd="16dp" 속성을 이용하여 뷰의 가장자리에 마진을 주곤 합니다.

이때 가이드라인을 start 와 end 지점에 만들어주고 다른뷰들이 가이드라인을 참조 한다면 더욱 편리하게 사용할 수 있습니다. 아래는 뷰들의 제약조건이 가이드라인과 연결되어 있는 모습니다.

 

코드는 아래와 같습니다.

<?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=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:backgroundTint="@color/purple_200"
        app:layout_constraintTop_toBottomOf="@+id/guideline2"
        app:layout_constraintStart_toEndOf="@+id/guideline1"
        app:layout_constraintEnd_toStartOf="@+id/guideline3"
        />

    <TextView
        android:id="@+id/txt_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Title"
        android:textSize="32sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/card"
        app:layout_constraintStart_toEndOf="@+id/guideline1"
        />

    <TextView
        android:id="@+id/txt_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Description...."
        app:layout_constraintTop_toBottomOf="@+id/txt_title"
        app:layout_constraintStart_toEndOf="@+id/guideline1"
        />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="20dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

만약에 왼쪽 여백을 주는 가이드라인을 변경해 보겠습니다.

app:layout_constraintGuide_begin="32dp" 로 변경하면 아래와 같이 모든 연결된 뷰들의 레이아웃이 변경되는 걸 확인할 수 있습니다. 보다 쉽고 편하게 레이아웃의 위치를 변경할 수 있는 장점이 있습니다.