[Android]ConstraintLayout Flowを使ってみる
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"を設定しましょう。 - １行に収まりきらなくなった場合にViewが次の行に配置されるように
app:flow_wrapMode="chain"を設定します。 - View同士が隙間無く配置されるように
app:flow_horizontalStyleやapp:flow_verticalStyleにはpackedを指定します。
ここで設定できるStyleの値は、下記に詳しい説明が図解付きであるのでわかりやすいです。
ConstraintLayout | Android デベロッパー | Android Developers - デフォルトではFontやテキストサイズが違うTextView同士が横並びになった際に微妙に上下にずれます。
これを防ぐためにapp:flow_verticalAlign="baseline"を追加しておきます。
これでそれぞれのテキストのbaselineに合わせて縦方向の配置が調整されるようになります。
まとめ
いままで実装が大変だったハッシュタグ一覧のようなViewがレイアウトファイルだけで実装できました。
また、実装方法もFlowタグをConstraintLayout内に追加するだけで簡単にできました。
今回実装したサンプルは下記にあります。
muaaru/testConstraintLayoutFlow
今回はハッシュタグ一覧でしたが、他にもスマホとタブレットでレイアウトファイルを分けていたような場合に、
1つのレイアウトファイルで済ませるといったこともできるので、今後使用する機会が多くなりそうです。