关于android屏幕尺寸适配的整理以及思考

news/2024/10/22 13:32:24/

一直以来android屏幕尺寸相关的东西我都很薄弱,什么dpi, ppi, 英寸我都比较疑惑,本文主要是理清概念,理解头条的屏幕适配原理,以为目前我工作是如何做UI适配的。

一些基础概念

屏幕尺寸

屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。这个值是利用手机屏幕的长和宽,然后利用勾股定理,就可以算出斜边的长了。

屏幕像素密度

屏幕像素密度,即每英寸屏幕所拥有的像素数,英文简称ppi, 屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。

那dpi又是什么呢? 其实对Android而言,DPI等价于PPI。 具体解释可以参考这篇文章:
https://blog.csdn.net/u010134087/article/details/54926403

屏幕分辨率

屏幕分辨率是指在横纵向上的像素点数,单位是px,1px=1个像素点

我们可以看一下下面这两张图,就可以理清上面三个概念了:

newppi.png

ppi.jpg

Android中的屏幕尺寸相关概念

dp

dp是一种密度无关像素,对应于160dpi下像素的物理尺寸。它与px的关系是 : px = dp * (dpi / 160)。

sp的概念与dp类似,是用来表示字体大小的一个单位。

即在160dpi下,1dip=1px,如果320dpi,则1dip=2px,以此类推。这里延伸出我们常说的一个密度,其实这里就可以理解为: (dpi / 160)。
常见的密度:

xxhdpi: 3.0
xhdpi: 2.0 320 ppi
hdpi: 1.5
mdpi: 1.0(基准) 160 ppi
ldpi: 0.75

我们来看一张华为荣耀7的参数:

荣耀7.png

所以在android中布局文件中写 10dp。 在运行时会被android系统根据 px = dp * (dpi / 160) 转为具体的 px 。那么对应上面这个荣耀7就是 26.5 px

使用dp做屏幕适配会引发的问题

我们先假设有两个设备:

设备1,屏幕宽度为 1080px,480DPI,屏幕总 dp 宽度为 1080 / (480 / 160) = 360dp

设备2,屏幕宽度为 1440px,560DPI,屏幕总 dp 宽度为 1440 / (560 / 160) = 411dp

那么如果对于一个view,我们都写100dp, 那么这个view再被渲染的时候,在设备1上看起来会明显比设备2大。这是因为他们占的宽度比不一样:
(100 / 360 = 0.278) -> 27%
(100 / 411 = 0.243) -> 24%

今日头条屏幕适配

最近关于屏幕适配在网络上讨论的最多的就是今日头条的方案,而这个方案的核心公式是: 屏幕的宽度总 px / density = 屏幕的宽度总 dp

density就是上面的 (dpi / 160)

可以看到上面使用dp适配引发的问题,那么如果对于屏幕分辨率不同的手机,屏幕的宽度总dp总是相同的,那么我们我们直接按照dp来写view的尺寸就不会有问题了。

那么这个方案就是对于不同分辨率的手机,变化density来使屏幕的宽度总dp是不变的。

目前我工作中对于view布局方式

目前我并没有采用今日头条这种方案做尺寸适配。一般设计会以 iphone8 : 375 * 667, 来给android和ios出一套图。我直接按照设计的标注,直接在布局文件中使用dp。这样做在Android中做出的效果设计师是可以接受的,那这会有什么问题呢?

我今天仔细想了一下我们为什么会这么做,以及这么做会引发什么问题。 在看这个之前我们先来看一下iphone手机的屏幕尺寸:

 

iphone尺寸.png

在ios中有类似于android中dp的单位,pt。

可以看到如果ios的同学如果直接写pt,那么在 iphone8 plus 也会出现android中dp适配所出现的问题,因为屏幕的宽度总dp不一样。

使用iphone8 (375*667)会引发的问题

我们还是以荣耀7为例:1920 * 1080, 424ppi, (dpi / 160) = 2.65 。那么转化为dp的屏幕宽高就是 : 724(dp) * 407(dp)。 不论在宽还是高都大于设计师给的 (667 * 375)。

以宽为例,如果我直接按照设置图纸来布局的话,那么宽是会出现不够的情况的:

diffrentdp.png

其实这就是上面dp适配的问题。

为什么这样做又是ok的呢?

首先我们来看一下常见的手机的尺寸参数

http://www.woshipm.com/screen/index.html

可以看出大部分的手机的dp宽高参数都是比较靠近 : 667 * 375。 所以在布局的时候只要不要出现在一个方向上所有布局参数都写死就是没太大问题:

比如:

  1. 对于375dp的宽度, 3个view的宽你都写了固定值,且相加等于375。那么在不同的手机上由于屏幕总dp宽不同,那么可能就会有空余或者显示不够的情况。
  2. 对于375dp的宽度, 2个view的宽写了固定值,剩余那个view占用剩余空间,那么在不同的手机上显示效果还是ok的。

所以设计师在做设计的时候就会考虑这种情况,使得那些 多余或者缺少的空间不会影响显示的效果。不过问题确实是有的。

参考文章:

https://www.jianshu.com/p/c3387bcc4f6e

https://juejin.im/post/5b7a29736fb9a019d53e7ee2

 


http://www.ppmy.cn/news/501874.html

相关文章

国民游戏王者荣耀的真实地图开发之路

👉腾小云导读 相信很多人都玩过王者荣耀,大家在欣赏其华丽的游戏界面以及炫酷的游戏技能时,是否好奇过王者荣耀的地图是怎样开发出来的?在开发的历程中,都有哪些问题?是怎样解决的?本文将从其地…

vue+leaflet笔记之热力图

vueleaflet笔记之热力图 文章目录 vueleaflet笔记之热力图开发环境代码简介插件简介与安装使用简介 详细源码(Vue3) 本文介绍了Web端使用 Leaflet开发库展示热力图方法 (底图来源:天地图),结合leaflet.heat插件可以很容易的做出热力图,通过调整其配置参…

Electron详解(二):基本使用与项目打包

一、electron的基本使用 创建一个 electron 项目 在使用Electron进行开发之前,您需要安装 Node.js,最低工作版本为 14.x,低于 14 的版本在后面的打包过程中可能会报错。 (注意,因为 Electron 将 Node.js 嵌入到其二…

易语言读写富士通MB89R118卡 NXP15693标签源码

本示例发卡器介绍:Android Linux RFID读写器NFC发卡器WEB可编程NDEF文本/智能海报/-淘宝网 (taobao.com) DLL命令定义表 .版本 2 .DLL命令 蜂鸣器嘀一声, 字节型, "OUR_MIFARE.dll", "pcdbeep" .参数 xms, 整数型 .DLL命令 读取设备编号…

SpringBoot2.3集成Spring Security(二) JWT认证

项目背景 紧接上文,我们已经完成了 SpringBoot中集成Spring Security,并且用户名帐号和密码都是从数据库中获取。但是这种方式还是不能满足现在的开发需求。 使用JWT的好处: 无状态认证:JWT本身包含了认证信息和声明&#xff0…

功能强大却十分小众的5款软件

有些软件虽然功能强大,使用便捷,但是却没有得到广泛的关注和推荐,这并不意味着它们不值得一试,相反,它们可能是你不知道的宝藏。我的任务就是要把这些隐藏的好软件分享给大家。 轻量级笔记——CintaNotes CintaNotes…

BUUCTF刷题十一道(07)

文章目录 [Zer0pts2020]Can you guess it?[CISCN2019 华北赛区 Day1 Web2]ikun[GWCTF 2019]枯燥的抽奖[WUSTCTF2020]CV Maker[NCTF2019]True XML cookbook[RCTF2015]EasySQL[CISCN2019 华北赛区 Day1 Web1]Dropbox[CISCN2019 华北赛区 Day1 Web5]CyberPunk[红明谷CTF 2021]wri…

中国一重集中采购平台的建设经历和亮点

中国一重前身为第一重型机器厂,是“一五”期间建设156项重点工程项目之一,始建于1954年,是中央管理的涉及国家安全和国民经济命脉的国有重要骨干企业之一,是国家创新型试点企业、国家高新技术企业,拥有国家级企业技术中…