Android / ConstraintLayout

https://developer.android.com/develop/ui/views/layout/constraint-layout?hl=ko

ConstraintLayout으로 반응형 UI 빌드  |  Views  |  Android Developers

 

• 플랫뷰 구조로 복잡한 레이아웃을 그릴수 있음.
  • linearLayout > LinearLayout > LinearLayout > textView (이런 구조를 피할수 있음)
  • 동위 보기와 상위 레이아웃 사이의 관계에 따라 모든 보기의 레이아웃이 결정된다는 점에서 [RelativeLayout]과 비슷하지만, RelativeLayout보다 유연하고 Android 스튜디오의 Layout Editor와 함께 사용하기가 더 쉽습니다.
  • RelativeLayout 공식문서
• bias 로 위치조정가능
• 각 아이템들은 가로 및 세로 제약 조건을 각각 하나 이상 추가해야 함.

 

 

 

ConstraintLayout 에서 쓸만한 옵션들

---

Helper Guideline

가상의 선을 그어 UI 배치를 도와줌.

 

텍스트뷰 예시.

    <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"   --- 위치 지정 (40%)
        
        />

<TextView
        android:id="@+id/nameValueTextView"
        style="@style/Value"
        android:layout_width="0dp"     --가이드라인까지만.
        android:layout_height="wrap_content"
        android:layout_marginEnd="36dp"
        android:ellipsize="end"      --- 길어지면 ... 으로 표시해
        android:gravity="end"          --- 오른쪽정렬
        android:maxLines="1"         --- 길어졌을때 2줄로 넘어가지 않게
        android:text="김성재"
        app:layout_constraintBaseline_toBaselineOf="@id/nameTextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline" />

 

 

 

 

---

helper Layer

두세개의 뷰를 묶어서 눌렀을때 하나의 동작을 하게 하고 싶으면

컨트롤 눌러서 다 선택하고 오른쪽클릭 - add helper - layer

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

생일 (숫자 부분) 과 달력 이미지 둘 다 눌렀을 때 달력 팝업이 나오게 하고 싶을 때

layout을 하나 만들어서 그 안에 넣을수도 있겠지만

한두개 간단한 것은 헬퍼로 합쳐버릴 수 있음.

이미 위치가 다 정해져있기때문에 constraint 안해줘도 됨.

에러는 suppress —> tools:ignore="MissingConstraints" 추가됨.

---

Helper Barrier

https://www.charlezz.com/?p=691

• textview 가 더 길어졌을때 넘어가지 않게 해준다.
• Guideline은 정적으로 수치를 입력하여 고정된 벽을 만들었다면, Barrier는 어떤 뷰들을 기준으로 동적인 벽을 만들 수 있습니다.
• 쓰이는 속성
  • barrierDirection : barrier의 방향을 결정. top, bottom, start, end, left, right.
  • constraint_referenced_ids : 장벽의 기준점으로 참조할 뷰의 아이디를 복수 개 참조
  • barrierAllowsGoneWidgets : 참조하고 있던 true 또는 false 값을 통해 참조하고 있던 뷰가 GONE될때의 동작을 지정

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
    app:barrierDirection="start"
      app:constraint_referenced_ids="editButton, deleteButton"
    />

 

 

---

Flow

https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow

Flow  |  Android Developers

 

• constraintlayout 으로 복잡한 UI 를 구성할때 Flow 사용 (계산기 버튼)
• 여러 뷰들을 선택후 add helper - flow 로도 생성 가능
• Flow 안에 있는 뷰들은 다 constraint ignore

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:constraint_referenced_ids="button1, button2, button3, 
        				button4,button5, button6, 
                                        button7,button8,button9"
        />

• 기본적으로는 다 가로로 쌓임. (버튼들의 사이즈는 다 0dp로 가득채워놓음)
• 가로로 쌓이는 숫자를 제한하고 아래로 넘길수 있음
• 한 줄을 3개로 제한
  • app:flow_maxElementsWrap="3"
• 정렬모드
  • app:flow_wrapMode="aligned"    // 또는 Chain. (남은 갭을 채우냐 마냐 차이)

Aligned    ///  Chain

 

• 버튼사사이에 갭을 줄수 있음.
  • app:flow_horizontalGap="8dp”
• 가중치를 주어서 한 버튼이 다른 버튼보다 크게 할 수 있음.
  • app:layout_constraintHorizontal_weight="2”