Jetpack Compose简单的屏幕适配方案

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jetpack Compose简单的屏幕适配方案相关的知识,希望对你有一定的参考价值。

参考技术A 最近鼓起勇气开始学习Compose,听说Compose可以提升开发效率、降低bug出现的概率,摆脱各种xml的束缚,所以打算丢弃所有和View相关的东西重构项目。
1.0版本发布的时候,那种风格和思维方式着实让我吓了一跳,以至于出来这么就都没有去学习。最近官方订阅号一直在强推Compose,再对比了一下如今的开发效率,作为跨界三流程序员,我是真的不想再深入研究View之类的东西了。这次花了一点时间学习了一下,探索出了一个比较简单的方式实现屏幕适配。用我的能力去理解,大概就是:在不同设备中,界面布局尽量与设计图保持一致。

首先,阅读这篇文章,了解一下适配的思路 : 一种极低成本的android屏幕适配方式

当了解了各项重要的指标之后,整理下来无非就是三样东西: DP(密度无关像素) 、 PX(像素) 、 Density(像素密度)
在Compose中,从官方的介绍里面不难看出,定义尺寸需要用到以下两种方式:

使用 dp 扩展方法,将数字( Number 类)转化为 DP 对象

使用 sp 扩展方法,将数字( Number 类)转化为 TextUnit 对象
对于尺寸的定义,目前我知道的就这两种,如果以后探索的更多,我会一直学习并记录。

如果要适配设计图,其实就和之前的文章提到的一样,需要修改 Density ,但对于一个生手来说,修改底层的一些东西会不会碰到各种各样不好解决的问题?索性干脆不要改系统的density,直接把适配之后的尺寸换算出来,用作各个部件的宽高,应该能解决问题。

流程其实很简单:

适用于控件

适用于文字

注意中间计算 density 时,需要判断横竖屏,否则尺寸会有问题。
最后,只需要调用扩展方法 compatDP 、 compatSP 即可

这只是个人觉得最简单的一种方法,不需要导包写配置,如果有更好的办法请在评论区指导。
非科班出身,如有错误,欢迎指正。

以上是关于Jetpack Compose简单的屏幕适配方案的主要内容,如果未能解决你的问题,请参考以下文章

Jetpack Compose 实现完美屏幕适配

在 Scaffold Jetpack Compose 内的特定屏幕上隐藏顶部和底部导航器

移动端,多屏幕尺寸高清屏retina屏适配的解决方案

Jetpack Compose 手机屏幕布局预览

屏幕滚动到顶部(Jetpack Compose 分页)

如何在jetpack compose中定义不同的屏幕