AndroidAutoLayout 終極適配

本文轉(zhuǎn)載自: http://blog.csdn.net/lmj623565791/article/details/49990941方咆;

一、概述

相信Android的開發(fā)者對于設(shè)配問題都比較苦惱妄迁,Google官方雖然給出了一系列的建議,但是想要單純使用這些建議將設(shè)備很輕松的做好李命,還是相當(dāng)困難的登淘。個人也比較關(guān)注適配的問題,之前也發(fā)了幾篇關(guān)于適配的文章封字,大致有:
Android 屏幕適配方案
Android 百分比布局庫(percent-support-lib) 解析與擴(kuò)展
Android 增強(qiáng)版百分比布局庫 為了適配而擴(kuò)展

ok黔州,我大致說一下耍鬓,沒看過的先看完這篇,再考慮看不看以上幾篇辩撑,本篇的靈感是來自以上幾篇界斜,但是適配的方便程度、以及效果遠(yuǎn)比上面幾篇效果要好合冀。
既然靈感來源于上述幾篇,就大體介紹下:
第一篇:主要是根據(jù)設(shè)計圖的尺寸项贺,然后將設(shè)計圖上標(biāo)識的px尺寸君躺,轉(zhuǎn)化為百分比,為所有的主流屏幕去生成對應(yīng)百分比的值开缎,每個尺寸都會有一個values文件夾棕叫。存在一些問題:產(chǎn)生大量的文件夾,適配不了特殊的尺寸(必須建立默認(rèn)的文件夾)

第二篇和第三篇:這兩篇屬于一樣的了奕删,主要是基于Google推出的百分比布局俺泣,已經(jīng)很大程度解決了適配的問題。存在一些問題:使用起來比較反人類完残,因為設(shè)計圖上標(biāo)識的都是px伏钠,所以需要去計算百分比,然后這個百分比還是依賴父容器的谨设,設(shè)計圖可能并不會將每個父容器的尺寸都標(biāo)識出來熟掂,所有很難使用(當(dāng)然,有人已經(jīng)采用自動化的工具去計算了)扎拣。還有個問題就是赴肚,因為依賴于父容器,導(dǎo)致ScrollView二蓝,ListView等容器內(nèi)高度無法使用百分比誉券。

可以看到都存在一些問題,或多或少都需要進(jìn)行一些額外的工作刊愚,然而我希望適配是這樣的:
拿到設(shè)計圖踊跟,meta信息中填入設(shè)計圖的尺寸,然后不需要額外計算百拓,布局直接抄設(shè)計圖上的尺寸琴锭,不產(chǎn)生任何多余的資源文件,完成各種分辨率的適配衙传!

二决帖、直觀的體驗

假設(shè)我們拿到一張設(shè)計圖:



這樣的設(shè)計圖開發(fā)中很常見吧,有些公司可能需要自己去測量蓖捶。
按照我們的思想:
布局直接抄設(shè)計圖上的尺寸

對于地回,新增旅客
我們的布局文件應(yīng)該這么寫:

<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="護(hù)照:G50786449"
        android:textColor="#999"
        android:textSize="26px" />
</RelativeLayout>

看到這谷羞,我相信,你現(xiàn)在最大的疑問就是:你用的px溜徙,px能完成適配湃缎?搞笑吧?
那么首先說一下:這個px并不代表1像素蠢壹,我在內(nèi)部會進(jìn)行百分比化處理嗓违,也就是說:720px高度的屏幕,你這里填寫72px图贸,占據(jù)10%蹂季;當(dāng)這個布局文件運(yùn)行在任何分辨率的手機(jī)上,這個72px都代表10%的高度疏日,這就是本庫適配的原理偿洁。
接下來:看下不同分辨率下的效果:

768 * 1280,Andriod 4.4.4


480 * 800,Android 2.3.7


上述兩個機(jī)器的分辨率差距相當(dāng)大了,按照百分比的規(guī)則制恍,完美實現(xiàn)了適配父能,最為重要的是:
再也不用拿著設(shè)計稿去想這控件的寬高到底取多少dp
再也不用去為多個屏幕去寫多個dimens
再也不用去計算百分比了(如果使用百分比控件完成適配)
再也不用去跟UI MM去解釋什么是dp了

接下來說下用法。
本庫的地址:https://github.com/hongyangAndroid/AndroidAutoLayout

三净神、用法

(1)注冊設(shè)計圖尺寸

autolayout引入

dependencies {
     compile project(':autolayout')
 }

對于eclipse的伙伴何吝,只有去copy源碼了~~
在你的項目的AndroidManifest中注明你的設(shè)計稿
的尺寸。

<meta-data
    android:name="design_width"
    android:value="768"/>
<meta-data
    android:name="design_height"
    android:value="1280"/>
(2)Activity中開啟設(shè)配
  • 讓你的Activity去繼承AutoLayoutActivity

ok鹃唯,非常簡單的兩部即可引入項目爱榕,然后,然后干嘛坡慌?
然后就按照上個章節(jié)的編寫方式開始玩耍吧~
ok黔酥,上面是最簡單的用法,當(dāng)然你也可以不去繼承AutoLayoutActivity
來使用洪橘。
AutoLayoutActivity
的用法實際上是完成了一件事:

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

如果你不想繼承AutoLayoutActivity跪者,那么你就得像Google的百分比庫一樣,去用AutoXXXLayout代替系統(tǒng)原有的XXXLayout熄求。當(dāng)然渣玲,你可以放心的是,所有的系統(tǒng)屬性原有的屬性都會支持弟晚,不過根布局上就不支持px的自動百分比化了忘衍,但是一般根布局都是MATCH_PARENT逾苫,而上述的方式,根布局也是可以直接px的百分比化的枚钓。

四铅搓、注意事項

(1)如何開啟PreView

大家都知道,寫布局文件的時候搀捷,不能實時的去預(yù)覽效果星掰,那么體驗真的是非常的不好,也在很大程度上降低開發(fā)效率指煎,所以下面教大家如何用好蹋偏,用對PreView(針對該庫)。
首先至壤,你要記得你設(shè)計稿的尺寸,比如 768 * 1280

然后在你的PreView面板枢纠,選擇分辨率一致的設(shè)備:



然后你就可以看到最為精確的預(yù)覽了:


兩個注意事項:
你們UI給的設(shè)計圖的尺寸并非是主流的設(shè)計圖像街,該尺寸沒找到,你可以拿顯示器砸他自己去新建一個設(shè)備晋渺。
不要在PreView中去查看所有分辨率下的顯示镰绎,是看不出來適配效果的,因為有些計算是動態(tài)的木西。

(2)關(guān)于TextView

TextView這個控件呢畴栖,可能和設(shè)計稿上會有一些出入,并非是此庫的原因八千,而是與生俱來的特性吗讶。
比如:

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

你去運(yùn)行肯定不是32px的高度,文字的上下方都會有一定的空隙恋捆。如何你將高度寫死照皆,也會發(fā)現(xiàn)文字顯示不全。
恩沸停,所以呢膜毁,靈活應(yīng)對這個問題,對于存在字體標(biāo)識很精確的值愤钾,你可以選擇:對于TextView與其他控件的上下邊距呢瘟滨,盡可能的稍微寫小一點。
其實我上面的例子能颁,幾乎都是TextView杂瘸,所有我在編寫Item里面的時候,也有意縮小了一下marginTop值等劲装。不過胧沫,對于其他控件是不存在這樣的問題的昌简。
ps:因為TextView的上述問題:所以對于居中,雖然可以使用本庫通過編寫margin_left绒怨,margin_top等很輕松的完成居中纯赎。但是為了精確起見,還是建議使用gravity南蹂,centerInXXX等屬性完成犬金。

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

由于該庫的特點,布局文件中寬高上的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)將狀態(tài)欄區(qū)域作為內(nèi)容區(qū)域

如果某個Activity需要將狀態(tài)欄區(qū)域作為實際的內(nèi)容區(qū)域時,那么可用高度會變大店诗,你所要做的只有一件事:讓這個Activity實現(xiàn)UseStatusBar接口(僅作為標(biāo)識左右裹刮,不需要實現(xiàn)任何方法),當(dāng)然你肯定要自己開啟windowTranslucentStatus或者設(shè)置FLAG_TRANSLUCENT_STATUS庞瘸。

注意:僅僅是改變狀態(tài)欄顏色捧弃,并不需要實現(xiàn)此接口,因為并沒有實際上增加可用高度擦囊。

五违霞、其他

目前支持屬性
  • layout_width
  • layout_height
  • layout_margin(left,top,right,bottom)
  • pading(left,top,right,bottom)
  • textSize
    不會影響系統(tǒng)所有的其他屬性,以及不會影響dp,sp的使用
性能的提升

通過本庫的方式去編寫代碼霜第,可以在很大程序上使用margin葛家,也就是說,對于View的位置非常好控制泌类,從而能夠減少非常多的嵌套癞谒,甚至任何一個復(fù)雜的界面做到無嵌套。
以及刃榨,幾乎不需要去使用RelativeLayout的規(guī)則了弹砚,比如rightOf,完全可以由marginLeft完成枢希,其他的rule同理桌吃。
對于LinearLayout的weight,幾乎也不需要使用了苞轿,比如屏幕寬度720px茅诱,想要四個控件橫向均分逗物,完全可以寫layout_width="180px"

我相信通過上述的介紹,你已經(jīng)了解的本庫適配的做法瑟俭,而且可以說是我見過的最方便的適配方案翎卓,最大化的減輕了適配的負(fù)擔(dān),甚至比你不適配時編寫UI都方便摆寄。目前本庫失暴,已經(jīng)嘗試用于項目中,盡可能去發(fā)現(xiàn)一些潛在的問題微饥。

本庫的地址:https://github.com/hongyangAndroid/AndroidAutoLayout逗扒,歡迎各位一起完善,讓適配問題消失在我們的痛苦中欠橘。

ok矩肩,最后,只有去體驗了肃续,才能發(fā)現(xiàn)優(yōu)點和缺點~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蛮拔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子痹升,更是在濱河造成了極大的恐慌,老刑警劉巖畦韭,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疼蛾,死亡現(xiàn)場離奇詭異,居然都是意外死亡艺配,警方通過查閱死者的電腦和手機(jī)察郁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來转唉,“玉大人皮钠,你說我怎么就攤上這事≡ǎ” “怎么了麦轰?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長砖织。 經(jīng)常有香客問我款侵,道長,這世上最難降的妖魔是什么侧纯? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任新锈,我火速辦了婚禮,結(jié)果婚禮上眶熬,老公的妹妹穿的比我還像新娘妹笆。我一直安慰自己块请,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布拳缠。 她就那樣靜靜地躺著墩新,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脊凰。 梳的紋絲不亂的頭發(fā)上抖棘,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天,我揣著相機(jī)與錄音狸涌,去河邊找鬼切省。 笑死,一個胖子當(dāng)著我的面吹牛帕胆,可吹牛的內(nèi)容都是我干的朝捆。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼懒豹,長吁一口氣:“原來是場噩夢啊……” “哼芙盘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起脸秽,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤儒老,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后记餐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體驮樊,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年片酝,在試婚紗的時候發(fā)現(xiàn)自己被綠了囚衔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡雕沿,死狀恐怖练湿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情审轮,我是刑警寧澤肥哎,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站断国,受9級特大地震影響贤姆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜稳衬,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一霞捡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧薄疚,春花似錦碧信、人聲如沸赊琳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽躏筏。三九已至,卻和暖如春呈枉,著一層夾襖步出監(jiān)牢的瞬間趁尼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工猖辫, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留酥泞,地道東北人。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓啃憎,卻偏偏與公主長得像芝囤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子辛萍,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容