안드로이드 Constraint Flow를 활용하여 TableLayout 구성하기

안드로이드 Constraint Flow를 활용하여 TableLayout 구성하기

 

- Flow 공식문서

Flow  |  Android Developers

 

Flow란 참조된 위젯을 체인과 유사하게 가로 또는 세로로 배치할 수 있는 View 요소입니다.

참조된 요소의 구현은 constraint_referenced_ids를 통해 표시됩니다. 그런 다음 참조된 위젯은 세 가지 가능한 방법으로 Flow 가상 레이아웃에 의해 배치됩니다.

 

-wrap mode

• wrap none : 단순히 참조된 요소들을 나열합니다.
• wrap chain : 참조된 요소를 뷰에 제약에 맞게 나열합니다.
• wrap aligned : wrap chain과 유사하지만 행과 열을 생성하여 요소를 정렬합니다.

 

아래는 예시코드입니다.

app:flow_maxElementsWrap="4"
app:flow_wrapMode="chain"

1. 위 코드를 Flow의 조건으로 할당하여 한 줄에 총 4개의 버튼이 위치하도록 만들었습니다. 

2. wrap mode 또한 chain으로 마지막줄의 "=" 버튼 처럼 weight를 지정하여 버튼이 3칸을 차지할 수 있도록 구성했습니다.

3. 다만 0,1,2번째 줄의 버튼 또한 weight을 주어 버튼의 크기를 늘릴 수 있는 방법은 모르겠습니다.

 

예시 화면

//예시코드
<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/keyPadFlow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:padding="8dp"
    app:constraint_referenced_ids="button1,button2,button3, buttonC, button4,button5,button6,buttonPlus, button7,button8,button9,buttonMinus, button0, buttonEqual"
    app:flow_horizontalGap="8dp"
    app:flow_maxElementsWrap="4"
    app:flow_wrapMode="chain"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.7"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1" />

<Button
    android:id="@+id/button1"
    style="@style/numberKeypad"
    android:text="1" />

<Button
    android:id="@+id/button2"
    style="@style/numberKeypad"
    android:text="2" />

<Button
    android:id="@+id/button3"
    style="@style/numberKeypad"
    android:text="3" />

<Button
    android:id="@+id/button4"
    style="@style/numberKeypad"
    android:text="4"
    tools:ignore="MissingConstraints" />

<Button
    android:id="@+id/button5"
    style="@style/numberKeypad"
    android:text="5" />

<Button
    android:id="@+id/button6"
    style="@style/numberKeypad"
    android:text="6" />

<Button
    android:id="@+id/button7"
    style="@style/numberKeypad"
    android:text="7"
    tools:ignore="MissingConstraints" />

<Button
    android:id="@+id/button8"
    style="@style/numberKeypad"
    android:text="8" />

<Button
    android:id="@+id/button9"
    style="@style/numberKeypad"
    android:text="9" />

<Button
    android:id="@+id/button0"
    style="@style/numberKeypad"
    android:text="0"
    app:layout_constraintHorizontal_weight="1"
    tools:ignore="MissingConstraints" />

<Button
    android:id="@+id/buttonEqual"
    style="@style/operatorKeypad"
    android:text="="
    app:layout_constraintHorizontal_weight="3"
    tools:ignore="MissingConstraints" />

<Button
    android:id="@+id/buttonC"
    style="@style/operatorKeypad"
    android:text="C"
    tools:ignore="MissingConstraints" />

<Button
    android:id="@+id/buttonPlus"
    style="@style/operatorKeypad"
    android:text="+" />

<Button
    android:id="@+id/buttonMinus"
    style="@style/operatorKeypad"
    android:text="-" />