一种jetpack compose的屏幕适配方案

在compose出现之前，适配不同的屏幕大小和各种物理尺寸的屏幕，是一件让人没那么愉悦的工作。在compose出现之后，我们可以利用响应式ui的特点,无需在编译时就把ui大小写入xml布局文件,而是在程序运行时在动态设置ui大小. 这样带来的好处是, 编译时无法得知所运行的屏幕尺寸,而运行时可以知道. 理论上说我们可以把ui做成与设计稿完全一致而且代价最小

具体实现

假设我们的设计稿是放在蓝湖上的(其他同理) 不管像素多少,我们就按360来查看. 我们在写compose的时候通常是xx.dp来设置ui大小,比如

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(/*...*/)
        Column { /*...*/ }
    }
}

现在我们实现一个扩展方法, 来把实际屏幕像素按照360来等分,然后按照设计稿上的尺寸还原到实际应该有的像素,如下:

val Number.composeDp
  get() =
      Resources.getSystem().displayMetrics.run {
        val dp = widthPixels / density
        Dp((toFloat() * dp / 360))
      }

好了,我们可以尝试使用一下, 让布局占屏幕宽度的一半(180/360)

@Composable
fun testComposeDp() {
  Box(modifier = Modifier.background(Color(0xffffffff))) {
    Box(modifier = Modifier.width(180.composeDp).fillMaxHeight().background(Color(0xff000000))) {

    }
  }
}

运行效果:

1. 横屏

2. 竖屏

可以看到,不管分辨率和屏幕尺寸,都达到了效果

同理可以扩展composeSp方法