一、什么是SmallestWidth适配
SmallestWidth
适配也叫做限定符屏幕适配方案,SmallestWidth
翻译成中文就说是最小宽度,也就是根据最小宽度去适配;
开发者为了做好适配会在工程中新建一系列 values-sw<N>dp
文件夹。values-sw<N>dp
文件夹有对应的dimens.xml
,dimens.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 为你设计稿的尺寸是必填项。