『Jetpack Compose で横画面を検知しレイアウトを変更する』ことをやってみたいと思います。
環境
- build:gradle:7.0.4 - compose_version = '1.0.1'
レイアウト
次のように、横画面か縦画面かを判断しレイアウトを変更できるようにことがこの記事のゴールです。
縦画面
横画面
現在の画面の向きを取得する
Composable 関数の中で現在の画面の向きは、以下のメソッドで取得することができます。
LocalConfiguration.current.orientation
縦画面かどうかを判断する
従って、縦画面かどうかを変数として表すには次のようにConfiguration.ORIENTATION_PORTRAIT（縦画面）と比較してあげます。
isVertical =
LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
// 縦画面か横画面かに応じて次のいずれかが入る
// 縦
// Configuration.ORIENTATION_PORTRAIT
// 横
// Configuration.ORIENTATION_LANDSCAPE
縦画面や横画面の変更を検知する
画面の向きの変更に伴い、基本的には再描画が走るため、特に特別な処理は必要ないように思います。
val isVertical = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
サンプルプログラム
冒頭の写真の物を作った際のコードを貼っておきます。
サンプルコード@Composable
fun ShowName() {
val isVertical =
LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
if (isVertical) {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.fillMaxSize()
.weight(1f)
.background(Color.Blue),
contentAlignment = Alignment.Center
) {
Text(
"First Name!", fontSize = 24.sp,
textAlign = TextAlign.Center
)
}
Box(
modifier = Modifier
.fillMaxSize()
.weight(1f)
.background(Color.Red),
contentAlignment = Alignment.Center
) {
Text(
"Last Name!", fontSize = 24.sp,
textAlign = TextAlign.Center
)
}
}
} else {
Row(
modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.fillMaxSize()
.weight(1f)
.background(Color.Blue),
contentAlignment = Alignment.Center
) {
Text(
"First Name!", fontSize = 24.sp,
textAlign = TextAlign.Center
)
}
Box(
modifier = Modifier
.fillMaxSize()
.weight(1f)
.background(Color.Red),
contentAlignment = Alignment.Center
) {
Text(
"Last Name!", fontSize = 24.sp,
textAlign = TextAlign.Center
)
}
}
}
}
Links
おわりに
今回は Jetpack Compose で『縦画面と横画面を検知しレイアウトを変更する』ということをやってみました。
