[Android] Palette (Helper)

Group

 

group는 ConstraintLayout에서 제공하는 helper 중 하나로 

여러 뷰들의 visibility를 그룹으로 묶어 관리하기 편하게 해 줍니다.

 

ConstraintLayout으로 뷰를 구성하면 모든 뷰들이 플랫 하게 존재해서 visibility를 한 묶음으로 변경해야 할 경우

코드가 길어질 수밖에 없지만 

 

그룹을 이용해 여러 뷰들을 묶어주게 되면 코드가 간결해집니다.

 

<androidx.constraintlayout.widget.Group
        android:id="@+id/group_views"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="view1,view2,view3,view4" />

---

Barrier(Horizontal)/(Vertical)

 

Barrier을 이용하여 뷰들의 크기가 런타임으로 변할 때 적합한 제약조건을 생성할 수 있습니다.

 

해당 Barrier에 연관된 뷰 들은 크기/위치가 Barrier에 맞게 변경이 됩니다.

 

Barrier는 start, top, end, bottom 중 하나의 위치로 지정될 수 있습니다.

 

<androidx.constraintlayout.widget.Barrier
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:barrierDirection="top"
        app:constraint_referenced_ids="textView1, textView2, "
        />
<TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/barrier7"
        app:layout_constraintTop_toTopOf="parent" />

좌측 두 번째의 길이에 따라 우측 barrier을 설정한 TextView가 유동적으로 변경됨을 볼 수 있습니다.

---

Flow

 

Flow는 기존에 ConstraintLayout에서 LinearLayout처럼 동작하게 하는

Chain과 유사하게 수평 또는 수직으로 배치를 할 수 있게 해 줍니다.

---

Guideline(Horizontal)/(Vertical)

 

가로 또는 세로축 방향을 가진 가상의 뷰입니다.

Guideline는 부모 뷰의 특정 위치를 기준점으로 삼을 때 사용합니다.

 

• app:layout_constraintGuide_begin : 시작 지점으로부터의 거리
• app:layout_constraintGuide_end : 끝 지점으로부터의 거리
• app:layout_constraintGuide_percent : 시작 지점으로부터의 % 위치

<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" />

 

---

Layer

 

**

---

ImageFilterView/ImageFilterButton

 

이미지를 표시하며 색조, 명도, 색온도, 대비 등을 수정을 가능하게 하는 뷰와 버튼입니다.

---

MockView

 

레이아웃을 프로토타입화하는 데 유용한 보기입니다. 
대각선과 함께 레이블(기본적으로 뷰 ID)을 그릴 수 있는 기본 뷰입니다.

UI를 작성하는 동안 임시 모의 보기로 유용합니다.

---