Jetpack Composeの2ペイン対応

Sep 18, 2022

Accompanist に adaptive というライブラリが追加されました。これを使用して2ペインのレイアウトを組むことができます。この実装方法について解説していきます。

Guide - Accompanist

google.github.io

注意: AccompanistはExperimentalなものなので今後変更される可能性があります。

build.gradle は accompanist-adaptive を追加します。

dependencies {
    implementation "com.google.accompanist:accompanist-adaptive:<version>"
}

単純な半分で左右に分割する実装です。

TwoPane のComposable関数を使っていきます。

first は左側の部分、 second は右側の部分の実装になります。この引数に表示したいComposable関数を記述します。

strategy は後で解説しますが、 TwoPaneStrategy を指定します。ここでは左右に半分に分割する指定になります。

displayFeatures は後で解説します。

これを実行すると以下のようになります。

TwoPane の strategy 引数にわたすものによって分割する方法が変わってきます。

先程は HorizontalTwoPaneStrategy を指定したので横分割になります。代わりに VerticalTwoPaneStrategy を使用すると縦分割になります。

それぞれのTwoPaneStrategyには引数の指定によって挙動を変更することができます。

DisplayFeaturesはFoldable対応になります。DisplayFeatures自体については詳しくは以下のドキュメントを参照しください。

このDisplayFeaturesはFoldable端末のヒンジの対応をするために使用します。

例えば、 displayFeatures の引数を空のリストにするとヒンジの対応をしないことになります。

*エミュレータだとヒンジの部分が分からなかったので、設定の画面をキャプチャしてます。

左の領域を30%にしてますが、このまま表示するとコンテンツの中にヒンジがあるので、このように見栄えが悪い感じなります。

これは calculateDisplayFeatures からDisplayFeaturesを取得して引数に渡すことで対応できます。

これを実行するとヒンジの位置で自動で分割してくれるようになります。

注意としては、デフォルトでは縦でも横でもヒンジに対応するため、端末が横向きになったときは縦分割になってしまいます。

端末が縦向きのときだけヒンジ対応する方法として、 FoldAwareConfiguration を指定することで対応できます。

この例では、 FoldAwareConfiguration.VerticalFoldsOnly を指定して縦向きのときだけヒンジの対応がされるようになり、期待する挙動になると思います。

Viewシステムではすでに SlidingPaneLayout がありますが、それとは異なり TwoPane のほうは画面遷移などは対応してくれません。

なので、このあたりの制御は自分で実装する必要があります。