[Android] ConstraintLayout에서 뷰의 배치를 돕는 가상 오브젝트

Guideline

Guideline은 레이아웃 작성 시에 가이드라인을 잡아주는 역할을 합니다.

한 화면 내에서 가상의 선을 하나 그어, 해당 선에 view들의 constraint를 주는 역할을 합니다.

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.4" />

• android:id : 해당 Guideline의 id
• android:orientation : Guideline의 방향 설정 (vertical / horizontal)
• app:layout_constraintGuide_xxx : Guideline의 위치 지정
  • app:layout_constraintGuide_begin : 화면의 시작으로부터 얼마만큼 떨어져 있을지 지정
  • app:layout_constraintGuide_end : 화면의 끝으로부터 얼마만큼 떨어져 있을지 지정
  • app:layout_constraintGuide_percent : 전체 화면에 대해 몇 퍼센트 위치에 있을지 지정

 

Barrier

Guideline이 정적인 값을 주어 위치를 지정해준 것과는 다르게, Barrier는 여러 개의 view를 묶어서 가상의 벽을 만들어 동적인 위치로 constraint를 줄 수 있어 묶어놓은 여러 개의 View의 높이나 너비가 바뀜에 따라 동적으로 형성됩니다.

그러므로 여러가지 언어를 지원하는 앱을 만들 때, 언어마다 텍스트의 길이가 달라지기 때문에 Barrier를 사용한다면 더욱 유연하게 레이아웃을 짤 수 있게 됩니다.

<androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="tv1, tv2" />

• android:id : 해당 Barrier의 id
• app:constraint_referenced_ids : 묶으려고 하는 view들의 id
• app:barrierDirection : Barrier의 방향 지정 (top, bottom, start, end, left, right)

 

Layer

Layer는 여러 개의 view를 묶어서 동일한 기능을 부여하고 싶을 때 사용합니다.

Layer에 적용한 기능은 참조하는 모든 뷰에 동일하게 적용됩니다.

<androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tv1, tv2"
        tools:ignore="MissingConstraints" />

• android:id : 해당 Layer의 id
• app:constraint_referenced_ids : 묶으려고 하는 view들의 id
• constraint : 레이어나 참조 뷰에 적용되지 않으므로 없어도 무관

 

Flow

Flow는 여러 개의 view를 묶어서 기존에 다소 복잡한 형태로 적용되었던 Chain을 간소화합니다.

<androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent="0.7"
        app:flow_maxElementsWrap="4"
        app:flow_wrapMode="chain"
        app:flow_horizontalGap="10dp"
        app:constraint_referenced_ids="btn_1, btn_2, btn_3" />

• android:id : 해당 Flow의 id
• app:constraint_referenced_ids : 묶으려고 하는 view들의 id
• android:orientation: Chain의 방향 설정 (vertical / horizontal)
• app:flow_xxxStyle : Chain의 스타일 설정 (vertical / horizontal)
  • packed
    • app:flow_xxxBias: Chain 내에서의 위치를 bias로 설정 (vertical / horizontal)
  • spread
  • spread_inside
• app:flow_xxxGap : 각각의 뷰 사이의 gap을 지정 (vertical / horizontal)
• app:flow_xxxAlign : 뷰들을 어떻게 정렬시킬지 지정 (top, bottom, start, end, left, right)
• app:flow_wrapMode : 참조하는 뷰들을 어떻게 다룰지 설정
  • none : 단순히 참조하는 뷰들 사이에 Chain 설정
  • chain : 기본 모드와 비슷하지만 공간이 부족할 경우 여러 줄에 걸쳐서 뷰를 배치
  • aligned : 아이템들을 테이블처럼 정렬
• app:flow_maxElementsWrap : 각 줄마다 표시할 뷰의 개수 지정

 

Group

Group은 여러 개의 view를 묶어서 참조된 뷰들의 visibility를 편리하게 관리할 수 있게 해줍니다.

<androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="tv1, tv2" />

• android:id : 해당 Group의 id
• android:visibility : 해당 Group의 visibility 설정 (visible / invisible / gone)
• app:constraint_referenced_ids : 묶으려고 하는 view들의 id