Android AutoLayout全新的适配方式堪称适配终结者（转）

时间 2019-11-12

标签 android autolayout 全新适配方式堪称终结者栏目 Android 繁體版

原文原文链接

1、概述

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

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

既然灵感来源于上述几篇，就大致介绍下：github

第一篇：主要是根据设计图的尺寸，而后将设计图上标识的px尺寸，转化为百分比，为全部的主流屏幕去生成对应百分比的值，每一个尺寸都会有一个values文件夹。存在一些问题：产生大量的文件夹，适配不了特殊的尺寸（必须创建默认的文件夹）app
第二篇和第三篇：这两篇属于同样的了，主要是基于Google推出的百分比布局，已经很大程度解决了适配的问题。存在一些问题：使用起来比较反人类，由于设计图上标识的都是px，因此须要去计算百分比，而后这个百分比仍是依赖父容器的，设计图可能并不会将每一个父容器的尺寸都标识出来，全部很难使用（固然，有人已经采用自动化的工具去计算了）。还有个问题就是，由于依赖于父容器，致使ScrollView，ListView等容器内高度没法使用百分比。eclipse

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

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

2、直观的体验

假设咱们拿到一张设计图：布局

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

按照咱们的思想：字体

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

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

 1 <RelativeLayout
 2 android:layout_width="match_parent"
 3 android:layout_height="86px"
 4 android:layout_marginTop="26px"
 5 android:background="#ffffffff">
 6 
 7 <ImageView
 8     android:id="@+id/id_tv_add"
 9     android:layout_width="34px"
10     android:layout_height="34px"
11     android:layout_gravity="center_vertical"
12     android:layout_marginLeft="276px"
13     android:layout_marginTop="26px"
14     android:src="@mipmap/add"
15     />
16 
17 <TextView
18     android:layout_width="wrap_content"
19     android:layout_height="wrap_content"
20     android:layout_centerVertical="true"
21     android:layout_marginLeft="26px"
22     android:layout_toRightOf="@id/id_tv_add"
23     android:text="新增旅客"
24     android:textColor="#1fb6c4"
25     android:textSize="32px"
26     />
27 </RelativeLayout>

来张组合图，感觉一下：

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

ok，那么对于Item的布局文件，就是这么写：

 1 <RelativeLayout
 2     android:layout_width="match_parent"
 3     android:layout_height="108px"
 4     android:layout_marginTop="26px"
 5     android:background="#ffffffff"
 6     >
 7 
 8     <TextView
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:layout_marginLeft="22px"
12         android:layout_marginTop="16px"
13         android:text="王大炮 WANG.DAPAO"
14         android:textColor="#333"
15         android:textSize="28px"
16         />
17     <TextView
18         android:layout_width="wrap_content"
19         android:layout_height="wrap_content"
20         android:layout_alignParentBottom="true"
21         android:layout_marginBottom="16px"
22         android:layout_marginLeft="22px"
23         android:text="护照：G50786449"
24         android:textColor="#999"
25         android:textSize="26px"
26         />
27 
28 </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面板，选择分辨率一致的设备：

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

两个注意事项：

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

(2)关于TextView

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

好比：

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

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

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

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

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

(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，最后，只有去体验了，才能发现优势和缺点~~

Android AutoLayout全新的适配方式 堪称适配终结者（转）