Performance optimization of the program screen adaptation (g)

Ali P7 mobile Internet architect, Advanced Video (Daily update) for free learning, please click: https://space.bilibili.com/474380680

This article will recommend a very useful Android screen adaptation:

Update: As more and more people use the adaptation program, there are a lot of people do not understand the problems encountered. So in order to make better use of everyone, I will update the article a lot of content, the old user can re-look the entire article. The main use of the updated content is something different, and does not change before the minimum width of the reference value, the value calculated according to the layout setting UI in FIG. Now change the minimum width of the reference value is consistent with the design, and then design icon Note how much to write how much dp dp, very convenient. Also finishing the comments section compares people asked questions for unified answer.

Foreword

Online article on the screen adaptation has been overwhelming, and why should I say? Because the Internet is now basically use screen resolution qualifier adaptation that each screen resolution of the device needs to define a set of dimens.xml file. Because so many different resolutions of equipment, but some equipment as well as virtual keys (such as Huawei cell phone), so that each device Cadogan also need to have a set of virtual keys dimens.xml files, plus the flat that you will found that the volume dimens.xml file share has exceeded the 2M! This is absolutely not what we want.

I want to say here is to use sw <N> dp qualifier that smallestWidth (minimum width) qualifier to be adapted, using this method requires only a small amount dimens.xml file can be achieved by adaptation, but there is no need to consider virtual button issues. If only the phone adapter, volume dimens.xml file occupies only 100 KB, and even with flat TV, also more than 500 KB, fully reception. This approach has been applied in their many projects before, after dozens of mobile phones tested, adapted with the basic problem will not happen. Production generate the corresponding author of the paper dimens.xml plugin (later speak) also said that he had two big companies to be practiced, so ease of use.

Why the screen adaptation?

Why should fit on the screen, what is dp, dpi these concepts I will not get them to explain the many online articles. Here I recommend a few speak better:

Screen resolution qualifier and qualifier smallestWidth adaptation principle

Screen resolution qualifier adaptation principle

Adapted to create screen resolution qualifier screen resolutions corresponding values-xxx folder res folder, as shown below:

 
5382223-eec94bc1a2aa34dc.png
image

Then according to a reference resolution, the reference example, a resolution of 1280x720, the width is divided into 720 parts, the value of 1px ~ 720px, the height of the divided parts 1280, value of 1px ~ 1280px, corresponding to the various resolutions generated dimens.xml file. Below the resolution 1280x720 and 1920x1080 respectively corresponding lateral dimens.xml file:

 
5382223-117263d0f3c62d79.png
image

假设设计图上的一个控件的宽度为 720px,那么布局中就写 android:layout_width="@dimen/x720" ,当运行程序的时候,系统会根据设备的分辨率去寻找对应的 dimens.xml 文件。例如运行在分辨率为 1280x720 的设备上,系统会自动找到对应的 values-1280x720 文件夹下的 lay_x.xml 文件,由上图可知 x720 对应的值为
720.px,可铺满该屏幕宽度。运行在分辨率为 1920x1080 的设备上,系统会自动找到对应的 values-1920x1080 文件夹下的 lay_x.xml 文件,由上图可知 x720 对应的值为 1080.0px,可铺满该屏幕宽度。这样就达到了屏幕适配的要求!

smallestWidth 限定符 适配原理

smallestWidth 限定符适配原理与屏幕分辨率限定符适配原理一样,系统都是根据限定符去寻找对应的 dimens.xml 文件。例如程序运行在最小宽度为 360dp 的设备上,系统会自动找到对应的 values-sw360dp 文件夹下的 dimens.xml 文件。区别就在于屏幕分辨率限定符适配是拿 px 值等比例缩放,而 smallestWidth 限定符适配是拿 dp 值来等比缩放而已。需要注意的是“最小宽度”是不区分方向的,即无论是宽度还是高度,哪一边小就认为哪一边是“最小宽度”。如下分别为最小宽度为 360dp 与最小宽度为 640dp 所对应的 dimens.xml 文件:

 
5382223-f1e46356e8ceb6dc.png
image
  • 获取设备最小宽度代码为:
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int heightPixels = ScreenUtils.getScreenHeight(this);
        int widthPixels = ScreenUtils.getScreenWidth(this);
        float density = dm.density;
        float heightDP = heightPixels / density;
        float widthDP = widthPixels / density;
        float smallestWidthDP;
        if(widthDP < heightDP) {
            smallestWidthDP = widthDP;
        }else {
            smallestWidthDP = heightDP;
        }

ScreenUtils——>ScreenUtils

为什么选择 smallestWidth 限定符适配?

既然原理都一样,都需要多套 dimens.xml 文件,那为什么要选择 smallestWidth 限定符适配呢?

  1. 屏幕分辨率限定符适配是根据屏幕分辨率的,Android 设备分辨率一大堆,而且还要考虑虚拟键盘,这样就需要大量的 dimens.xml 文件。因为无论手机屏幕的像素多少,密度多少,90% 的手机的最小宽度都为 360dp,所以采用 smallestWidth 限定符适配只需要少量 dimens.xml 文件即可。
  2. 屏幕分辨率限定符适配采用的是 px 单位,而 smallestWidth 限定符适配采用的单位是 dp 和 sp,dp 和 sp 是google 推荐使用的计量单位。又由于很多应用要求字体大小随系统改变,所以字体单位使用 sp 也更灵活。
  3. 屏幕分辨率限定符适配需要设备分辨率与 values-xx 文件夹完全匹配才能达到适配,而 smallestWidth 限定符适配寻找 dimens.xml 文件的原理是从大往小找,例如设备的最小宽度为 360dp,就会先去找 values-360dp,发现没有则会向下找 values-320dp,如果还是没有才找默认的 values 下的 demens.xml 文件,所以即使没有完全匹配也能达到不错的适配效果。

使用步骤

1、以设计图最小宽度(单位为 dp)作为基准值,生成所有设备对应的 dimens.xml 文件

这些文件当然不会手动去写,网上已经有大神提供了自动生成这些文件的插件 ScreenMatch。但是这个插件还是有点问题的:

  • 默认没有适配最小宽度为 320dp 的设备。其实自己测试还是有很多设备最小宽度是 320dp 的,所以需要加上。
  • 最小宽度为 392.7272 与 411.4285 的手机不能达到完全适配。原因是该插件的默认值都是取整的,即 392.7272 与 411.4285 在插件中写的是 392 与 411。

基于以上问题,我在该插件的源码上优化生成了新的插件 ScreenMatch,由于插件库已经有原作者的插件了,所以我就不重复造轮子上传到插件库了,你直接用本地安装的方式安装即可。

工具使用步骤:

  1. 在 Android Studio 中安装 ScreenMatch 插件
    下载插件 ScreenMatch 到本地,点击菜单栏上的 File -> Settings -> Plugins -> Install plugin from disk,然后选择我们刚刚下载的插件,最后点击 “OK”,重启 Andorid Studio 即可。如下图所示:
 
5382223-251f7d372f5ff80d.png
image
  1. 在项目的默认 values 文件夹中需要一份 dimens.xml 文件
    我在 github 源码已经提供了一份,直接复制过来即可。
 
5382223-26da3eb3f32fffbc.png
image
  1. 执行生成
    插件安装好后,在项目的任意目录或文件上右键,选择 ScreenMatch 选项。如下图:
 
5382223-6ad9ee0eb0238886.png
image

然后选择在哪个 module 下执行适配。即基于哪个 module 下的 res/values/dimens.xml 文件作为基准 dimens.xml 文件,生成的其他尺寸 dimens.xml 文件放在哪个 module 下。例如选择 app,然后点击 OK ,出现如下界面表示生成文件成功。如下图:

 
5382223-06d064480c7bbd75.png
image

然后再看看 res 目录下会自动生成一堆 dimens.xml 文件,如下图:

 
5382223-29986645ad1009fb.png
image

通过上面的步骤就已经生成了所有设备对应的 dimens.xml 文件。

  1. 根据设计图填写最小宽度基准值,并填写需要适配的设备最小宽度 dp 值

步骤 3 是以插件默认的最小宽度基准值为 360dp,适配的设备最小宽度为
320,360,384,392.7272,400,410,411.4285,432,480,533,592,600,640,662,720,768,800,811,820,960,961,1024,1280,1365(包含了平板和 TV )生成的文件,但实际情况要根据设计图和需求设置。

例如设计图的最小宽度为 375dp,则需要更改最小宽度基准值为 375dp。如果项目只需要适配手机的话,适配的设备最小宽度保留 320,360,384,392.7272,400,410,411.4285,432,480 即可,若发现手机还有其他最小宽度自行加上即可,也麻烦把该最小宽度提供给我,我们一起来完善该份适配。

以上修改需要在配置文件里修改,即 screenMatch.properties 文件,该配置文件是执行完上面第 3 步后自动生成在项目的跟目录下的。如下图:

 
5382223-d40fc5ec1ba49959.png
image

打开配置文件,修改下图中 1、3、4 的值即可。(图中单位均为 dp)
1:最小宽度基准值,填写设计图的最小宽度值即可。
2:插件默认适配的最小宽度值,即默认情况下会生成如下值的 dimens.xml 文件。
3:需要适配的最小宽度值(如果是小数,则保留4位小数。例如 392.727272...,则取 392.7272),即你想生成哪些 dimens.xml 文件。
4:忽略不需要适配的最小宽度值,即忽略掉插件默认生成的 dimens.xml 文件。

 
5382223-4a2b88dd2101c46e.png
image

配置文件修改完成后,重新执行第 3 步,生成新的 dimens.xml 文件。

当然!如果你的设计图也是标准的 360dp,那么上面的步骤你可以忽略。直接复制我 github 上你需要的 dimens.xml 文件到你的项目即可,默认的 values 文件夹下也需要一份

2、根据设计图标注,在布局写上对应的值。

设计图标注多少 dp,布局中就写多少 dp ,非常方便!

  • 大多数 UI 设计师提供设计图有如下几种方式:
    上传到蓝湖:显示多少 dp 就写多少 dp。
    psd 源文件:用像素大厨查看,显示多少 dp 就写多少 dp(注意像素大厨需要选择与设计图对应的dpi 进行显示)
    dp 单位的设计图:标注多少 dp 就写多少 dp。
    px 单位的设计图:叫 UI 设计师标注为 dp 单位或跟她要 psd 源文件,如果都不行,那自己算吧!

  • 举例:例如设计图上一个Button 的宽为 360dp,高为 50dp,字体大小为 15 sp,在布局中则这样使用:

    <Button
        android:layout_width="@dimen/dp_360"
        android:layout_height="@dimen/dp_50"
        android:textSize="@dimen/sp_15"/>

  • 代码中动态设置 dp 或 sp:
    如果需要在代码中动态设置 dp 或 sp,则需要通过 getDimension()方法获取对应资源文件下的 dp 或 sp 值再设置(具体参考 github 上的 demo)。如下:
        /*获取sp值*/
        float pxValue = getResources().getDimension(R.dimen.sp_15);//获取对应资源文件下的sp值
        int spValue = ConvertUtils.px2sp(this, pxValue);//将px值转换成sp值
        mTvShowParams.setTextSize(spValue);//设置文字大小

        /*获取dp值*/
        float pxValue2 = getResources().getDimension(R.dimen.dp_360);//获取对应资源文件下的dp值
        int dpValue = ConvertUtils.px2dp(this, pxValue2);//将px值转换成dp值

使用步骤总结

说了这么多,其实只需要简单的 2 步:

  1. 以设计图最小宽度(单位为 dp)作为基准值,利用插件生成所有设备对应的 dimens.xml 文件
  2. 根据设计图标注,标注多少 dp,布局中就写多少dp,格式为@dimen/dp_XX。

怎么适配其他 module?

  • 问题:在项目的其他 module 中怎么实现适配?难道也要多套 dimens 文件?
  • 解决:并不需要多套 dimens 文件,只需要在 values 文件夹下有一套与 app module 一样的 dimens 文件即可达到适配。因为经过编译,所有 module 中的 dimen 数据都会统一归类到主 module(即 app module)中的 values/dimens.xml 文件中了,然后系统又会根据你设置的值去找对应 values-swxxxdp 文件夹下的dimens.xml 文件中的值。
  • 验证:将我 github 上的 demo 分别运行在不同 widthDP 的设备上(用模拟器即可),然后观察显示的效果会发现确实是这样的。

常见问题汇总

为什么宽度适配了,高度有时候没有完全适配?

因为各种屏幕高宽比并不是固定的,有16:9、4:3,还有全面屏的19.5:9等等,如果强行将宽高都适配那只会导致布局变形。

例如一个控件的宽高为360dp和640dp,如果将它显示在宽高为360dp和640dp的设备上是正常铺满整个屏幕的,但是显示在宽高为360dp和780dp的设备上高度则不能铺满,如果你让高度铺满,而宽度又保持不变,那就会出现变形的情况。所以这也就是为什么目前市面上的屏幕适配方案只能以宽或高一个维度去适配,另一个方向用滑动或权重的方式去适配的原因。

那你为什么说高度也能适配呢?
这里说的高度也能适配指的是在不同分辨率和密度的手机上能达到等比缩放的适配,其他屏幕适配方案也是一样的。

如何同时适配横竖屏?

  • Not recommended program :( a)
    calculate dp device width and height values, and then generate a corresponding width and height dimens.xml file. S is then removed on all the values-swXXXdp directory, i.e. to values-wXXXdp. Such equipment can be found regardless of the screen anyway dimens.xml file in the corresponding values-wXXXdp a directory. Although it can reach a certain level of adaptation, but it will increase a lot dimens.xml files, and use the vertical screen design displayed effect is not good enough.

  • Option II :( recommended)
    because the horizontal screen width and height changed so much, when you want horizontal screen can be completely fit, it will only allow designers to design a set of horizontal screen, and then write a separate horizontal screen the layout file.

Note: smallestWidth qualifier adaptation effect can be achieved with the design of geometric scaling adapter so that different resolution and density devices, and can not achieve good results if the adapter device design that much difference, requires a separate drawing, another screen adaptation scheme is the same.

How to fit a tablet, TV?

With horizontal screen for the same reason, the wide gap between the high tablet, TV and mobile phone too much, you want a tablet, TV can be completely fit, it will only make a set designer tablet, TV's design, then write a separate flat-panel sets, TV layout file.

Note: Again, smallestWidth qualifier adaptation effect can be achieved with the design of geometric scaling adapter so that different resolution and density devices, if the device is too large and the design difference does not achieve a good fit ligand effect, a separate showing other screen adaptation scheme is the same.

Author: wildma
description link: https://www.jianshu.com/p/1302ad5a4b04
Ali P7 mobile Internet architect, Advanced Video (Daily update) for free learning, please click: https://space.bilibili.com/474380680

Guess you like

Origin www.cnblogs.com/Android-Alvin/p/11958972.html