Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Android屏幕适配方案分析

Android屏幕适配方案分析

作者头像
用户2356368
发布于 2022-04-07 08:33:53
发布于 2022-04-07 08:33:53
1.2K00
代码可运行
举报
文章被收录于专栏:薄荷前端薄荷前端
运行总次数:0
代码可运行

为什么要屏幕适配

Android开发过程中我们常用的尺寸单位有px、dp,还有一种sp一般是用于字体的大小。但是由于px是像素单位,比如我们通常说的手机分辨例如1920*1080都是px的单位。现在Android屏幕分辨率碎片化720x1280、1080x1920、2280x1080,这就造成例如187px会在各个分辨率的机型上都是显示一样大小的,那肯定不是我们想要的效果,所以用px单位我们是难以达到适配效果的,那么为什么用dp可以呢?

使用px单位从左到右依次为 480 * 800、1080 * 1920、1440 * 2560

使用dp单位从左到右依次为 480 * 800、1080 * 1920、1440 * 2560

屏幕总宽度依次为 320dp、415dp、411dp

那么什么是dp?

dp指的是设备独立像素,以dp为尺寸单位的控件,在不同分辨率和尺寸的手机上代表了不同的真实像素,比如在分辨率较低的手机中,可能1dp=1px,而在分辨率较高的手机中,可能1dp=2px,这样的话,一个187dp高度的控件,在不同的手机中就能表现出差不多的大小了。

dp如何计算成px

android中的dp在渲染前会将dp转为px,计算公式:

  • px = density * dp;
  • density = dpi / 160;
  • px = dp * (dpi / 160);

而dpi是根据屏幕真实的分辨率和尺寸来计算的,每个设备都可能不一样的。

由于density不是固定不变的,所以每个分辨率不同的设备他们的density都肯定不相等,这样就会造成每个设备的宽/高对应的总dp都是不同的,假设480 * 800分辨率的density是1.51080 * 1920分辨率的density是2.61440 * 2560分辨率的density是3.5。那么它们对应的宽度总dp = (宽度px) / density,分别为320dp、415dp、411dp。可以看出单位为dp的时候三个设备之间的差距就不是很大了,但是这样肯定还是不能满足我们对屏幕适配的要求的。下面来看看Android常见的三种比较成熟的屏幕适配方案,并分析这几种方案的优劣。

屏幕适配方案

1.1 宽高限定符适配

设定一个基准的分辨率,也就是设计图对应的分辨率,其他分辨率都根据这个基准分辨率来计算,在不同的尺寸文件夹内部,根据该尺寸编写对应的dimens文件。

比如我们的设计图 375 * 667为基准分辨率

  • 宽度为375,将任何分辨率的宽度整分为375份,取值为x1-x375
  • 高度为667,将任何分辨率的高度整分为667份,取值为y1-y667

那么对于1080*1920的分辨率的dimens文件来说,

  • x1=(1080/375)*1=2.88px
  • x2=(1080/375)*2=5.76px
  • y1=(1920/667)*1=2.87px
  • y2=(1920/667)*2=5.75px

当代码里面引用高度为y_187,在APP运行时会根据当前设备分辨率去找对应xml文件中对应的高度,我们就可以按照设计稿上的尺寸填写相对应的dimens引用了,这样基本解决了我们的适配问题,而且极大的提升了我们UI开发的效率。

验证方案

简单通过计算验证下这种方案是否能达到适配的效果,例如设计图上有一个宽187dp的View。

480 * 800

  • 设计图占宽比: 187dp / 375dp = 0.498
  • 实际在480 * 800占宽比 = 187 * 1.28px / 480 = 0.498

1080 * 1920

  • 设计图占宽比: 187dp / 375dp = 0.498
  • 实际在1080 * 1920占宽比 = 187 * 2.88px / 1080 = 0.498
  • 计算高同理

但是这个方案有一个致命的缺陷,那就是需要精准命中才能适配,比如1920x1080的手机就一定要找到1920x1080的限定符,否则就只能用统一的默认的dimens文件了。而使用默认的尺寸的话,UI就很可能变形,简单说,就是容错机制很差。

1.2 smallestWidth适配

smallestWidth适配,或者叫sw限定符适配。指的是Android会识别屏幕可用高度和宽度的最小尺寸的dp值(其实就是手机的宽度值),然后根据识别到的结果去资源文件中寻找对应限定符的文件夹下的资源文件。

这种机制和上文提到的宽高限定符适配原理上是一样的,都是系统通过特定的规则来选择对应的文件。

可以把 smallestWidth 限定符屏幕适配方案 当成这种方案的升级版,smallestWidth 限定符屏幕适配方案 只是把 dimens.xml 文件中的值从 px 换成了 dp,原理和使用方式都是没变的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
├── src/main
│   ├── res
│   ├── ├──values
│   ├── ├──values-sw320dp
│   ├── ├──values-sw360dp
│   ├── ├──values-sw400dp
│   ├── ├──values-sw411dp
│   ├── ├──values-sw480dp
│   ├── ├──...
│   ├── ├──values-sw600dp
│   ├── ├──values-sw640dp
验证方案

1920 * 1080分辨率的手机,dpi为420,我们同样设置一个View为187dp宽

  • density = (dpi = 420) / 160 = 2.6
  • 屏幕总宽度dp = 1080 / density = 415
  • 找到文件夹values-sw410dp下的187dp = 204.45dp
  • 通过公式px = density * dp,计算出px = 531.57
  • 算出占屏幕宽度的比例,56.86 / 1080 = 0.492

1440 * 2560分辨率的手机,dpi为560,我们同样设置一个View为187dp宽

  • density = (dpi = 420) / 160 = 3.5
  • 屏幕总宽度dp = 1440 / density = 411
  • 找到文件夹values-sw410dp下的187dp = 204.45dp
  • 通过公式px = density * dp,计算出px = 715.57
  • 算出占屏幕宽度的比例,715.57 / 1440 = 0.496

因为识别的文件夹是values-sw410dp的文件夹,但是屏幕宽度为415dp和411dp,所以最后计算出的占比会有一点点误差,基本可以忽略不计,可以达到相对比较准确的适配效果

优点
  1. 非常稳定,极低概率出现意外
  2. 不会有任何性能的损耗
  3. 适配范围可自由控制,不会影响其他三方库
  4. 在插件的配合下,学习成本低
缺点
  1. 侵入性高,在所有地方都需要引用。
  2. 还是没有办法覆盖所有的机型分辨率,部分机型可能适配效果还是不佳
  3. 不能以高度为基准进行适配
  4. 生成很多文件,增大APP体积1~2M

1.3 今日头条适配方案

今日头条屏幕适配方案的核心原理在于,根据以下公式算出 density

默认px = density * dp,也就是屏幕总宽度dp = 屏幕宽度px / density,这个时候我们假设所有设备上的屏幕总宽度dp会等于我们设计图375dp,那么可以得出一个公式:

density = 屏幕宽度px / 设计图宽度(375dp)

然后我们通过系统api,将density赋值给系统,抛弃掉系统默认计算density的计算公式。

这样可以很巧妙的实现屏幕适配,而且侵入性极低,甚至可以忽略不计。

验证方案

1920 * 1080分辨率的手机,我们同样设置一个View为187dp宽,设计图宽度为375dp

  • density = (屏幕宽度px = 1080) / 375 = 2.88
  • View宽度 = density * 187dp = 538.56
  • 算出占屏幕宽度的比例,57.6 / 1080 = 0.498

1440 * 2560分辨率的手机,我们同样设置一个View为187dp宽,设计图宽度为375dp

  • density = (屏幕宽度px = 1440) / 375 =3.84
  • View宽度 = density * 187dp = 718.08
  • 算出占屏幕宽度的比例,718.08 / 1440 = 0.498

可以看出,这种方案是完全没有误差的,而且侵入性极低,只需要修改系统的density。虽然修改系统的density属性会产生一小部分影响,但是基本都是很好解决的。

优点
  1. 使用成本非常低,操作非常简单
  2. 侵入性非常低
  3. 可适配三方库的控件和系统的控件
缺点
  1. 会全局影响APP的控件大小,例如一些第三方库控件,他们设计的时候可能设计图尺寸并不是像我们一样是375dp,这样就会导致控件大小变形等一些问题。

参考文章

骚年你的屏幕适配方式该升级了!-SmallestWidth 限定符适配方案

Android 屏幕适配终结者

Android 目前最稳定和高效的UI适配方案

广而告之

本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/05/06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Docker 学习应用篇三:使用docker搭建的环境,安装thinksns
Thinksns 是一个开源的社交网站,因为目前的项目需要用到这个,所以就下载一个安装试试看。 之前在windows上用了wamp,安装的很顺利。但是项目是要部署到linux上的。于是我便用了Dock
ShenduCC
2018/04/27
1.2K0
Docker 学习应用篇三:使用docker搭建的环境,安装thinksns
浅谈日常使用的 Docker 底层原理-三大底座
适合的读者,对Docker有过简单了解的朋友,想要进一步了解Docker容器的朋友。
宁在春
2023/10/16
1.8K0
浅谈日常使用的 Docker 底层原理-三大底座
实战 | ​Docker ubuntu:18.04 镜像制作
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化。近年来,Docker方式越来越受欢迎,本文针对Docker ubuntu的镜像操作进行了详细阐述:包括两种方式。
3D视觉工坊
2020/12/11
6.1K0
docker 容器从入门到入魔
1. docker 是什么2. docker 解决什么问题1. 解决虚拟机资源消耗问题。2. 快速部署。3. 提供一次性的环境。4. 提供弹性的云服务。5. 组建微服务架构。3. docker 安装部署与使用1. 安装 docker 引擎2. 使用 docker1. 理解 docker 的架构2. docker 命令3. 卷的概念4. 自制镜像并发布4. docker 网络6. docker pipework7. docker 网络端口映射4. 总结
somenzz
2020/12/10
1.2K0
docker 容器从入门到入魔
Docker容器逃逸
由于传播、利用本公众号亿人安全所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,公众号亿人安全及作者不为此承担任何责任,一旦造成后果请自行承担!如有侵权烦请告知,我们会立即删除并致歉。谢谢!
亿人安全
2023/12/28
5820
Docker容器逃逸
简单几步搭建一个基于 Docker 的 Tomcat 运行环境!
Docker 旨在提供一种应用程序的自动化部署解决方案,在 Linux 系统上迅速创建一个容器 (轻量级虚拟机) 并部署和运行应用程序,并通过配置文件可以轻松实现应用程序的自动化安装、部署和升级,非常方便。因为使用了容器,所以可以很方便的把生产环境和开发环境分开,互不影响,这是 docker 最普遍的一个玩法。更多的玩法还有大规模 web 应用、数据库部署、持续部署、集群、测试环境、面向服务的云计算、虚拟桌面 VDI 等等。
用户6543014
2019/10/25
7190
Docker入门
Docker是容器技术的一个代表,容器的技术从本质上讲是程序打包、隔离的技术,不是一个很新的技术,核心的技术在内核中已经存在很久了。但容器技术被大众所用,变成这么流行,这么火爆的技术是因为Docker。Docker在13年被开源,变得越来越流行,Docker在微服务领域、云计算领域有着广泛的应用。这是为什么呢。任何技术的流行可能的原因有两点,一是能够解决大家的痛点,二是能够能够适应潮流.docker理顺了软件包的问题,有了docker运行一个镜像是非常容易的,不需要做各种环境的配置。
方志朋
2022/05/08
5520
Docker入门
Docker入门:Docker安装与基本使用
Docker支持主流的Linux Server、也支持Windows Server,同时为了方便开发者在开发环境中使用Docker,Docker官方也提供了支持Windows以及macOS的Docker Desktop。
KenTalk
2023/04/07
1.6K0
Docker入门:Docker安装与基本使用
Docker从门外到入门使用
取材 第一本Docker书。原作者:James Turnbull 安装 这里只说明Windows环境的安装(Windows7以上) 使用Docker Toolbox工具即可:http://mirror
嘘、小点声
2019/12/02
1K0
Vulhub靶场搭建教程
下一步配置好主机名称,账户和密码,千万别进去配置,不然巨麻烦,你如果不懂可能配置一个小时还没安装好,我这种方法,不需要进去点击任何操作,它自动把系统配置好了,10分钟左右系统就装好了,如下图所示:
Miloce
2022/09/28
2.3K1
Vulhub靶场搭建教程
Docker安装kali
a1765e8e381e为你的镜像id,-t 让 docker 分配一个伪终端并绑定到容器的标准输入上 ,-p 指定映射端口,如60001端口映射到虚拟机的 5901 端口,-d 保持后台运行, -c 执行一些命令
sakurajiamai
2022/01/02
3K0
Docker安装kali
docker 操作进阶
sudo docker exec -it merlingpu env LANG=C.UTF-8 /bin/bash
AI拉呱
2021/01/14
4810
Ubuntu安装podman
Podman 是一个开源的容器运行时项目,可在大多数 Linux 平台上使用。Podman 提供与 Docker 非常相似的功能。它不需要在你的系统上运行任何守护进程,并且它也可以在没有 root 权限的情况下运行。
用户6792968
2022/08/30
2.3K0
Docker 入门指南
Docker是基于Go开发的应用容器引擎,属于 Linux 容器的一种封装,提供简单易用的容器使用接口。
被水淹没
2023/02/25
2.2K0
Docker 入门指南
WSL 下优雅地 Coding
WSL:Windows Subsystem for Linux,Windows 系统下的 Linux 子系统
cnguu
2020/10/23
9900
WSL 下优雅地 Coding
使用PHP搭建Web版Docker管理系统实践
团队中使用容器比较频繁,但并不是所有人都可以登陆服务器去执行命令,但是又需要用到docker,所以有一个需求通过web来管理docker,而其他语言并不怎么熟悉,后期维护成本比较高,所以笔者采用PHP来管理容器。
汤青松
2018/10/19
2.3K0
使用PHP搭建Web版Docker管理系统实践
Docker 生产SSH服务的镜像
7.当前这个容器 root 用户目录下建立.ssh目录,复制需要的公钥到 authorized_keys 文件
solate
2019/07/19
8890
搭建 Ubuntu 24.04 基础开发环境指南
两年前我写过一篇《在笔记本上搭建高性价比的 Linux 学习环境:基础篇[1]》,随着时间推移,里面的一些内容需要更新了。
soulteary
2025/01/19
6220
搭建 Ubuntu 24.04 基础开发环境指南
基于OSX平台的Docker快速入门(还没有熟悉Docker吗?那就从这开始吧)
仅仅在2013年左右才发布的Docker,却已经遍布了我的Twitter消息和RSS阅读器。在之前我已经运行过“Hello World”的示例,但我自觉没有能真正理解其内涵,准确地说,我并不了解Doc
solarest
2018/01/08
1.8K0
基于OSX平台的Docker快速入门(还没有熟悉Docker吗?那就从这开始吧)
搭建 Ubuntu 24.04 基础开发环境指南
两年前我写过一篇《在笔记本上搭建高性价比的 Linux 学习环境:基础篇》,随着时间推移,里面的一些内容需要更新了。
soulteary
2025/01/17
2.5K0
搭建 Ubuntu 24.04 基础开发环境指南
相关推荐
Docker 学习应用篇三:使用docker搭建的环境,安装thinksns
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验