ConstraintLayout Guideline

ConstraintLayout 에는 레이아웃을 구성하기 위한 다양한 가상 오브젝트들이 존재한다.

 

ConstraintLayout Virtual Object란?

실제 레이아웃에는 나타나지 않으나, 레이아웃 배치에 영향을 주고, 실제 레이아웃이 가상 오브젝트에 의해 좀더 편리하게 구성될수 있게 해준다.

 

이때 ConstraintLayout Virtual Object은 Guideline, Barrier, Group, Placeholder가 있다.

 

이번 포스트에서는 이중에서 Guideline에 대해 알아보고자 한다.

 

 

Guideline

 

Guideline은 뷰의 위치를 잡는 역할을 도와주는 가상 오브젝트이다.

이는 실제 화면에 보이는 레이아웃이 아닌 ConstraintLayout에서 여러 복합적인 뷰들의 위치를 잡아주는데 사용되는 용도이다.

 

 

 

속성들은 다음과 같다.

 

layout_constraintGuide_percent

0부터 1까지의 float값을 통해 퍼센트로 해당 뷰의 위치를 배치할 수 있도록 도와준다.

 

layout_constraintGuide_begin

좌측(orientation="vertical"일때) 또는 상단(orientation="horizontal"일때)으로 퍼센트가 아닌 특정 값을 통해 뷰의 위치를 배치할 수 있도록 도와준다.

 

layout_constraintGuide_end

우측(orientation="vertical"일때) 또는 하단(orientation="horizontal"일때)으로 퍼센트가 아닌 특정 값을 통해 뷰의 위치를 배치할 수 있도록 도와준다.

 

 

아래 코드를 통해 Guideline에 대해 알아보자.

top_guide_line은 상단으로부터 0.1퍼센트 아래에 위치하고

bottom_guide_line은 상단으로부터 0.7퍼센트 아래에 위치한다.

 

start_guide_line은 좌측에서 100dp 떨어진곳에 위치하고

end_guide_line은 좌측에서 50dp 떨어진곳에 위치한다.

 

이를 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/top_guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.1"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/bottom_guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.7"/>

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

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="50dp"
        app:layout_constraintBottom_toBottomOf="@id/bottom_guide_line"
        app:layout_constraintLeft_toLeftOf="@id/start_guide_line"
        app:layout_constraintRight_toRightOf="@id/end_guide_line"
        app:layout_constraintTop_toTopOf="@+id/top_guide_line" />

</androidx.constraintlayout.widget.ConstraintLayout>