物理像素、逻辑像素、百分比适配
日常开发中,接触到最多的屏幕相关的单位,分别是物理像素(px)
,逻辑像素(dp, point)
。
那物理像素和逻辑像素的区别是?
这儿以一张 3x4px
的图片举例。假定该图片放置在 5x6px
的设屏幕中。如下图所示。
此刻想象这个图片放置在 `10*12px` 的屏幕中会是怎样呢。比照如下,会发现该图片放置在分辨率更高的屏幕中会变得非常狭小。
继续我们的比如,假如该屏幕想要保证图片能跟前面的低分辨率的设备显现作用共同的话,则图片的宽高应添加1倍的巨细。即设备需求2倍
的像素份额dpr(device percent ratio)
。这样图片3*4
逻辑像素的尺度的图片在高分辨率设备中能够映射成6*8
物理像素,而在低分辨率的设备(像素份额时1的设备),则3*4
逻辑像素的图片映射为3*4
物理像素的图片。
这是逻辑像素的大致机制。逻辑像素会依据方针设备的分辨率和尺度核算出设备的缩放份额。逻辑像素呈现是为了让不同分辨率的设备中显现相同的内容能取得大致相同的作用,当然逻辑像素并不是这样简单的百分比换算。
在Android中这个逻辑像素是dp
,而ios中则是pt
。在android中dp的换算公式中详细换算公式想了解的能够点击下面链接了解。
betterprogramming.pub/cracking-an…
在Android开发中将不同分辨率设备的中的物理像素比率进行如下分类。所以假定设备是230dpi
的话也以hdpi
的1.5倍
进行换算。所以这跟百分比的换算是不太一样的。以“微信”应用举例。
底部的Tab(微信、通讯录、发现,我),假定规划图中屏幕的宽度是375dp
,依据tab均分,单个tab为93.75
。你假如经过水平布局指定宽度为93.75
逻辑像素的话则会发现出来的作用在某些手机上并不是均分的。
如下图相似微信界面运行在Iphone 14 pro。此刻应该用百分比进行适配,即在不同的分辨率中依据规划图的尺度进行等份额换算。如:规划图的分辨率为375*812
,而显现设备的分辨率为1080*1920
,则规划图上1像素相当于方针设备1 ✖️ “显现设备依据规划图的份额(1080/375=2.88)
”像素,即 1✖️2.88=2.88像素
。这就是百分比适配。比照下图能够发现逻辑像素适配的“我”是偏左的。
百分比适配是一种依据规划图的尺度和设备的分辨率,以百分比的办法进行换算和适配的办法。经过核算规划图上的像素与方针设备分辨率的份额,能够得到百分比像素的值,然后实现在不同分辨率的设备上保持共同的布局和显现作用。
可是百分比并不是万能的。如下图逻辑像素适配和百分比像素适配的比照。在列表中,百分比布局则会呈现一个问题。你会发现在大尺度高分辨率的设备中,列表中的每一项都特别大。则假如用逻辑像素(dp、pt)
则是这样。运用逻辑像素能充分发挥大屏的优势,屏幕越大显现的内容更多。
什么时候应该用逻辑像素,百分比像素。
详细什么时候应该用逻辑像素和百分比像素适配,取决于规划图UI。依据不同规划意图决议何种方案。大部分状况下运用逻辑像素不会呈现什么问题,列表item必定运用逻辑像素。可是什么时候应该用百分比像素呢?
举个比如:
ps: 比如中我会以百分比像素表示将规划图像素依据不同分辨率设备等份额换算的像素。即1百分比像素= 1✖️ [(规划图分辨率)/ (方针设备分辨率)]。
下面是一个“购买成功”的UI图。中心有个票根信息。票根信息有个票根背景图片。
标示图中的屏幕分辨率为 393*852
这儿票根信息UI应该用逻辑像素还是百分比像素适配呢?
经过标示图能明显看出票根信息在宽度上固定需求占用必定份额。所以这儿宽度应该为 353百分比像素
。为了宽高份额正确,故高度也应为 346百分比像素
。注意这儿高度的 346百分比像素
也应该是依据屏幕宽度 393
的百分比像素。即 方针设备屏幕宽度 * 346 / 393
因为整个票根的宽高都为百分比适配,则里边子部件的摆放、间距都应按照百分比的办法进行适配。否则则会呈现子部件无法像标示图那样正确对齐的状况。
总结
物理像素(px
)是屏幕上的实际物理点,表示屏幕上显现内容的最小单位。逻辑像素(dp、pt
)是开发中运用的抽象单位,与物理像素的联系由设备的像素密度决议。
逻辑像素是开发中运用的抽象单位,它们与物理像素之间有一个映射联系。在不同的设备上,逻辑像素的布局和巨细是相对统一的。运用逻辑像素能够让开发者在不同分辨率的设备上保持共同的布局和显现作用。
百分比适配是一种依据规划图的尺度和设备的分辨率,以百分比的办法进行换算和适配的办法。经过核算规划图上的像素与方针设备分辨率的份额,能够得到百分比像素的值,然后实现在不同分辨率的设备上保持共同的布局和显现作用。
一般状况下,运用逻辑像素能够保持在不同设备上显现内容的共同性和最佳作用,特别是在触及列表和大屏幕显现的状况下,需求依据规划图,决议运用何种方案。能够经过先分析运用逻辑像素考虑是否合理,再考虑百分比适配的状况。在一些特定的规划需求下,如背景图片的铺满屏幕、份额布局等,能够考虑运用百分比适配来实现更精确的布局和显现作用。