Android ConstraintLayout 완전 정리 (15) - ConstraintLayout Flow 사용법: Chip과 태그를 자동 줄바꿈 배치하기

이 글의 목차 숨기기

ConstraintLayout Flow 핵심 정리

Flow는 어떤 문제를 해결하나

wrapMode none, chain, aligned 차이

gap으로 chip 사이 간격 정리하기

maxElementsWrap으로 한 줄 개수 제한하기

필터 chip UI 예시

상품 옵션 chip 예시

프로필 badge 예시

Flow와 RecyclerView는 다르게 선택한다

긴 chip이 섞일 때 확인할 점

자주 하는 실수

한 번에 정리

마무리

Android ConstraintLayout 완전 정리 이전 글 모음

Android ConstraintLayout 완전 정리 (15) – ConstraintLayout Flow 사용법: Chip과 태그를 자동 줄바꿈 배치하기 — ConstraintLayout Flow는 여러 chip이나 tag View를 줄바꿈 배치할 때 유용합니다.

ConstraintLayout Flow는 여러 View를 한 줄 또는 여러 줄로 배치하고 싶을 때 쓰는 helper입니다. chip, tag, 필터 버튼처럼 View 개수는 정해져 있지만 화면 폭에 따라 줄바꿈이 필요한 UI에 잘 맞습니다.

Flow는 RecyclerView처럼 데이터를 반복해서 그리는 목록 컴포넌트가 아닙니다. 이미 XML에 있는 여러 View를 constraint_referenced_ids로 참조하고, 그 View들을 Flow가 정한 방식으로 배치한다고 이해하면 쉽습니다.

ConstraintLayout Flow 핵심 정리

Flow는 여러 참조 View를 줄바꿈 배치하는 helper입니다.
참조할 View는 app:constraint_referenced_ids에 적습니다.
flow_wrapMode로 줄바꿈 방식을 정합니다.
flow_horizontalGap, flow_verticalGap으로 간격을 조절합니다.
flow_maxElementsWrap으로 한 줄에 둘 최대 개수를 제한할 수 있습니다.
동적 데이터 목록이 길어지는 화면은 RecyclerView가 더 적합합니다.

ConstraintLayout Flow로 chip View를 자동 줄바꿈 배치하는 이미지 — Flow는 여러 참조 View를 한 줄 또는 여러 줄로 배치할 수 있는 helper입니다.

Flow는 어떤 문제를 해결하나

ConstraintLayout에서 버튼 3개 정도를 가로로 놓는 문제라면 chain만으로도 충분합니다. 하지만 chip이 5개, 6개가 되고 화면 폭에 따라 두 줄로 넘어가야 한다면 chain만으로는 XML이 복잡해집니다.

Flow는 이런 고정 View 묶음을 하나의 helper가 배치하도록 도와줍니다. 각 chip은 독립된 View이고, Flow는 그 View들의 배치 규칙을 담당합니다.

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/tagFlow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="tagAndroid,tagKotlin,tagXml,tagLayout"
    app:flow_wrapMode="chain"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="8dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/tagFlow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="tagAndroid,tagKotlin,tagXml,tagLayout"
    app:flow_wrapMode="chain"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="8dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

핵심은 Flow 안에 chip View를 넣는 것이 아니라는 점입니다. Flow는 컨테이너라기보다 참조 id를 보고 배치에 참여하는 helper에 가깝습니다.

wrapMode none, chain, aligned 차이

공식 Flow 레퍼런스는 referenced widgets를 세 가지 방식으로 배치할 수 있다고 설명합니다. none은 한 방향의 chain처럼 보고, chain은 공간이 부족할 때 여러 chain으로 감싸며, aligned는 행과 열 정렬을 더 의식하는 방식입니다.

none: 한 줄 또는 한 방향 배치를 먼저 생각할 때 사용합니다.
chain: chip이 여러 줄로 자연스럽게 넘어가야 할 때 자주 검토합니다.
aligned: 행과 열이 맞아 보이는 그리드형 배치가 필요할 때 검토합니다.

gap으로 chip 사이 간격 정리하기

ConstraintLayout Flow horizontalGap과 verticalGap 간격 설명 이미지 — horizontalGap은 같은 줄의 좌우 간격, verticalGap은 줄 사이 간격을 조절합니다.

Flow에서 간격은 읽기 쉬운 UI를 만드는 데 중요합니다. chip이 너무 붙으면 터치 영역과 가독성이 나빠지고, 너무 멀어지면 하나의 그룹처럼 보이지 않습니다.

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/filterFlow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="chipAll,chipAndroid,chipKotlin,chipXml"
    app:flow_wrapMode="chain"
    app:flow_horizontalGap="10dp"
    app:flow_verticalGap="12dp" />

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/filterFlow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="chipAll,chipAndroid,chipKotlin,chipXml"
    app:flow_wrapMode="chain"
    app:flow_horizontalGap="10dp"
    app:flow_verticalGap="12dp" />

flow_horizontalGap은 같은 줄에서 좌우 간격을 조절하고, flow_verticalGap은 줄 사이 간격을 조절합니다. 두 값을 분리해서 생각하면 디자이너가 원하는 chip 간격을 맞추기 쉽습니다.

maxElementsWrap으로 한 줄 개수 제한하기

ConstraintLayout Flow maxElementsWrap으로 한 줄 개수를 제한하는 이미지 — maxElementsWrap은 한 줄에 배치할 최대 참조 View 수를 제한할 때 유용합니다.

화면이 넓어도 한 줄에 너무 많은 chip이 늘어서면 읽기 어려울 수 있습니다. 이때 flow_maxElementsWrap으로 한 줄에 배치할 개수를 제한할 수 있습니다.

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/categoryFlow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="categoryA,categoryB,categoryC,categoryD,categoryE"
    app:flow_wrapMode="chain"
    app:flow_maxElementsWrap="3" />

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/categoryFlow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="categoryA,categoryB,categoryC,categoryD,categoryE"
    app:flow_wrapMode="chain"
    app:flow_maxElementsWrap="3" />

이 설정은 화면 폭이 충분해도 3개 이후부터 다음 줄로 넘기는 식의 배치를 만들 때 유용합니다. 단, 실제 결과는 Flow의 orientation, style, bias, parent 폭과 함께 봐야 합니다.

필터 chip UI 예시

ConstraintLayout Flow로 필터 chip UI를 배치하는 실전 예시 — 필터 chip처럼 View 수가 정해진 UI는 Flow로 간결하게 배치할 수 있습니다.

Flow가 가장 이해하기 쉬운 예시는 필터 chip UI입니다. 정렬 대상이 데이터 목록이 아니라 XML에 미리 선언된 몇 개의 View라면 Flow가 코드를 단순하게 만들어 줍니다.

카테고리 필터 chip
설정 화면의 선택 버튼 묶음
검색 조건 태그
상세 화면의 고정 badge 묶음

상품 옵션 chip 예시

ConstraintLayout Flow로 상품 옵션 chip을 줄바꿈 배치하는 예시 — 상품 옵션처럼 선택지 수가 정해진 UI도 Flow 적용 후보가 될 수 있습니다.

상품 상세 화면에서도 Flow를 생각해 볼 수 있습니다. 색상, 사이즈, 배송 옵션처럼 선택지 수가 정해져 있고, 화면 폭이 좁아질 때 자연스럽게 다음 줄로 넘어가야 하는 UI라면 Flow가 잘 맞습니다.

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/productOptionFlow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="optionBlack,optionWhite,optionSmall,optionMedium,optionLarge,optionToday"
    app:flow_wrapMode="chain"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="10dp" />

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/productOptionFlow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="optionBlack,optionWhite,optionSmall,optionMedium,optionLarge,optionToday"
    app:flow_wrapMode="chain"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="10dp" />