×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 2,184,631명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)
반응형

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>

 

 

 

 

 

반응형
  1. 행인1 2021.05.06 16:38

    오기 발견했습니다!
    "end_guide_line은 좌측에서 50dp 떨어진곳에 위치한다."
    좌측이 아니라 우측 아닌가요?

    • 2021.05.06 16:43

      비밀댓글입니다

    • 가누 2021.05.28 16:48

      앗 감사합니다 우측입니다!