🐡

Jetpack Composeで画面の高さ、幅(height,width)を取得する方法

2022/05/04に公開

スクリーンサイズ(画面全体の高さ幅)を取得する方法

端末のスクリーンサイズを取得する方法は以下です。DPで取得できます。

val screenHeight = LocalConfiguration.current.screenHeightDp
val screenWidth = LocalConfiguration.current.screenWidthDp

Boxの高さ幅を取得する方法

各Composeのサイズを取得する場合は、BoxWithConstraintsを使用します。

BoxWithConstraints {
    val screenWidth = with(LocalDensity.current) { constraints.maxWidth.toDp() }
    val screenHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() }
}

GridViewにグラデーションのボタンを敷き詰めるために使用しました

  • ソースサンプル
@Composable
fun MainScreen(
    buttonList: List<ButtonStyle>,
    onPush: (Long) -> Unit
) {
    Scaffold(modifier = Modifier.fillMaxSize()) {
        BoxWithConstraints {
            val screenWidth = with(LocalDensity.current) { constraints.maxWidth.toDp() }
            val screenHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() }

            LazyVerticalGrid(
                cells = GridCells.Fixed(5),
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
            ) {
                items(items = buttonList) { style ->
                    MultiButton(
                        style = style,
                        height = screenHeight / 10,
                        onPush = onPush,
                    )
                }
            }
        }
    }
}
  • 作成した画面

参考

https://zenn.dev/tmk815/articles/4b7f303f51ae7e

Discussion