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。当然,如果继承了AutoLayoutActivityFragment里面什么都不需要操作。

<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这个控件呢,可能和设计稿上会有一些出入,并非是此库的原因,而是与生俱来的特性。

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

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

 

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对于LinearLayoutweight,几乎也不需要使用了,比如屏幕宽度720px,想要四个控件横向均分,完全可以写layout_width="180px"

 

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

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页