[Android] ConstraintLayout 📐

ConstraintLayout

• 복잡한 레이아웃을 단순한 계층 구조로 표현하여 이용할 수 있게하는 ViewGroup
• 복잡한 계층 구조로 레이 아웃을 구성하는 방식에서 자유로워질 수 있다.
• 형제 View들과 관계를 정의해서 레이아웃을 구성한다는 점이 RelativeLayout과 비슷하지만, 보다 유연하고 다양한 기능을 제공한다.

장점

• 복잡한 레이아웃 계층 구조를 단순히 구성할 수 있다.
• 자식 뷰 간의 상호 관계를 정의 가능하다.

Constraint (제약 조건)

• view의 위치를 정의하려면 보기의 가로/세로 제약 조건을 각각 하나 이상 추가해야한다.
• constraintLayout에서 자식 뷰의 위치를 잡는 기준
• 다른 뷰나 부모 레이아웃과의 정렬조건/ 연결 관계
• layout_constraint[기준1]_to[기준2]of = "[viewId || parent]"로 xml text 작성
• start, end 속성은 left, right 속성보다 우선됨
• Top/ Bottom/ Start/ End 를 모두 선언해야 하지 않음.
• 체인 등 다른 기능 사용 시 예상치 못한 동작 발생할 수 있음으로 왠만하면 다 선언해주는 것을 권장.

View 크기 - 가로/세로 비율 지정

• dimensionRatio : 뷰의 가로/세로 비율 결정
  • app:layout_constraintDimensionRatio="1" -> 가로/세로 1/1
  • app:layout_constraintDimesionRatio ="1:1" 가로세로 1:1
• 적어도 한 방향은 match_constraint 이여야 한다.
• 두 방향 모두 match_constraint일 경우, 비율에 맞춰 constraint내에서 가장 큰 크기로 결정

Guideline

• android.support.constraint.Guideline
• 가로 또는 세로 축 방향을 가진 가장의 뷰
• 부모 뷰의 특정 위치를 기준점으로 삼을 때 사용
• 축, 위치 값을 속성으로 가짐
  -
  • 축 : andorid : orientation= "[vertical|horizontal]"
  • 위치
    • app:layout_constraintGuide_begin:시작지점으로부터의 거리
      • app:layout_constraintGuide_end : 끝 지점으로부터의 거리
      • app:layout_constraintGuide_percent : 시작 지점으로부터의 %위치

<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"
    android:orientation="vertical">

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

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

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

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="hello world"
        app:layout_constraintBottom_toBottomOf="@id/gd_bottom"
        app:layout_constraintEnd_toEndOf="@id/gd_right"
        app:layout_constraintStart_toStartOf="@id/gd_left"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintSet

• 프로그램적으로 constraint를 만드는 기능
  • 하나하나 바닥부터 만들거나
  • 다른 xml로부터 constraint만 뽑아오거나
  • ConstraintLayout 인스턴스에서 뽑아오거나 할 수 있다.
• 만들어진 constraint를 Constraint에 적용할 수 있다.
• 동적으로 ConstraintLayout의 모든 뷰 혹은 일부 뷰의 레이아웃을 갱신할 수 있다.
• ConstraintSet은 constraint만 갱신하므로 constaint와 관련없는 속성
• (padding, text size..)는 영향 받지 않는다.
• TransitionManager, beginDelayedTransition()을 이용해서 손 쉽게 애니에이션 생성 가능하다.

Reference

• https://beomseok95.tistory.com/305?category=1064946