Android应用开发——从设计稿到手机屏幕的UI尺寸转换

情景导入

假设我们需要将这个计算器UI界面设计到1080*2340，440dpi(pixel 5)上，我们如何求每个控件的dp值？

数学建模

1:获取设计稿中控件的px值

QQ截图可以获取设计稿px值

2:获取手机尺寸px值

这个是已知，1080*2340px

3:dp与px转换

dp*dpi/160 = px

dp=px * 160 / dpi

题目中dpi=440

4:求转换比

已知：设计稿宽度为W px，高度为H px，设计稿中组件A宽度为w px,高度为h px，手机宽度为Xpx，高度为Ypx,dpi为dpi

求解：组件A的宽高为多少dp

解：

宽度：

设由设计稿转化为手机屏幕的px转化比为k,则：k=X/W

该组件的宽度w在手机中应该占的px值wp：wp=w*k=w*X/W

由于dp=px*160/dpi

将px=wp代入上式得：

该组件的宽度w在手机中应该占的dx值wd=w*X*160/(W*dpi)

宽度放缩比例系数（设计稿px->手机屏幕dp) kw=X*160/(W*dpi)

同理可得，hd=h*Y*160/(H*dpi)

高度放缩比例系数（设计稿px->手机屏幕dp) kh=Y*160/(H*dpi)

代入到本题:X=1080,Y=2340,W=495,H=732,dpi=440

wd=w*1080*160/495/440=0.793388429752066*w

kw=0.793388429752066即为宽度放缩比

hd=h*2340*160/732/440=1.162444113263785*h

kh=1.162444113263785即为高度放缩比

这里我们抽象出了两个比例系数，可以用于拓展

应用拓展

Q1：如何适配市面上全部分辨率的手机？

Android全面的屏幕适配方案解析(二)__宽高限定符屏幕适配 - 简书 (jianshu.com)

这篇文章讲的很好，我就不赘述了

Q2：如何完成从设计稿到手机屏幕的转换

根据上文的枚举分辨率做适配的思想，我们可以根据相同思路再建个模，写个方法求出相应尺寸进行UI设计，由于思路相同，因此建模留给读者作练习

成果展示