Android AutoLayout 全新的適配方式，堪稱適配終結者

jopen 9年前發布 | 23K 次閱讀 Android開發移動開發 Android AutoLayout

一、概述

相信Android的開發者對于適配問題都比較苦惱，Google官方雖然給出了一系列的建議，但是想要單純使用這些建議將設備很輕松的做好，還是相當困難的。個人也比較關注適配的問題，之前也發了幾篇關于適配的文章，大致有：

ok，我大致說一下，沒看過的先看完這篇，再考慮看不看以上幾篇，本篇的靈感是來自以上幾篇，但是適配的方便程度、以及效果遠比上面幾篇效果要好。

既然靈感來源于上述幾篇，就大體介紹下：

第一篇：主要是根據設計圖的尺寸，然后將設計圖上標識的px尺寸，轉化為百分比，為所有的主流屏幕去生成對應百分比的值，每個尺寸都會有一個values文件夾。存在一些問題：產生大量的文件夾，適配不了特殊的尺寸（必須建立默認的文件夾）
第二篇和第三篇：這兩篇屬于一樣的了，主要是基于Google推出的百分比布局，已經很大程度解決了適配的問題。存在一些問題：使用起來比較反人類，因為設計圖上標識的都是px，所以需要去計算百分比，然后這個百分比還是依賴父容器的，設計圖可能并不會將每個父容器的尺寸都標識出來，所有很難使用（當然，有人已經采用自動化的工具去計算了）。還有個問題就是，因為依賴于父容器，導致ScrollView，ListView等容器內高度無法使用百分比。

可以看到都存在一些問題，或多或少都需要進行一些額外的工作，然而我希望適配是這樣的：

拿到設計圖，meta信息中填入設計圖的尺寸，然后不需要額外計算，布局直接抄設計圖上的尺寸，不產生任何多余的資源文件，完成各種分辨率的適配！

二、直觀的體驗

假設我們拿到一張設計圖：

Android AutoLayout 全新的適配方式，堪稱適配終結者

這樣的設計圖開發中很常見吧，有些公司可能需要自己去測量。

按照我們的思想：

布局直接抄設計圖上的尺寸

對于，新增旅客我們的布局文庫應該這么寫：

Java

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>

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>

來張組合圖，感受一下：

Android AutoLayout 全新的適配方式，堪稱適配終結者

感受完了，想一想，按照這種方式去寫布局你說爽不爽。

ok，那么對于Item的布局文件，就是這么寫：

Java

RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="108px"
    android:layout_marginTop="26px"
    android:background="#ffffffff"
    &gt;

    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"
        /&gt;
    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"
        /&gt;

RelativeLayout&gt;

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

Android AutoLayout 全新的適配方式，堪稱適配終結者

480*800,Android 2.3.7

Android AutoLayout 全新的適配方式，堪稱適配終結者

上述兩個機器的分辨率差距相當大了，按照百分比的規則，完美實現了適配，最為重要的是：

再也不用拿著設計稿去想這控件的寬高到底取多少dp
再也不用去為多個屏幕去寫多個dimens
再也不用去計算百分比了（如果使用百分比控件完成適配）
再也不用去跟UI MM去解釋什么是dp了

接下來說下用法。

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

三、用法

用法

（1）注冊設計圖尺寸

將 autolayout 引入

Java

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

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

對于eclipse的伙伴，只有去copy源碼了~~

在你的項目的AndroidManifest中注明你的設計稿的尺寸。

Java

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

meta-dataandroid:name="design_width"android:value="768">meta-data>
meta-dataandroid: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的百分比化的。

四、注意事項

（1）如何開啟PreView

大家都知道，寫布局文件的時候，不能實時的去預覽效果，那么體驗真的是非常的不好，也在很大程度上降低開發效率，所以下面教大家如何用好，用對PreView（針對該庫）。

首先，你要記得你設計稿的尺寸，比如768 * 1280

然后在你的PreView面板，選擇分辨率一致的設備：

Android AutoLayout 全新的適配方式，堪稱適配終結者

然后你就可以看到最為精確的預覽了：

Android AutoLayout 全新的適配方式，堪稱適配終結者

兩個注意事項：

你們UI給的設計圖的尺寸并非是主流的設計圖，該尺寸沒找到，你可以 ~~拿顯示器砸他~~ 自己去新建一個設備。
不要在PreView中去查看所有分辨率下的顯示，是看不出來適配效果的，因為有些計算是動態的。

(2)關于TextView

TextView這個控件呢，可能和設計稿上會有一些出入，并非是此庫的原因，而是與生俱來的特性。

比如：

Java

TextView
 textSize="32px"
 layout_height="wrap_contnt"
 /&gt;

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。

注意：僅僅是改變狀態欄顏色，并不需要實現此接口，因為并沒有實際上增加可用高度。

五、其他

目前支持屬性

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，最后，只有去體驗了，才能發現優點和缺點~~

原文出處：張鴻洋

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1449218414155.html

Android開發移動開發 Android AutoLayout

Android AutoLayout 全新的適配方式，堪稱適配終結者

一、概述

二、直觀的體驗

三、用法

用法

（1）注冊設計圖尺寸

（2）Activity中開啟設配

四、注意事項

（1）如何開啟PreView

(2)關于TextView

(3) 指定設置的值參考寬度或者高度

(4)將狀態欄區域作為內容區域

五、其他

目前支持屬性

性能的提升

相關經驗

相關資訊

相關文檔

目錄