このたび、Material 3 Adaptive 1.2.0 が安定版としてリリースされました。

このリリースでは、以前のバージョンの基盤をさらに強化し、ウィンドウ サイズクラスのブレークポイントのサポートを拡大するとともに、表示ペインを自動的に配置する新しい戦略を導入しています。

Material 3 Adaptive 1.2.0 の新機能

この安定版リリースは、WindowManager 1.5.0 の大サイズと特大サイズのブレークポイントのサポートを基盤としており、ListDetailPaneScaffold と SupportingPaneScaffold の新しいリフロー戦略とリフトアップ戦略を導入しています。 

新しいウィンドウ サイズクラス: 大サイズと特大サイズ

WindowManager 1.5.0 では、幅のウィンドウ サイズクラスに 2 つの新しいブレークポイントが導入され、拡大ウィンドウ サイズクラスよりも大きなウィンドウをサポートできるようになりました。大サイズ（L）と特大サイズ（XL）のブレークポイントを有効にするには、コードベースの currentWindowAdaptiveInfo() 呼び出しに次のパラメータを追加します。

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

このフラグを使用すると、ライブラリは必要に応じて L ブレークポイントと XL ブレークポイントも返せるようになります。

新しいアダプティブ戦略: リフローとリフトアップ

ウィンドウにコンテンツと表示ペインを配置するには、ウィンドウ サイズをはじめとする多くの要素を考慮する必要があるため、複雑な作業になります。新しい Material 3 Adaptive ライブラリでは、2 つの新しいテクノロジーを使用して、最小限の労力でアダプティブ レイアウトを実現できます。

リフロー を使用すると、ウィンドウ サイズやアスペクト比が変更されたときにペインが再配置されます。ウィンドウの幅が十分な場合は、2 つ目のペインが 1 つ目のペインの横に配置されます。ウィンドウの高さが十分な場合は、2 つ目のペインが 1 つ目のペインの下にリフローされます。この手法は、ウィンドウが小さくなった場合にも適用されます。コンテンツは下部にリフローされます。

ウィンドウ サイズに基づいてペインをリフローする

リフローは多くの場合に優れた選択肢ですが、コンテンツをウィンドウの片側にドッキングしたり、ウィンドウの上にリフトアップしたりする必要がある場合もあります。 リフトアップ戦略では、コンテンツをドッキングするだけでなく、ドラッグ可能、サイズ変更可能、背景スクリムなどの機能をカスタマイズすることもできます。

アスペクト比に基づいてペインを横から中央にリフトアップする

フロー戦略とリフトアップ戦略はどちらも、adaptStrategies パラメータを使用して Navigator コンストラクタ内で宣言できます。また、どちらの戦略もリストと詳細ペインとサポートペインの scaffolds に適用できます。

val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>(
        adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies(
            detailPaneAdaptStrategy = AdaptStrategy.Reflow(
                reflowUnder = ListDetailPaneScaffoldRole.List
            ),
            extraPaneAdaptStrategy = AdaptStrategy.Levitate(
                alignment = Alignment.Center
            )
        )
    )

これらの新しいアダプティブ戦略を活用する方法について詳しくは、Material のウェブサイトと完全なサンプルコードを GitHub でご覧ください。