FlexboxLayout で柔軟なレイアウトを構築

LinearLayoutや RelativeLayoutなどの従来のレイアウトでさまざまな画面サイズに対応するには、DP を指定した複数のレイアウト（layout-600dp、layout-720dp、layout-1020dp など）を定義する必要がありました。一方、上のダイアログは FlexboxLayout を使用した一つのレイアウトだけでできています。

この例では、先ほど説明した flexWrap="wrap"を設定するというテクニックを利用しています。

<com .google.android.flexbox.flexboxlayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:flexwrap="wrap">

これによって、子ビューが親からはみ出るのではなく、新しい行に配置されるようになり、次のようなレイアウトが得られます。

もう 1 つ紹介しておきたいのは、個々の子ビューに layout_flexGrow属性を設定するテクニックです。これによって、スペースが余った場合の最終的なレイアウトの見栄えを改善できます。layout_flexGrow属性は LinearLayoutの layout_weight属性に相当します。つまり、FlexboxLayoutは、設定された layout_flexGrowの値に応じて、余ったスペースを同じ行に配置された子ビューに割り当てます。

下に示すのは、各子ビューの layout_flexGrow属性を 1に設定している例です。そのため、余ったスペースがそれぞれの子ビューに均等に割り当てられています。

<android .support.design.widget.TextInputLayout
     android:layout_width="100dp"
     android:layout_height="wrap_content" 
     app:layout_flexgrow="1">

このケースで使われている layout xmlファイルは、GitHub レポジトリで確認できます。

RecyclerView との統合 

FlexboxLayoutが提供するもう 1 つのメリットは、RecyclerViewと統合できるという点です。最新リリースであるアルファ版の新しい FlexboxLayoutManagerは、RecyclerView.LayoutManagerを拡張しています。そのため、スクロール可能な Flexbox コンテナではるかにメモリ効率がよい Flexbox の機能を使うことができます。

なお、スクロール可能な Flexbox コンテナは、ScrollViewの中に FlexboxLayoutを配置することでも実現できますが、レイアウトに含めるアイテムの数が増えると、スムーズに動かなくなったり OutOfMemoryError が発生する可能性が高くなります。これは、FlexboxLayoutではユーザーがスクロールして画面外に移動したビューの再利用が考慮されていないためです。

（RecyclerView の詳細を知りたい方は、1、2などの Android UI ツールキット チームの動画をご覧ください）

RecyclerViewの統合が役に立つ実例としてあげられるのは、Google Photos やニュースアプリのようなアプリです。これらはどちらも、さまざまな幅のアイテムを大量に処理する必要があります。

FlexboxLayoutのレポジトリには、例としてデモアプリが公開されています。レポジトリを見ればわかるように、RecyclerView内のイメージの幅はまちまちです。しかし、flexWrap で折り返すように設定してあり、

FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
layoutManager.setFlexWrap(FlexWrap.WRAP);

さらに各子ビューの flexGrow属性（下記のコード例のように、FlexboxLayoutManager では xml ではなく、 FlexboxLayoutManager.LayoutParamsを使用して RecyclerView の各要素の属性を設定できます）も正の値に設定してあるため、

void bindTo(Drawable drawable) {
  mImageView.setImageDrawable(drawable);
  ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
  if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp = 
        (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams();
    flexboxLp.setFlexGrow(1.0f);
  }
}

画面の向きによらず、すべてのイメージをきれいにレイアウト内に収めることができます。

さらに複雑な FlexboxLayout の例を確認したい方は、以下をご覧ください。

• Playground デモアプリ - FlexboxLayoutと FlexboxLayoutManagerを使用
• キャット ギャラリー デモアプリ - FlexboxLayoutManagerを使用

次のステップ

ニーズに合った柔軟なレイアウトの構築に役立つその他の属性については、完全版のドキュメントをご覧ください。皆さんのフィードバックをお待ちしています。問題や機能リクエストがある場合は、GitHub レポジトリの問題にご報告ください。