Jetpack Composeの2ペイン対応

Kenji Abe
Sep 18, 2022

--

Photo by Alex Padurariu on Unsplash

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

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

実装方法

build.gradleaccompanist-adaptive を追加します。

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

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

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

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

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

displayFeatures は後で解説します。

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

TwoPaneStrategy

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

HorizontalTwoPaneStrategyVerticalTwoPaneStrategy の2つが用意されています。

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

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

DisplayFeatures

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

https://developer.android.com/guide/topics/large-screens/learn-about-foldables

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

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

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

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

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

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

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

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

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

注意

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

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

--

--

Kenji Abe
Kenji Abe

Written by Kenji Abe

Programmer / Gamer / Google Developers Expert for Android, Kotlin / @STAR_ZERO

No responses yet