前往小程序,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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
AndroidAutoSize开源库屏幕适配分析[通俗易懂]
https://github.com/JessYanCoding/AndroidAutoSize
全栈程序员站长
2022/09/06
5.1K0
骚年你的屏幕适配方式该升级了!-smallestWidth 限定符适配方案
原文地址: https://www.jianshu.com/p/2aded8bb6ede
用户2965681
2018/09/19
9820
骚年你的屏幕适配方式该升级了!-smallestWidth 限定符适配方案
今日头条屏幕适配方案落地研究
大家好,现在给大家推荐一种极低版本的 Android 屏幕适配方案,就是今日头条适配方案,“极低成本”这四个字正是今日头条的适配文章标题。
终端研发部
2019/06/06
1.6K0
今日头条屏幕适配方案落地研究
Android全面的屏幕适配方案解析(二)
上一篇把屏幕适配相关的概念梳理了一下,主要也是为了能更好的理解后面内容,那从这篇开始就要讲解适配方案啦,没看第一篇的可以先看这篇:Android全面的屏幕适配方案解析(一)
SoullessCoder
2022/01/05
1.2K0
Android全面的屏幕适配方案解析(二)
Android全面的屏幕适配方案解析(三)
之前两篇把屏幕适配概念梳理了还讲解了dp适配方案、宽高限定符适配方案,还没有看过的童鞋可以先参考这两篇: Android全面的屏幕适配方案解析(一) Android全面的屏幕适配方案解析(二)
SoullessCoder
2022/01/20
5780
Android全面的屏幕适配方案解析(三)
Android开发稳定和高效的UI适配方案总结
Android系统发布十多年以来,关于Android的UI的适配一直是开发环节中最重要的问题,但是我看到还是有很多小伙伴对Android适配方案不了解。刚好,近期准备对糗事百科Android客户端设计一套UI尺寸适配方案,可以和小伙伴们详细的聊一聊这个问题。
ZhangXianSheng
2019/08/29
5120
Android开发稳定和高效的UI适配方案总结
Android全面的屏幕适配方案解析(四)__今日头条适配方案
之前三篇把屏幕适配概念梳理了还讲解了列举的其中四种适配方案,还没有看过的童鞋可以先参考这三篇: Android全面的屏幕适配方案解析(一)__屏幕适配概念梳理 Android全面的屏幕适配方案解析(二)__宽高限定符屏幕适配 Android全面的屏幕适配方案解析(三)__sw限定符适配方案 Android全面的屏幕适配方案解析(四)__今日头条适配方案
SoullessCoder
2022/03/23
1.7K0
Android全面的屏幕适配方案解析(四)__今日头条适配方案
Android 屏幕适配之框架(AndroidAutoSize)(今日头条)适配
https://github.com/JessYanCoding/AndroidAutoSize
全栈程序员站长
2022/09/05
1.7K0
Android 屏幕适配之框架(AndroidAutoSize)(今日头条)适配
Android目前最稳定和高效的UI适配方案
Android系统发布十多年以来,关于Android的UI的适配一直是开发环节中最重要的问题,但是我看到还是有很多小伙伴对Android适配方案不了解。刚好,近期准备对糗事百科Android客户端设计一套UI尺寸适配方案,可以和小伙伴们详细的聊一聊这个问题。
用户1269200
2018/11/22
1.9K0
一种非常简单的Android屏幕适配方案
作为一个Android开发人员,你还在为了适配各种尺寸的屏幕而苦恼吗?你还在为了出现一个新的机型而修改着数不尽的dimens和layout吗?你还在为了UI给的奇葩尺寸的设计图而绞尽奶汁计算距离吗?如果你为了这些事情而苦恼,那么看完这篇文章,希望可以帮你减少开发时间,减缓生命的流逝速度。。。
Android技术干货分享
2019/03/27
6910
一种非常简单的Android屏幕适配方案
骚年你的屏幕适配方式该升级了!-今日头条适配方案
原文地址: https://www.jianshu.com/p/55e0fca23b4f
用户2965681
2018/09/13
7720
Android开发:最全面、最易懂的Android屏幕适配解决方案
给你带来一种全新、全面而逻辑清晰的Android屏幕适配思路,只要你认真阅读,保证你能解决Android的屏幕适配问题!
Carson.Ho
2019/02/22
3.3K0
如何让一套代码完美适配各种屏幕?
区别于iOS,android设备有不同的分辨率大小以及不同厂商的系统,目前市场的分辨率可以看下相关统计。
CRMEB商城源码
2022/07/19
1.3K0
Android TV开发总结【适配】
Android 的屏幕适配是指适配不同机顶盒 UI 框架层输出的分辨率和 dpi,而不是适配不同分辨率的电视机(电视机的适配交由机顶盒本身完成,和各个应用无关)
先知先觉
2019/01/21
4.3K0
适配完结篇一 - 超快速的Android屏幕适配方式
由于Android碎片化严重,屏幕分辨率千奇百怪,而想要在各种分辨率的设备上显示基本一致的效果,适配成本越来越高。虽然Android官方提供了dp单位来适配,但其在各种奇怪分辨率下表现却不尽如人意,因此下面探索一种简单且低侵入的适配方式。
acc8226
2022/05/17
9540
适配完结篇一 -  超快速的Android屏幕适配方式
Android UI优化全解析
java代码布局、View重用、异步创建View、xml布局优化、异步布局框架Litho、屏幕适配、Flutter、Jetpack Compose
码上积木
2021/01/11
1.2K0
Android UI优化全解析
Android全面的屏幕适配方案解析(一)
自Android系统发布以来,似乎一直绕不开屏幕适配这个话题。毫无疑问,Android系统能发展到今天,离不开其开放性,而随着国内手机厂商的崛起,任何用户、开发者、OEM厂商、运营商都可以对Android进行定制,于是导致长期以来一直诟病的碎片化严重的问题。
SoullessCoder
2022/01/05
1.6K0
Android全面的屏幕适配方案解析(一)
谈谈Android屏幕适配的那些事,我们到底该怎么去选择
每个Android程序员都会遇见一个棘手的问题,那就是手机适配。因为现在出现了许多分辨率的手机,所以我们必须得考虑到各种分辨率的手机适配,这对于程序员来说是一个必须要解决的麻烦。
Android技术干货分享
2019/03/26
1.1K0
谈谈Android屏幕适配的那些事,我们到底该怎么去选择
Android适配全面总结(一)----屏幕适配
版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad4d
AWeiLoveAndroid
2018/09/03
2.6K0
Android适配全面总结(一)----屏幕适配
实用Android 屏幕适配方案分享
真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用中,效果还不错。 说起android开发,UI界面的多机型适配,一向是个很重要
xiangzhihong
2018/01/30
1.3K0
实用Android 屏幕适配方案分享
推荐阅读
相关推荐
AndroidAutoSize开源库屏幕适配分析[通俗易懂]
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验