[Android]ConstraintLayout Flowを使ってみる

2021-08-08

Constraint Layout Flow について

ハッシュタグ一覧のようなViewを作ろうとすると、いままでライブラリや自前での実装をしていました。
しかし、FlowというのがConstraintLayout2.0から追加され、ConstraintLayoutを使用してLayoutファイルの記述だけで実装できるようになりました。

Flow  |  Android デベロッパー  |  Android Developers

Flowで実装するハッシュタグ一覧

実装は簡単でConstraintLayoutの中にこのようなFlowのタグを追加します。

<androidx.constraintlayout.helper.widget.Flow
            android:id="@+id/flow"
            app:constraint_referenced_ids="text_1,text_2,text_3,text_4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:orientation="horizontal"
            app:flow_horizontalBias="0"
            app:flow_horizontalStyle="packed"
            app:flow_verticalStyle="packed"
            app:flow_wrapMode="chain"
            app:flow_verticalAlign="baseline"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
  • Flowのレイアウトを適用したいViewのidをapp:constraint_referenced_idsにカンマ区切りで追加します。
    ここで追加したViewにはapp:layout_constraintTop_toTopOf="parent"のような位置決めのための設定は不要になります。
    ただし、AndroidStudioのバージョンよっては位置決めの設定がないことでWarningが出ます。
    無視して問題ありませんが、Warningが気になる場合はtools:ignore="MissingConstraints"を設定しましょう。

  • 1行に収まりきらなくなった場合にViewが次の行に配置されるようにapp:flow_wrapMode="chain"を設定します。

  • View同士が隙間無く配置されるようにapp:flow_horizontalStyleapp:flow_verticalStyleにはpackedを指定します。
    ここで設定できるStyleの値は、下記に詳しい説明が図解付きであるのでわかりやすいです。
    ConstraintLayout  |  Android デベロッパー  |  Android Developers

  • デフォルトではFontやテキストサイズが違うTextView同士が横並びになった際に微妙に上下にずれます。
    これを防ぐためにapp:flow_verticalAlign="baseline"を追加しておきます。
    これでそれぞれのテキストのbaselineに合わせて縦方向の配置が調整されるようになります。

まとめ

いままで実装が大変だったハッシュタグ一覧のようなViewがレイアウトファイルだけで実装できました。
また、実装方法もFlowタグをConstraintLayout内に追加するだけで簡単にできました。

今回実装したサンプルは下記にあります。
muaaru/testConstraintLayoutFlow

今回はハッシュタグ一覧でしたが、他にもスマホとタブレットでレイアウトファイルを分けていたような場合に、
1つのレイアウトファイルで済ませるといったこともできるので、今後使用する機会が多くなりそうです。