安卓自动缩放布局，解决屏幕适配问题

蔚落 2022-07-26 12:15 344阅读 0赞

做过安卓开发的都知道，屏幕适配是一件非常困难的事情。  
Google官方的解决方案：[screens\_support][screens_support] 需要写多个layout文件以及dimens.xml，工作量大不说，维护也麻烦。  
  
其实很多时候我们的需求很简单，就是要求不同的屏幕看上去效果一样就可以了。这样就需要我们布局的时候采用百分比来定位。  
说到百分比，我们第一时间想到的是layout\_weight，但是layout\_weight实际使用效果并不是很好，特别是一些复杂情况下需要层层嵌套。也无法解决所有问题，比如文字大小。  
  
我想到的解决方案是根据屏幕大小重新对布局以及布局内部对象的大小进行调整。之前做过的一些项目里面的自定义view也用过这种方法。  
我在网上也搜到了一些相关资料，比如 [Vanteon Electronic Design ][Vanteon Electronic Design]。说明这种方法是可行的。剩下的问题就是怎么把这种方式封装成一个通用的解决方案，能以最简便的方式融入到开发中来。  
  
经过一番实验，我初步开发出来了AutoScalingLayout  
源码：[https://github.com/Junhua102/AutoScalingLayout][https_github.com_Junhua102_AutoScalingLayout]

**实现原理：**

原理类似我们用播放器看视频的时候，无论怎么调整窗口大小，播放器都可以自动调整视频大小适合窗口大小。因为视频有一个原始分辨率，播放器会根据窗口实际大小对视频进行缩放。

我们写布局的时候一般是根据某个基准分辨率来（比如UI给的原型图），自动缩放布局的作用就是将这个基准布局乘以一个缩放比例，达到适配所有分辨率的目的。

计算缩放比例公式： 实际大小 / 设计大小 = 缩放比例  
只需要给定一个设计大小，就可以计算出缩放比例，然后将布局内部所有元素的尺寸都乘以这个缩放比例，就可以适配实际屏幕了。

使用方法：  
studio用户使用release/AutoScalingLayout.aar  
eclipse用户使用release/AutoScalingLayout.jar，并将attr.xml复制到value目录

替换布局:

只需要替换需要缩放的根布局即可，内部子布局会自动缩放

<table style="font-family:Arial; font-size:14px; line-height:26px; color:rgb(51,51,51)"> 
 <tbody> 
  <tr> 
   <th><span style="font-size:14px">原布局</span></th> 
   <th><span style="font-size:14px">自动缩放布局</span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td><span style="font-size:14px">RelativeLayout&nbsp;</span></td> 
   <td><span style="font-size:14px">ASRelativeLayout</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">LinearLayout&nbsp;</span></td> 
   <td><span style="font-size:14px">ASLinearLayout</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">FrameLayout&nbsp;</span></td> 
   <td><span style="font-size:14px">ASFrameLayout</span></td> 
  </tr> 
 </tbody> 
</table>

目前只支持以上3种布局  
  
添加属性:

**\[html\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  xmlns:custom="http://schemas.android.com/apk/res-auto"
2.  custom:designWidth="384dp"
3.  custom:designHeight="575dp"

designWidth和designHeight就是你在可视化编辑xml时使用的屏幕大小。比如我使用的是Nexus 4，屏幕尺换算成dp就是384dp和575dp（减去状态栏和操作栏）

**注意事项**：

1.designWidth和designHeight非常重要，千万不要填错，否则缩放出来就不是你想要的效果了。  
2.如果designWidth和designHeight的单位是dp，那么所有内部子view的单位都必须是dp，不能写px、pt等其他单位。文字大小也不能用sp。如果你想无脑照抄UI给出的像素值，就全部单位用px就可以了。

3.AutoScalingLayout缩放时会保持deginWidth和designHeight的纵横比，不用担心正方形变矩形。

以sample中的 activity\_login\_dp.xml 为例

**\[html\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****me.dreamheart.autoscalinglayout.ASRelativeLayout**
2.  xmlns:android="http://schemas.android.com/apk/res/android"
3.  xmlns:tools="http://schemas.android.com/tools"
4.  xmlns:custom="http://schemas.android.com/apk/res-auto"
5.  custom:designWidth="384dp"
6.  custom:designHeight="575dp"
7.  custom:autoScaleEnable="true"
8.  android:layout\_width="match\_parent"
9.  android:layout\_height="match\_parent"
10. android:orientation="vertical"
11. tools:context=".LoginActivity"
12. android:background="@drawable/login\_bg"
13. **>**
14. 
15. **<****TextView**
16. android:layout\_width="wrap\_content"
17. android:layout\_height="wrap\_content"
18. android:layout\_marginTop="60dp"
19. android:text="Title"
20. android:textSize="30dp"
21. android:textColor="\#fff"
22. android:layout\_centerHorizontal="true"
23. **/>**
24. 
25. **<****View**android:id="@+id/login\_input\_form"
26. android:layout\_width="270dp"
27. android:layout\_height="100dp"
28. android:layout\_marginTop="125dp"
29. android:layout\_centerHorizontal="true"
30. android:background="@drawable/login\_input\_form"
31. **/>**
32. 
33. **<****TextView**android:id="@+id/user\_name\_tv"
34. android:layout\_width="wrap\_content"
35. android:layout\_height="wrap\_content"
36. android:layout\_marginTop="140dp"
37. android:layout\_marginLeft="16dp"
38. android:layout\_alignLeft="@+id/login\_input\_form"
39. android:text="@string/user\_name"
40. android:textSize="15dp"
41. android:textColor="\#666"
42. **/>**
43. 
44. **<****TextView**android:id="@+id/password\_tv"
45. android:layout\_width="wrap\_content"
46. android:layout\_height="wrap\_content"
47. android:layout\_marginTop="190dp"
48. android:layout\_alignLeft="@+id/user\_name\_tv"
49. android:text="@string/password"
50. android:textSize="15dp"
51. android:textColor="\#666"
52. **/>**
53. 
54. **<****EditText**android:id="@+id/user\_name"
55. android:layout\_toRightOf="@+id/user\_name\_tv"
56. android:layout\_marginLeft="10dp"
57. android:layout\_alignBaseline="@+id/user\_name\_tv"
58. android:layout\_height="wrap\_content"
59. android:layout\_width="190dp"
60. android:textSize="15dp"
61. android:textColor="\#444"
62. android:hint="@string/prompt\_name"
63. android:inputType="text"
64. android:maxLines="1"
65. android:singleLine="true"**/>**
66. 
67. **<****EditText**android:id="@+id/password"
68. android:layout\_toRightOf="@+id/user\_name\_tv"
69. android:layout\_marginLeft="10dp"
70. android:layout\_alignBaseline="@+id/password\_tv"
71. android:layout\_height="wrap\_content"
72. android:layout\_width="190dp"
73. android:textSize="15dp"
74. android:textColor="\#444"
75. android:hint="@string/prompt\_password"
76. android:inputType="textPassword"
77. android:maxLines="1"android:singleLine="true"**/>**
78. 
79. **<****Button**android:id="@+id/email\_sign\_in\_button"
80. android:background="@drawable/login\_btn\_selector"
81. android:layout\_marginTop="260dp"
82. android:layout\_centerHorizontal="true"
83. android:layout\_width="270dp"
84. android:layout\_height="40dp"
85. android:text="@string/action\_sign\_in"
86. android:textSize="20dp"
87. android:textColor="\#444"
88. android:textStyle="bold"**/>**
89. 
90. **</****me.dreamheart.autoscalinglayout.ASRelativeLayout****>**

未使用AutoScalingLayout

![Center][]

使用AutoScalingLayout

![Center 1][]

[screens_support]: http://developer.android.com/guide/practices/screens_support.html
[Vanteon Electronic Design]: http://www.vanteon.com/downloads/Scaling_Android_Apps_White_Paper.pdf
[https_github.com_Junhua102_AutoScalingLayout]: https://github.com/Junhua102/AutoScalingLayout
[view plain]: http://blog.csdn.net/ljh102/article/details/45536293#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/660372
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/660372/fork
[Center]: /images/20220724/cffb5c6b3f0945b581a6498d6283c063.png
[Center 1]: /images/20220724/5a4ac6685a314b659d6cc8649f914d93.png