Accompanist
に adaptive
というライブラリが追加されました。これを使用して2ペインのレイアウトを組むことができます。この実装方法について解説していきます。
注意: AccompanistはExperimentalなものなので今後変更される可能性があります。
実装方法
build.gradle
は accompanist-adaptive
を追加します。
dependencies {
implementation "com.google.accompanist:accompanist-adaptive:<version>"
}
単純な半分で左右に分割する実装です。
TwoPane
のComposable関数を使っていきます。
first
は左側の部分、 second
は右側の部分の実装になります。この引数に表示したいComposable関数を記述します。
strategy
は後で解説しますが、 TwoPaneStrategy
を指定します。ここでは左右に半分に分割する指定になります。
displayFeatures
は後で解説します。
これを実行すると以下のようになります。
TwoPaneStrategy
TwoPane
の strategy
引数にわたすものによって分割する方法が変わってきます。
HorizontalTwoPaneStrategy
と VerticalTwoPaneStrategy
の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
のほうは画面遷移などは対応してくれません。
なので、このあたりの制御は自分で実装する必要があります。