Android AutoLayout全新的适配方式 堪称适配终结者(转)

转载请标明出处: 
http://blog.csdn.net/lmj623565791/article/details/49990941; 
本文出自:【张鸿洋的博客】android

1、概述

相信Android的开发者对于设配问题都比较苦恼,Google官方虽然给出了一系列的建议,可是想要单纯使用这些建议将设备很轻松的作好,仍是至关困难的。我的也比较关注适配的问题,以前也发了几篇关于适配的文章,大体有:git

ok,我大体说一下,没看过的先看完这篇,再考虑看不看以上几篇,本篇的灵感是来自以上几篇,可是适配的方便程度、以及效果远比上面几篇效果要好。github

既然灵感来源于上述几篇,就大致介绍下:微信

  • 第一篇:主要是根据设计图的尺寸,而后将设计图上标识的px尺寸,转化为百分比,为全部的主流屏幕去生成对应百分比的值,每一个尺寸都会有一个values文件夹。存在一些问题:产生大量的文件夹,适配不了特殊的尺寸(必须创建默认的文件夹)微信开发

  • 第二篇和第三篇:这两篇属于同样的了,主要是基于Google推出的百分比布局,已经很大程度解决了适配的问题。存在一些问题:使用起来比较反人类,由于设计图上标识的都是px,因此须要去计算百分比,而后这个百分比仍是依赖父容器的,设计图可能并不会将每一个父容器的尺寸都标识出来,全部很难使用(固然,有人已经采用自动化的工具去计算了)。还有个问题就是,由于依赖于父容器,致使ScrollView,ListView等容器内高度没法使用百分比。app

能够看到都存在一些问题,或多或少都须要进行一些额外的工做,然而我但愿适配是这样的:eclipse

  • 拿到设计图,meta信息中填入设计图的尺寸,而后不须要额外计算,布局直接抄设计图上的尺寸,不产生任何多余的资源文件,完成各类分辨率的适配!

2、直观的体验

假设咱们拿到一张设计图:工具

这样的设计图开发中很常见吧,有些公司可能须要本身去测量。布局

按照咱们的思想:性能

布局直接抄设计图上的尺寸

对于,新增旅客咱们的布局文库应该这么写:

<RelativeLayout android:layout_width="match_parent" android:layout_height="86px" android:layout_marginTop="26px" android:background="#ffffffff"> <ImageView android:id="@+id/id_tv_add" android:layout_width="34px" android:layout_height="34px" android:layout_gravity="center_vertical" android:layout_marginLeft="276px" android:layout_marginTop="26px" android:src="@mipmap/add" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="26px" android:layout_toRightOf="@id/id_tv_add" android:text="新增旅客" android:textColor="#1fb6c4" android:textSize="32px" /> </RelativeLayout>

来张组合图,感觉一下:

感觉完了,想想,按照这种方式去写布局你说爽不爽。

ok,那么对于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%的高度,这就是本库适配的原理。

接下来:看下不一样分辨率下的效果:

768*1280,Andriod 4.4.4

480*800,Android 2.3.7

上述两个机器的分辨率差距至关大了,按照百分比的规则,完美实现了适配,最为重要的是:

  • 不再用拿着设计稿去想这控件的宽高到底取多少dp
  • 不再用去为多个屏幕去写多个dimens
  • 不再用去计算百分比了(若是使用百分比控件完成适配)
  • 不再用去跟UI MM去解释什么是dp了

接下来讲下用法。

本库的地址:https://github.com/hongyangAndroid/AndroidAutoLayout

3、用法

用法

(1)注册设计图尺寸

autolayout引入

dependencies {
    compile project(':autolayout')
}

对于eclipse的伙伴,只有去copy源码了~~

在你的项目的AndroidManifest中注明你的设计稿的尺寸。

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

(2)Activity中开启设配

  • 让你的Activity去继承AutoLayoutActivity

ok,很是简单的两部便可引入项目,而后,而后干吗?

而后就按照上个章节的编写方式开始玩耍吧~


ok,上面是最简单的用法,固然你也能够不去继承AutoLayoutActivity来使用。

AutoLayoutActivity的用法其实是完成了一件事:

  • LinearLayout -> AutoLinearLayout
  • RelativeLayout -> AutoRelativeLayout
  • FrameLayout -> AutoFrameLayout

若是你不想继承AutoLayoutActivity,那么你就得像Google的百分比库同样,去用AutoXXXLayout代替系统原有的XXXLayout。固然,你能够放心的是,全部的系统属性原有的属性都会支持,不过根布局上就不支持px的自动百分比化了,可是通常根布局都是MATCH_PARENT,而上述的方式,根布局也是能够直接px的百分比化的。

4、注意事项

(1)如何开启PreView

你们都知道,写布局文件的时候,不能实时的去预览效果,那么体验真的是很是的很差,也在很大程度上下降开发效率,因此下面教你们如何用好,用对PreView(针对该库)。

首先,你要记得你设计稿的尺寸,好比 768 * 1280

而后在你的PreView面板,选择分辨率一致的设备:

而后你就能够看到最为精确的预览了:

两个注意事项:

  1. 大家UI给的设计图的尺寸并不是是主流的设计图,该尺寸没找到,你能够拿显示器砸他本身去新建一个设备。
  2. 不要在PreView中去查看全部分辨率下的显示,是看不出来适配效果的,由于有些计算是动态的。

(2)关于TextView

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

好比:

<TextView textSize="32px" layout_height="wrap_contnt" />

你去运行确定不是32px的高度,文字的上下方都会有必定的空隙。如何你将高度写死,也会发现文字显示不全。

恩,因此呢,灵活应对这个问题,对于存在字体标识很精确的值,你能够选择:对于TextView与其余控件的上下边距呢,尽量的稍微写小一点。

其实我上面的例子,几乎都是TextView,全部我在编写Item里面的时候,也有意缩小了一下marginTop值等。不过,对于其余控件是不存在这样的问题的。

ps:由于TextView的上述问题:因此对于居中,虽然可使用本库经过编写margin_left,margin_top等很轻松的完成居中。可是为了精确起见,仍是建议使用gravitycenterInXXX等属性完成。

(3) 指定设置的值参考宽度或者高度

因为该库的特色,布局文件中宽高上的1px是不相等的,因而若是须要宽高保持一致的状况,布局中使用属性:

app:layout_auto_basewidth="height",表明height上编写的像素值参考宽度。

app:layout_auto_baseheight="width",表明width上编写的像素值参考高度。

若是须要指定多个值参考宽度即:

app:layout_auto_basewidth="height|padding"

用|隔开,相似gravity的用法,取值为:

  • width,height
  • margin,marginLeft,marginTop,marginRight,marginBottom
  • padding,paddingLeft,paddingTop,paddingRight,paddingBottom
  • textSize.

(4)将状态栏区域做为内容区域

若是某个Activity须要将状态栏区域做为实际的内容区域时,那么可用高度会变大,你所要作的只有一件事:让这个Activity实现UseStatusBar接口(仅仅做为标识左右,不须要实现任何方法),固然你确定要本身开启windowTranslucentStatus或者设置FLAG_TRANSLUCENT_STATUS

注意:仅仅是改变状态栏颜色,并不须要实现此接口,由于并无实际上增长可用高度。

5、其余

目前支持属性

  • layout_width
  • layout_height
  • layout_margin(left,top,right,bottom)
  • pading(left,top,right,bottom)
  • textSize
  • 不会影响系统全部的其余属性,以及不会影响dp,sp的使用

性能的提高

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

以及,几乎不须要去使用RelativeLayout的规则了,好比rightOf,彻底能够由marginLeft完成,其余的rule同理。

对于LinearLayout的weight,几乎也不须要使用了,好比屏幕宽度720px,想要四个控件横向均分,彻底能够写layout_width="180px"

我相信经过上述的介绍,你已经了解的本库适配的作法,并且能够说是我见过的最方便的适配方案,最大化的减轻了适配的负担,甚至比你不适配时编写UI都方便。目前本库,已经尝试用于项目中,尽量去发现一些潜在的问题。

本库的地址:https://github.com/hongyangAndroid/AndroidAutoLayout,欢迎各位一块儿完善,让适配问题消失在咱们的痛苦中。

ok,最后,只有去体验了,才能发现优势和缺点~~


这里专门建立了一个讨论群:99913714,里面有不少使用该库的人员,方便你们针对性的提问。

ps:对于使用,尽量参考github上的readme,博文没办法作到一直修改适应新的变化,使用版本也尽量使用github上提供的最新版本。


欢迎关注个人微博: 
http://weibo.com/u/3165018720


群号:514447580,欢迎入群

微信公众号:hongyangAndroid 
(欢迎关注,第一时间推送博文信息) 

相关文章
相关标签/搜索