天天看點
傳回

Android AutoLayout全新适配方式，解決布局問題

http://blog.csdn.net/lmj623565791/article/details/49990941 ； 

本文出自:【張鴻洋的部落格】

一、概述

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

  • Android 螢幕适配方案
  • Android 百分比布局庫(percent-support-lib) 解析與擴充
  • Android 增強版百分比布局庫 為了适配而擴充

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

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

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

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

  • 拿到設計圖，meta資訊中填入設計圖的尺寸，然後不需要額外計算，布局直接抄設計圖上的尺寸，不産生任何多餘的資源檔案，完成各種分辨率的适配！

二、直覺的體驗

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

Android AutoLayout全新适配方式，解決布局問題

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

按照我們的思想：

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

對于，

新增旅客

我們的布局文庫應該這麼寫：

<code class="language-xml hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout
android:layout_width="match_parent"
android:layout_height="86px"
android:layout_marginTop="26px"
android:background="#ffffffff"</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ImageView
</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/id_tv_add"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"34px"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"34px"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_gravity</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"center_vertical"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginLeft</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"276px"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"26px"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@mipmap/add"</span>
    /></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">TextView
</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_centerVertical</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginLeft</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"26px"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_toRightOf</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@id/id_tv_add"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:text</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"新增旅客"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:textColor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#1fb6c4"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:textSize</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"32px"</span>
    /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul>

來張組合圖，感受一下：

Android AutoLayout全新适配方式，解決布局問題

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

ok，那麼對于Item的布局檔案，就是這麼寫：

<code class="language-xml hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout
</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"108px"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"26px"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#ffffffff"</span>
    ></span>

    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">TextView
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginLeft</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"22px"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"16px"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:text</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"王大炮 WANG.DAPAO"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:textColor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#333"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:textSize</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"28px"</span>
        /></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">TextView
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_alignParentBottom</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginBottom</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"16px"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginLeft</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"22px"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:text</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"護照：G50786449"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:textColor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#999"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:textSize</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"26px"</span>
        /></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li></ul>

看到這，我相信，你現在最大的疑問就是：你用的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引入

<code class="language-xml hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">dependencies {
    compile project(':autolayout')
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

對于eclipse的夥伴，隻有去copy源碼了~~

在你的項目的AndroidManifest中注明你的

設計稿

的尺寸。

<code class="language-xml hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta-data</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"design_width"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:value</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"768"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta-data</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta-data</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"design_height"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:value</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1280"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta-data</span>></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

（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全新适配方式，解決布局問題

兩個注意事項：

  1. 你們UI給的設計圖的尺寸并非是主流的設計圖，該尺寸沒找到，你可以拿顯示器砸他自己去建立一個裝置。
  2. 不要在PreView中去檢視所有分辨率下的顯示，是看不出來适配效果的，因為有些計算是動态的。

(2)關于TextView

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

比如：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">TextView
</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">textSize</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"32px"</span>
 <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_contnt"</span>
 /></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

你去運作肯定不是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，最後，隻有去體驗了，才能發現優點和缺點~~

這裡專門建立了一個讨論群：99913714，裡面有很多使用該庫的人員，友善大家針對性的提問。

ps：對于使用，盡可能參考github上的readme，博文沒辦法做到一直修改适應新的變化，使用版本也盡可能使用github上提供的最新版本。

android開發 ui布局 android AutoLayout 布局适配
上一篇: webpack3的常用配置webpack3中常用的一些操作
下一篇: storyboard中的uiscrollview，使用autolayout

繼續閱讀