一款可以一键实现屏幕适配的插件

一、什么是SmallestWidth适配

SmallestWidth适配也叫做限定符屏幕适配方案SmallestWidth 翻译成中文就说是最小宽度,也就是根据最小宽度去适配;
开发者为了做好适配会在工程中新建一系列 values-sw<N>dp 文件夹。values-sw<N>dp 文件夹有对应的dimens.xmldimens.xml中就是对应的dp值。开发者只要按照设计稿给出的宽高,在xml设置同样数值的sw_<n>dp即可。如:设计稿控件宽高是100*100px,我们在项目中的xml中只有使用sw_100dp*sw_100dp就行。
如下图:
在这里插入图片描述
在这里插入图片描述
系统会根据当前设备屏幕的 smallestWidth的值(N)去找对应的 values-sw<N>dp 文件夹,如果没有值为N的则会去找与N相近的 values-sw<X>dp 文件夹,即X<=N。
比如当前屏幕 smallestWidth的值是360dp,系统就会优先去找values-sw360dp 这个文件夹,如果没有values-sw360dp 文件夹就会找values-sw340dp 这个文件夹。

二、怎么计算SmallestWidth的值

先看三个公式

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

SmallestWidth的单位是dp,所以SmallestWidth(dp) = px / (dpi / 160) ;如下图中的Pixel XL 的SmallestWidth约等于411dp;而头条的适配方案是动态改变density的值。头条屏幕适配方案
在这里插入图片描述
当app运行在该设备时,会优先寻找是否有values-sw411dp 这个文件夹,有的话就会使用该文件夹下的dimens.xml。没有就会找与之相近的文件夹。

三、怎么确定dimens.xml文件内的值

每个values-sw<N>dp文件夹下 dimens.xml内的值是不一样的(这是废话,一样的话适配不就没效果了么);
比如现在你又个设备是1080x1920,dpi是320,根据公式可以算出N= 1080/(320/160) = 540dp(density = 320/160 = 2)。所以系统会自动匹配values-sw540dp文件下的dimens.xml的尺寸。那么该文件dimens.xml下的值都是怎么算出来的呢?
假如现在设计给你的设计稿是1080x1920px,设稿的最小宽度是1080px。那么dimens.xml下的值 sw_1dp = 540/1080 = 1/2 = 0.5dp = 1px。
为什么是540/1080或者1/density呢?
因为只要按照设计稿给出的宽高,在xml设置同样数值的sw_<n>dp就行,如:设计稿中又个控件宽高是1080*100px(宽度是整个屏幕的宽度),那么我们使用sw时就是1080sw_dp*100sw_dp。而此时屏幕最小宽度是sw540dp,也就是sw_1080dp = 1080px = 540dp。那么sw_1dp = 1px = 0.5dp。所以dimens.xml内的值就是values-sw<N>dp中(N)的值除以你的设计搞的最小尺寸M,即 N / M = 1/density (N=1080/density, M=1080 )。

如果你设备的屏幕最小宽度是sw320dp,设计稿是360px。那么320dp将要被分成360份。所以sw320dp文件夹下它dimens.xml的值则如下:

  <dimen name="sw_0dp">0.0dp</dimen>
  <dimen name="sw_1dp">0.889dp</dimen>
  <dimen name="sw_2dp">1.778dp</dimen>
  <dimen name="sw_3dp">2.667dp</dimen>
  <dimen name="sw_4dp">3.556dp</dimen>
  <dimen name="sw_5dp">4.445dp</dimen>
  ...
  <dimen name="sw_317dp">281.813dp</dimen>
  <dimen name="sw_318dp">282.702dp</dimen>
  <dimen name="sw_319dp">283.591dp</dimen>
  <dimen name="sw_320dp">284.48dp</dimen>

最后值的计算就是:values-sw<N>dp的值(N)除以你的设计搞的尺寸M,即 N / M
如375px的设计稿如图:
在这里插入图片描述

四、一键生成values-sw<N>dp文件夹插件

插件名:SmallestWidth Dimens,可在AS插件中搜索安装
在这里插入图片描述
安装插件后,可使用快捷键ALT+P或者在Tools|SmallestWidth 启动插件
在这里插入图片描述
插件启动后可自主选择要在那个moudel下生成values-sw<N>dp文件夹,默认有一些文件夹,你也可以通过Add smallestWidth添加需要的尺寸。Design Width 为你设计稿的尺寸是必填项。
在这里插入图片描述

插件github地址

发布了27 篇原创文章 · 获赞 187 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/Mr_wzc/article/details/89578746