Android多分辨率适配框架使用指南

待我称王封你为后i 2022-07-15 07:51 225阅读 0赞

[Android多分辨率适配框架 ( 1 )][Android_ _ 1]  
[Android多分辨率适配框架 ( 2 )][Android_ _ 2]  
[Android多分辨率适配框架 ( 3 )][Android_ _ 3]

--------------------

[自定义View系列教程00–推翻自己和过往，重学自定义View][View_00_View]  
[自定义View系列教程01–常用工具介绍][View_01]  
[自定义View系列教程02–onMeasure源码详尽分析][View_02_onMeasure]  
[自定义View系列教程03–onLayout源码详尽分析][View_03_onLayout]  
[自定义View系列教程04–Draw源码分析及其实践][View_04_Draw]  
[自定义View系列教程05–示例分析][View_05]  
[自定义View系列教程06–详解View的Touch事件处理][View_06_View_Touch]  
[自定义View系列教程07–详解ViewGroup分发Touch事件][View_07_ViewGroup_Touch]  
[自定义View系列教程08–滑动冲突的产生及其处理][View_08]

--------------------

PS：[Android多分辨率适配框架视频教程][Android]同步更新啦

--------------------

在上一篇文章中，我们分析了[Android][Android 1]多分辨率适配框架的原理和代码实现。

在此，结合实例展示该框架的使用。

在展示的过程中，为了对照适配的效果，准备两部测试手机：

华为P7，分辨率为1920\*1080，dpi为480  
HTC T392，分辨率为800\*480，dpi为240

嗯哼，开始吧。

--------------------

## Hello World ##

我们先通过一个简单的示例来了解该框架的基本使用

第一步：编写布局代码

该布局文件比较简单，包括了几个常用的控件比如：Button，TextView以及ImageView，并且使用了padding和margin为控件指定位置和尺寸。

第二步：调用框架实现UI的缩放

在Activity的onCreate( )中找到该界面的根布局，即id为android.R.id.content的View。  
在初始化SupportMultipleScreensUtil后传入rootView，框架就会将该根布局下的所有子View按照比例缩放。

第三步：查看适配的效果

先看该UI在P7上的显示：

![这里写图片描述][20161023135915128]

再看该UI在T392上的显示：

![这里写图片描述][20161023135938926]

嗯哼，看到了吧：View的大小和字体的大小均按照比例进行了缩放，而且图片没有失真

--------------------

## 动态缩放 ##

有时候，我们可能需要利用代码来动态添加一个View，此时又该如何使用SupportMultipleScreensUtil缩放这个新添加的View呢？

请看下面的示例：  
利用代码为LinearLayout动态添加TextView和ImageView

<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;">/**
 * 原创作者：
 * 谷哥的小弟
 *
 * 博客地址：
 * http://blog.csdn.net/lfdfhl
 */
 private void addViewToLinearLayout(){
 mContext=this;
 int match_parent=ViewGroup.LayoutParams.MATCH_PARENT;
 int wrap_content=ViewGroup.LayoutParams.WRAP_CONTENT;
 mLinearLayout = (LinearLayout) findViewById(R.id.linearLayout);
 mLayoutParams=new LinearLayout.LayoutParams(match_parent,wrap_content);
 TextView textView=new TextView(mContext);
 mLayoutParams.width=1000;
 mLayoutParams.height=160;
 textView.setText("女朋友的照片");
 textView.setTextSize(TypedValue.COMPLEX_UNIT_PX,60);
 textView.setTextColor(Color.WHITE);
 textView.setBackgroundColor(Color.BLUE);
 textView.setPadding(10,10,10,10);
 textView.setGravity(Gravity.CENTER);
 mLayoutParams.setMargins(35,35,35,35);
 mLayoutParams.gravity=Gravity.CENTER;
 textView.setLayoutParams(mLayoutParams);
 SupportMultipleScreensUtil.scale(textView);
 mLinearLayout.addView(textView);
 
 
 ImageView imageView=new ImageView(mContext);
 mLayoutParams=new LinearLayout.LayoutParams(match_parent,wrap_content);
 mLayoutParams.width=600;
 mLayoutParams.height=600;
 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
 Drawable drawable=getResources().getDrawable(R.drawable.girl);
 imageView.setImageDrawable(drawable);
 imageView.setLayoutParams(mLayoutParams);
 SupportMultipleScreensUtil.scale(imageView);
 mLinearLayout.addView(imageView);
 }</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></ul><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></ul>

在这段代码中先完成对于View的宽高，颜色，文本等属性的设置，然后调用SupportMultipleScreensUtil.scale()方法缩放该View再添加进LinearLayout即可。

查看适配的效果

先看该UI在P7上的显示：

![这里写图片描述][20161023140032428]

再看该UI在T392上的显示：

![这里写图片描述][20161023140102756]

再次提醒，在此过程中务必使用px作为尺寸单位。

除此以外，有时候还需要利用LayoutInflater生成一个View，对于该View我们同样需要对其进行类似的操作：

> View view=LayoutInflater.from(mContext).inflate();
> 
> SupportMultipleScreensUtil.scale(view);

--------------------

## 综合示例 ##

看了刚才这两个例子，大家可能觉得比较简单，还是不能够领会到利用SupportMultipleScreensUtil实现多分辨率适配的简洁与魅力。好吧，再来看一个熟悉的页面，比如APP的首页，它常常包括一个展示图片的ViewPager、一个包含多个条目的list列表。嗯哼，我们再来瞅瞅它的实现和适配。

第一步：完成UI布局

在该Activity的布局文件中主要包括了：ViewPager，Indicator布局，TextView，以及一个ListView。和之前强调的一样，在布局中使用的尺寸单位均是px，就不再赘述了。  
关于ListView的item的布局亦于此类似，故不再提及。

第二步：实现ListView的Adapter

> LayoutInflater inflater = LayoutInflater.from(context);
> 
> convertView = inflater.inflate(R.layout.item, null);
> 
> SupportMultipleScreensUtil.scale(convertView);

在使用LayoutInflater生成item的View之后，利用SupportMultipleScreensUtil.scale( )对其缩放。

第三步：完成Activity代码的编写

一般而言，指示器Indicator的小圆点个数都是根据ViewPager中图片的个数而动态生成的。所以在这个过程中，务必对每个小圆进行缩放。

先看该UI在P7上的显示：

![这里写图片描述][20161023140141006]

再看该UI在T392上的显示：

![这里写图片描述][20161023140209898]

--------------------

## 总结 ##

通过这几个示例我们可以发现利用SupportMultipleScreensUtil适配多分辨率是完全可行和有效的。在项目中使用该框架可以解放UI设计师的劳力，只需提供一套UI图即可。对于Android工程师而言，则免去了适配的繁琐与痛苦：不用再去写多个dimens文件，不用担心把切图放到了错误的文件夹，不用再看着设计师用px作出的标注去换算在布局中到底该使用多少dp，不用再根据不同的分辨率一套一套地去做适配了。而且，由于只采用了一套切图，所以生成的APK文件的体积较之以前亦大幅减小。

--------------------

PS：[Android多分辨率适配框架视频教程][Android]同步更新啦

[Android_ _ 1]: http://blog.csdn.net/lfdfhl/article/details/52735103
[Android_ _ 2]: http://blog.csdn.net/lfdfhl/article/details/52877866
[Android_ _ 3]: http://blog.csdn.net/lfdfhl/article/details/53046113
[View_00_View]: http://blog.csdn.net/lfdfhl/article/details/51671038
[View_01]: http://blog.csdn.net/lfdfhl/article/details/51324275
[View_02_onMeasure]: http://blog.csdn.net/lfdfhl/article/details/51347818
[View_03_onLayout]: http://blog.csdn.net/lfdfhl/article/details/51393131
[View_04_Draw]: http://blog.csdn.net/lfdfhl/article/details/51435968
[View_05]: http://blog.csdn.net/lfdfhl/article/details/51508727
[View_06_View_Touch]: http://blog.csdn.net/lfdfhl/article/details/51559847
[View_07_ViewGroup_Touch]: http://blog.csdn.net/lfdfhl/article/details/51603088
[View_08]: http://blog.csdn.net/lfdfhl/article/details/51656492
[Android]: http://stay4it.com/course/28
[Android 1]: http://lib.csdn.net/base/android
[20161023135915128]: /images/20220715/e7a4601f11d14aaab98aa5ff6412aa1d.png
[20161023135938926]: /images/20220715/bafc832c8ff14b23acdfa4859975cda8.png
[20161023140032428]: /images/20220715/c6f2e699eebf4e95985c4236b7b27b63.png
[20161023140102756]: /images/20220715/0f8e49fe70124786b776441da66328ba.png
[20161023140141006]: /images/20220715/5dc5e720181a4d77aca95567880c785c.png
[20161023140209898]: /images/20220715/d26a184eaec644f58fe6ac20e12fa4b6.png