说来惭愧,这个方案在微信公众号推出来的时候,我才去了解我司自己的适配方案。字节跳动屏幕适配方案

重点

  1. 为什么要做屏幕适配
  2. 从数据上告诉你安卓手机屏幕的碎片化
  3. 我司的适配方案
  4. 适配中出现的问题
  5. 实际演练

为什么要做屏幕适配

在Android开发中,由于Android的碎片化严重,屏幕分辨率千奇百怪,想要在各种分辨率的设备上显示一致的效果,适配成本越来越高。虽然Android官方提供了dp单位来适配,但是在各种奇怪分辨率的手机下表现的不近人意。

Android手机屏幕的碎片化

在大部分场景下我们是不需要关心屏幕适配,因为很多ui不会有太多元素,要不然就是RecyclerView来展示数据,但是也有不少的场景UI会比较复杂,我们需要关心手机适配,接下来,从Google和友盟的数据上看下当前手机屏幕的大小和分辨率

Google数据

可以看到Normal占比是最多的,Normal就是宽度为480dp的手机。而在Normal手机中dpi为320的手机又居多。

small -> 320dp
Normal -> 480dp
Large -> 600dp
XLarge -> 720dp

友盟数据


名次 屏幕分辨率 活跃占比 趋势
1 1920x1080 (16:9) 28.9
2 1280x720 (16:9) 22.5
3 1080x1821 (3:5) 3.9
4 960x540 (16:9) 3.3
5 854x480 (16:9) 2.8
6 720x1208 (9:16) 2.6
7 1184x720 (5:3) 2.4
8 1776x1080 (5:3) 2.1
9 2560x1440 (16:9) 2
10 2016x1080 (17:9) 1.9
11 1794x1080 (5:3) 1.8
12 2040x1080 (17:9) 1.3
13 2160x1080 (18:9) 1.3

从上面的数据可以看到安卓的手机市场,各种比例、分辨率、尺寸的手机层出不穷,如果我们按照Google官方的适配方案,那么我们基本上可以不用做其他需求了,ui改动一个像素点,你可能需要改动十几个layout的布局文件。

字节跳动屏幕适配方案

这节会从基础到新的适配方案,详细看下同事是怎样解决这个世纪难题。

传统dp适配方式

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

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

dpi(pot per inch)就是每英寸的多少个点,dpi是根据屏幕真实的分辨率和尺寸计算的,每个设配可能都不一样。

拿MIX2做个例子,MIX2的尺寸是5.99英寸,分辨率是2160*1080象素。根据上面的公式可以算出MIX2的dpi为402。

这里有个小问题
我们通过代码

val mix2dpi= resources.displayMetrics.densityDpiprintln("mix2 dpi is : $mix2dpi")//打印出 440

为什么和我们计算出来的不一致,难道公式是假的?那肯定不是的,小米手机虽然在手机信息上写的5.99英寸但是这是整个手机屏幕,而不是真正的显示区域,MIX2的真正显示区域是5.5英寸,这样是不是就对应起来了。

这样问题就来了

假设我们的设计小哥哥给的UI设计图是按照屏幕375dp设计的,那么在上述的设备上,屏幕的宽度是1080/(440/160)=392.7dp,也就是要比设计图要款。这种情况下,即时使用dp,也无法达到和设计图相同的效果。同事还存在部分设备宽度不足375dp,那么就会出现超出屏幕的情况出现。

除此之外还有很多设备并没有按照上述的公式来实现,因此dpi的值是非常乱的。用dp进行适配也是差强人意。

字节跳动适配方案

先了解几个知识点

  • dp和px的转换公式为:px = dp * density
  • dp转换的场景都是通过DisplayMetrics来进行计算的
  • DisplayMetrics#density 就是上述的density
  • DisplayMetrics#densityDpi 就是上述的dpi
  • DisPlayMetrics#scaledDensity 字体的缩放因子,正常情况下和density相等,但是调节系统字体大小后会改变这个值

那么应用中所有dp的计算都是更DisplayMetrics这个类有关,所以只用针对这个类进行操作就好了。

我们可以将DisPlayMetrics理解为三个部分

  1. System,初始分配,包含第三方库。
  2. Application,整个应用的DisplayMetrics
  3. Activity,单个Activity页面的DisplayMetrics
        //系统的屏幕尺寸        val systemDM = Resources.getSystem().displayMetrics        //app整体的屏幕尺寸        val appDM = activity.application.resources.displayMetrics        //activity的屏幕尺寸        val activityDM = activity.resources.displayMetrics

我们这里以宽度为375dp的宽度为基准去适配,这个值你可以改为任何值。

        // 适配屏幕的宽度        activityDM.density = activityDM.widthPixels / tartgetDP.toFloat()        // 适配相应比例的字体大小        activityDM.scaledDensity = activityDM.density * (systemDM.scaledDensity / systemDM.density)        // 适配dpi        activityDM.densityDpi = (160 * activityDM.density).toInt()

看下整个适配的工具类,特别简单

object ScreenUtil {    fun adapterScreen(activity: Activity, targetDP: Int, isVertical: Boolean) {        //系统的屏幕尺寸        val systemDM = Resources.getSystem().displayMetrics        //app整体的屏幕尺寸        val appDM = activity.application.resources.displayMetrics        //activity的屏幕尺寸        val activityDM = activity.resources.displayMetrics        if (isVertical) {            // 适配屏幕的高度            activityDM.density = activityDM.heightPixels / targetDP.toFloat()        } else {            // 适配屏幕的宽度            activityDM.density = activityDM.widthPixels / targetDP.toFloat()        }        // 适配相应比例的字体大小        activityDM.scaledDensity = activityDM.density * (systemDM.scaledDensity / systemDM.density)        // 适配dpi        activityDM.densityDpi = (160 * activityDM.density).toInt()    }    fun resetScreen(activity: Activity) {        //系统的屏幕尺寸        val systemDM = Resources.getSystem().displayMetrics        //app整体的屏幕尺寸        val appDM = activity.application.resources.displayMetrics        //activity的屏幕尺寸        val activityDM = activity.resources.displayMetrics        activityDM.density = systemDM.density        activityDM.scaledDensity = systemDM.scaledDensity        activityDM.densityDpi = systemDM.densityDpi        appDM.density = systemDM.density        appDM.scaledDensity = systemDM.scaledDensity        appDM.densityDpi = systemDM.densityDpi    }}

使用中出现的问题

使用时需要注意以下几点:

  1. 尽量只在当前页面生效,包括activity,fragment,dialog,view,需要在setCOntentView()或者inflate之前调用这个方法,在结束onDestroy,onDismiss,onDetachWindow()的时候调用resetScreen()方法。
  2. 在页面中需要弹出toastdialog的时候需要调用resetScreen,不然toastdialog的页面大小和字体大小会被影响。
  3. 记住一点使用前调用adapterScreen,时候后调用resetScreen

实际操作

工欲善其事必先利其器

我们要使用这种方式,首先要把Android Studio的xml预览界面调节成设计师给的设计图的屏幕尺寸。这里已经向抖音的设计师确认,给我们的所有设计图都是按照750*1334象素 -> 375*667dp的规格设计。也就是说density=2,对应dpi=160*2=320,对应的手机屏幕大小为4.8英寸

在预览界面怎么创建相应的界面呢?

tools -> AVD Manager -> Create Virtual Device… -> New Hardware Profile -> screen sieze: 4.8 Resolution: 750 x 1334

什么?还不会,那我只能把所有的图都贴出来了。


现在准备完成了,可以开始开发了

比对效果

未使用前,为了适配小屏手机,在大屏手机上看就会很丑

使用后,两个页面基本相同了

更多相关文章

  1. Android中常见的热门标签的流式布局的实现
  2. ANDROID 如何适配屏幕
  3. Android亮屏和熄屏控制
  4. Android屏幕密度(Density)和分辨率概念详解
  5. 聊聊android界面适配
  6. Android(安卓)三种UI适配方案 dp px 修改dpi
  7. Android(安卓)组件宽度高度自适应
  8. 【幻灯片分享】Android在多屏幕、多设备上的适配 | 布丁 任斐 |
  9. Android显示概述

随机推荐

  1. Android(安卓)更新UI的两种方法——handl
  2. Android(安卓)给控件添加边框阴影效果
  3. Android(安卓)onSaveInstanceState()和on
  4. 在android 输出log 信息 用于调试
  5. Eclipse混淆文件导入Android(安卓)Studio
  6. Android(安卓)AMS源码分析之结合AIDL分析
  7. Android(安卓)studio 使用com.android.su
  8. Android入门三之目录结构2
  9. android 连接服务器的方法及安全性问题
  10. android获取系统时间