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。

注意：僅僅是改變狀態欄顏色，並不須要實現此接口，由於並無實際上增長可用高度。