Android开发——适配终结者AutoLayout

0. 前言  

相信Android开发者对于适配问题都比较苦恼，如果有一个库可以完成如下功能，那一定是非常爽的，即直接对比着设计师给我们的设计图（针对某个分辨率），直接把px属性写在xml布局文件里，然后在所有分辨率的机器上比例均完美适配。AutoLayout就是这样的一个库。本库的地址：https://github.com/hongyangAndroid/AndroidAutoLayout。

1  直观的体验 

假设我们拿到一张设计图：

对于，新增旅客我们的布局文库应该这么写：

接着是Item的布局文件：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="108px"
    android:layout_marginTop="26px"
    android:background="#ffffffff"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="22px"
        android:layout_marginTop="16px"
        android:text="王大炮 WANG.DAPAO"
        android:textColor="#333"
        android:textSize="28px"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="16px"
        android:layout_marginLeft="22px"
        android:text="护照：G50786449"
        android:textColor="#999"
        android:textSize="26px"
        />

</RelativeLayout>

可以看到我们直接使用的是px属性。px能完成适配？

这里说一下：这个px并不代表1像素，而是在库的内部进行百分比化处理，也就是说如果设计稿里是720px高度的屏幕，这里填写72px，就是占据10%，当这个布局文件运行在任何分辨率的手机上，这个72px依然代表10%的高度，这就是本库适配的原理。

 

而使用Autolayout也很简单，只需要compile project(':autolayout')。并且如下所示在AndroidManifest中注明你的设计稿的尺寸。最后让你的Activity去继承AutoLayoutActivity。如果你不想继承AutoLayoutActivity，那么可以使用AutoXXXLayout代替系统原有的XXXLayout。当然，如果继承了AutoLayoutActivity，Fragment里面什么都不需要操作。

<meta-data android:name="design_width" android:value="768"></meta-data>
<meta-data android:name="design_height" android:value="1280"></meta-data>

接下来看下不同分辨率下的效果：

768*1280,Andriod 4.4.4

 

480*800,Android 2.3.7

2  注意事项

2.1  开启PreView

写布局文件的时候，不能实时的去预览效果，那么体验真的是非常的不好，也在很大程度上降低开发效率，所以在使用该库时，要选择和你声明设计稿尺寸一致的预览尺寸，比如 768 * 1280。还有就是不要在PreView中去查看所有分辨率下的显示，是看不出来适配效果的，因为有些计算是动态的。

 

2.2  关于TextView

TextView这个控件呢，可能和设计稿上会有一些出入，并非是此库的原因，而是与生俱来的特性。

比如设置TextView的size为32px，你去运行肯定不是32px的高度，因为文字的上下方都会有一定的空隙。应对这个问题，你可以将TextView与其他控件的上下边距尽可能的稍微写小一点。其实我上面的例子，在编写Item里面的时候，也有意缩小了一下marginTop值等。

因为TextView的上述问题，所以对于居中，虽然可以使用本库通过编写margin_left/margin_top等很轻松的完成居中。但是为了精确起见，还是建议使用gravity，centerInXXX等属性完成。

 

2.3  指定设置的值参考宽度或者高度

由于该库的特点，布局文件中宽高上的1px是不相等的，于是如果需要宽高保持一致的情况，布局中可以使用如下属性：

app:layout_auto_basewidth="height"//代表height上编写的像素值参考宽度。
app:layout_auto_baseheight="width"//代表width上编写的像素值参考高度。
app:layout_auto_basewidth="height|padding"//如果需要指定多个值参考宽度，用|隔开，取值为
 
//width,height
//margin,marginLeft,marginTop,marginRight,marginBottom
//padding,paddingLeft,paddingTop,paddingRight,paddingBottom
//textSize.

2.4  将状态栏区域作为内容区域

如果某个Activity需要将状态栏区域作为实际的内容区域，那么可用高度会变大，就让这个Activity实现UseStatusBar接口(仅仅作为标识作用，不需要实现任何方法)，当然你肯定要自己开启windowTranslucentStatus或者设置FLAG_TRANSLUCENT_STATUS。

注意：仅仅是改变状态栏颜色，并不需要实现此接口，因为并没有实际上增加可用高度。

 

2.5  其他优化建议

（1）通过本库的方式去编写代码，可以在很大程序上使用margin，也就是说，对于View的位置非常好控制，从而能够减少非常多的嵌套，甚至任何一个复杂的界面做到无嵌套。

（2）几乎不需要去使用RelativeLayout的规则了，比如rightOf，完全可以由marginLeft完成。

（3）对于LinearLayout的weight，几乎也不需要使用了，比如屏幕宽度720px，想要四个控件横向均分，完全可以写layout_width="180px"。

 

相信通过上述的介绍，你已经了解的本库适配的做法，而且可以说是我见过的最方便的适配方案，最大化的减轻了适配的负担，甚至比你不适配时编写UI都方便。

本文转载自鸿神的博客。更多细节问题可以参考本库的Github地址。