Android 屏幕适配方案

发布于: 2021 年 11 月 07 日

如下图：

然后我们根据一个基准，为基准的意思就是：

比如 480*320 的分辨率为基准

宽度为 320，将任何分辨率的宽度分为 320 份，取值为 x1-x320
高度为 480，将任何分辨率的高度分为 480 份，取值为 y1-y480

例如对于 800*480 的宽度 480：

可以看到 x1 = 480 / 基准 = 480 / 320 = 1.5 ;

其他分辨率类似~~?

你可能会问，这么多文件，难道我们要手算，然后自己编写？不要怕，下文会说。

那么，你可能有个疑问，这么写有什么好处呢？

假设我现在需要在屏幕中心有个按钮，宽度和高度为我们屏幕宽度的 1/2，我可以怎么编写布局文件呢？

<Button

android:layout_gravity="center"

android:gravity="center"

android:text="@string/hello_world"

android:layout_width="@dimen/x160"

android:layout_height="@dimen/x160"/>

</FrameLayout>

</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

可以看到我们的宽度和高度定义为 x160，其实就是宽度的 50%；?

那么效果图：

可以看到不论在什么分辨率的机型，我们的按钮的宽和高始终是屏幕宽度的一半。

对于设计图

假设现在的 UI 的设计图是按照 480*320 设计的，且上面的宽和高的标识都是 px 的值，你可以直接将 px 转化为 x[1-320]，y[1-480]，这样写出的布局基本就可以全分辨率适配了。

你可能会问：设计师设计图的分辨率不固定怎么办？下文会说~

对于上文提出的几个 dp 做不到的

你可以通过在引入百分比后，自己试试~~

好了，有个最主要的问题，我们没有说，就是分辨率这么多，尼玛难道我们要自己计算，然后手写？

2、自动生成工具

好了，其实这样的文件夹手写也可以，按照你们需要支持的分辨率，然后编写一套，以后一直使用。

当然了，作为程序员的我们，怎么能做这么 low 的工作，肯定要程序来实现：

那么实现需要以下步骤：

分析需要的支持的分辨率

对于主流的分辨率我已经集成到了我们的程序中，当然对于特殊的，你可以通过参数指定。关于屏幕分辨率信息，可以通过该网站查询：http://screensiz.es/phone

编写自动生成文件的程序

代码如下

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">import java.io.File;

import java.io.FileNotFoundException;

import java.io.FileOutputStream;

import java.io.PrintWriter;

/**

* Created by zhy on 15/5/3.

*/

public class GenerateValueFiles {

private int baseW;

private int baseH;

private String dirStr = "./res";

private final static String WTemplate = "<dimen name=\"x{0}\">{1}px</dimen>\n";

private final static String HTemplate = "<dimen name=\"y{0}\">{1}px</dimen>\n";

/**

* {0}-HEIGHT

*/

private final static String VALUE_TEMPLATE = "values-{0}x{1}";

private static final String SUPPORT_DIMESION = "320,480;480,800;480,854;540,960;600,1024;720,1184;720,1196;720,1280;768,1024;800,1280;1080,1812;1080,1920;1440,2560;";

private String supportStr = SUPPORT_DIMESION;

public GenerateValueFiles(int baseX, int baseY, String supportStr) {

this.baseW = baseX;

this.baseH = baseY;

if (!this.supportStr.contains(baseX + "," + baseY)) {

this.supportStr += baseX + "," + baseY + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizin

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

复制代码

g: border-box;">";";

}

this.supportStr += validateInput(supportStr);

System.out.println(supportStr);

File dir = new File(dirStr);

if (!dir.exists()) {

dir.mkdir();

}

System.out.println(dir.getAbsoluteFile());

}

/**

* @param supportStr

* w,h_...w,h;

* @return

*/

private String validateInput(String supportStr) {

StringBuffer sb = new StringBuffer();

String[] vals = supportStr.split("_");

int w = -1;

int h = -1;

String[] wh;

for (String val : vals) {

try {

if (val == null || val.trim().length() == 0)

continue;

wh = val.split(",");

w = Integer.parseInt(wh[0]);

h = Integer.parseInt(wh[1]);

} catch (Exception e) {

System.out.println("skip invalidate params : w,h = " + val);

continue;

}

sb.append(w + "," + h + ";");

}

return sb.toString();

}

String[] vals = supportStr.split(";");

for (String val : vals) {

String[] wh = val.split(",");

generateXmlFile(Integer.parseInt(wh[0]), Integer.parseInt(wh[1]));

}

private void generateXmlFile(int w, int h) {

StringBuffer sbForWidth = new StringBuffer();

sbForWidth.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");

sbForWidth.append("<resources>");

float cellw = w * 1.0f / baseW;

System.out.println("width : " + w + "," + baseW + "," + cellw);

for (int i = 1; i < baseW; i++) {

sbForWidth.append(WTemplate.replace("{0}", i + "").replace("{1}",

change(cellw * i) + ""));

}

sbForWidth.append(WTemplate.replace("{0}", baseW + "").replace("{1}",

w + ""));

sbForWidth.append("</resources>");

StringBuffer sbForHeight = new StringBuffer();

sbForHeight.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");

sbForHeight.append("<resources>");

float cellh = h *1.0f/ baseH;

System.out.println("height : "+ h + "," + baseH + "," + cellh);

sbForHeight.append(HTemplate.replace("{0}", i + "").replace("{1}",

change(cellh * i) + ""));

}

sbForHeight.append(HTemplate.replace("{0}", baseH + "").replace("{1}",

h + ""));

sbForHeight.append("</resources>");

File fileDir = new File(dirStr + File.separator

VALUE_TEMPLATE.replace("{0}", h + "")//

.replace("{1}", w + ""));

fileDir.mkdir();

File layxFile = new File(fileDir.getAbsolutePath(), "lay_x.xml");

File layyFile = new File(fileDir.getAbsolutePath(), "lay_y.xml");

try {

PrintWriter pw = new PrintWriter(new FileOutputStream(layxFile));

pw.print(sbForWidth.toString());

pw.close();

pw = new PrintWriter(new FileOutputStream(layyFile));

pw.print(sbForHeight.toString());

pw.close();

} catch (FileNotFoundException e) {

e.printStackTrace();

}

public static float change(float a) {

int temp = (int) (a * 100);

return temp / 100f;

}

public static void main(String[] args) {

int baseW = 320;

int baseH = 400;

String addition = "";

try {

if (args.length >= 3) {

baseW = Integer.parseInt(args[0]);

baseH = Integer.parseInt(args[1]);

addition = args[2];

} else if (args.length >= 2) {

baseW = Integer.parseInt(args[0]);

baseH = Integer.parseInt(args[1]);

addition = args[0];

}

} catch (NumberFormatException e) {

System.err

.println("right input params : java -jar xxx.jar width height w,h_w,h_..._w,h;");

e.printStackTrace();

System.exit(-1);

}

new GenerateValueFiles(baseW, baseH, addition).generate();

}

}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li><li style="box-sizing: border-box; padding: 0px 5px;">136</li><li style="box-sizing: border-box; padding: 0px 5px;">137</li><li style="box-sizing: border-box; padding: 0px 5px;">138</li><li style="box-sizing: border-box; padding: 0px 5px;">139</li><li style="box-sizing: border-box; padding: 0px 5px;">140</li><li style="box-sizing: border-box; padding: 0px 5px;">141</li><li style="box-sizing: border-box; padding: 0px 5px;">142</li><li style="box-sizing: border-box; padding: 0px 5px;">143</li><li style="box-sizing: border-box; padding: 0px 5px;">144</li><li style="box-sizing: border-box; padding: 0px 5px;">145</li><li style="box-sizing: border-box; padding: 0px 5px;">146</li><li style="box-sizing: border-box; padding: 0px 5px;">147</li><li style="box-sizing: border-box; padding: 0px 5px;">148</li><li style="box-sizing: border-box; padding: 0px 5px;">149</li><li style="box-sizing: border-box; padding: 0px 5px;">150</li><li style="box-sizing: border-box; padding: 0px 5px;">151</li><li style="box-sizing: border-box; padding: 0px 5px;">152</li><li style="box-sizing: border-box; padding: 0px 5px;">153</li><li style="box-sizing: border-box; padding: 0px 5px;">154</li><li style="box-sizing: border-box; padding: 0px 5px;">155</li><li style="box-sizing: border-box; padding: 0px 5px;">156</li><li style="box-sizing: border-box; padding: 0px 5px;">157</li><li style="box-sizing: border-box; padding: 0px 5px;">158</li><li style="box-sizing: border-box; padding: 0px 5px;">159</li><li style="box-sizing: border-box; padding: 0px 5px;">160</li><li style="box-sizing: border-box; padding: 0px 5px;">161</li><li style="box-sizing: border-box; padding: 0px 5px;">162</li><li style="box-sizing: border-box; padding: 0px 5px;">163</li><li style="box-sizing: border-box; padding: 0px 5px;">164</li><li style="box-sizing: border-box; padding: 0px 5px;">165</li><li style="box-sizing: border-box; padding: 0px 5px;">166</li></ul>

同时我提供了 jar 包，默认情况下，双击即可生成，使用说明：

下载地址见文末，内置了常用的分辨率，默认基准为 480*320，当然对于特殊需求，通过命令行指定即可：

例如：基准 1280 * 800 ，额外支持尺寸：1152 * 735；4500 * 3200；

按照

java -jar xx.jar width height width,height_width,height

上述格式即可。

到此，我们通过编写一个工具，根据某基准尺寸，生成所有需要适配分辨率的 values 文件，做到了编写布局文件时，可以参考屏幕的分辨率；在 UI 给出的设计图，可以快速的按照其标识的 px 单位进行编写布局。基本解决了适配的问题。

本方案思想已经有公司投入使用，个人认为还是很不错的，如果大家有更好的方案来解决屏幕适配的问题，欢迎留言探讨或者直接贴出好文链接，大家可以将自己的经验进行分享，这样才能壮大我们的队伍~~。

注：本方案思想来自 Android Day Day Up 一群的【blue-深圳】，经其同意编写此文，上述程序也很大程度上借鉴了其分享的源码。在此标识感谢，预祝其创业成功！

发布于: 2021 年 11 月 07 日阅读数: 3

发布

暂无评论

创作场景

Android 屏幕适配方案

2、自动生成工具

评论