導(dǎo)言
設(shè)配android的屏幕一定是一個(gè)噩夢(mèng),就好比那些搞網(wǎng)頁(yè)設(shè)計(jì)的為了折騰各種瀏覽器,廢寢忘食的去設(shè)配,其實(shí),這樣想想,設(shè)配android屏幕還真和那些網(wǎng)頁(yè)設(shè)計(jì)去設(shè)配瀏覽器沒(méi)啥區(qū)別…最近,在寫(xiě)一套通過(guò)在view上綁定tag命令的小框架,特定的再回到API文檔中,找找那些沉睡在api文檔中好用的方法!
1.沒(méi)有一勞永逸的方案!
有經(jīng)常關(guān)注android官方文檔的,一定知道在android4.0發(fā)布不久,官方就推出了一套UI設(shè)計(jì)教程,
官方原版： Android Design
非官方簡(jiǎn)體中文版： 非官方簡(jiǎn)體中文版
6寸e-ink pdf版: 6寸版本
有人會(huì)說(shuō),這不是UI設(shè)計(jì)嗎?這是美工和設(shè)計(jì)干的事情,跟我們這些程序猿有什么關(guān)系!嚴(yán)重跑題!!!
關(guān)于一個(gè)程序猿要不要懂點(diǎn)設(shè)計(jì)，這個(gè)問(wèn)題，不做討論，不過(guò)，個(gè)人經(jīng)驗(yàn)，有時(shí)候，可能因此而靈感閃現(xiàn)，解決了一個(gè)不大不小的問(wèn)題．
很多人都嘗試在屏幕設(shè)配上，找出一條通用的解決方案，可惜的是，就算是官方也沒(méi)法提供這樣的幫助， 更別說(shuō)我們這些苦逼的程序員，這里有個(gè)小故事，大家都知道Instagram,android版吧,有個(gè)采訪,Instagram的初始人就說(shuō),我每天收到最多的用戶反饋就是為什么不能在他的android手機(jī)上運(yùn)行,但是,我已經(jīng)設(shè)配了幾百個(gè)android手機(jī)了!!!
所以,想找出一條康莊大道幾乎是不太可能的事情,不過(guò),我們可以修內(nèi)功,出現(xiàn)問(wèn)題,不可怕,可怕的是出現(xiàn)問(wèn)題無(wú)法解決,接下來(lái),我就談?wù)勱P(guān)于屏幕設(shè)配的一些經(jīng)驗(yàn)之談.
2.這世界究竟有多少種屏幕?
我們每天都在究竟怎么去設(shè)配屏幕,那么這世上有多少屏幕要讓我們?nèi)ピO(shè)配呢?下面應(yīng)用了一個(gè)官方的最新資料:有興趣的可以直接到: 官方統(tǒng)計(jì)的屏幕分布
取之2012/5/7
ldpi mdpi hdpi xhdpi
small 2.3% 2.4%
normal 0.7% 26.2% 57.8% 0.9%
large 0.3% 2%
xlarge 7.4%
很多人第一次看這個(gè)圖的時(shí)候肯定會(huì)感到疑惑,怎么不是分辨率?這是什么鬼數(shù)據(jù),這讓人怎么去設(shè)配屏幕!買(mǎi)手機(jī)的時(shí)候可沒(méi)有人會(huì)說(shuō)”你好,我要一個(gè)Normal大小屏幕,密度最好是hdpi的手機(jī)”.
描述過(guò)于模糊!!! 這可能是為什么設(shè)配android屏幕是一件很困難的事情,關(guān)于什么是Normal,什么是hdpi,如果,不清楚這點(diǎn)朋友,我建議先去看看官方文檔: Supporting Multiple Screens
有些東西竟然官方竟然告訴了我們，為啥還要去重復(fù)呢？
順便推薦一個(gè)算DPI的在線小工具: DPI Calculator / PPI Calculator 大概計(jì)算一下，當(dāng)前分辨率的手機(jī)處于哪個(gè)區(qū)間里面，至于詳情，我還是建議大家去看一下官方文檔，里面已經(jīng)說(shuō)得很清楚了！！
竟然，官方文檔都寫(xiě)好了，還有你寫(xiě)來(lái)干嘛啊！那么接下來(lái)就開(kāi)始說(shuō)一些開(kāi)發(fā)碰到的問(wèn)題．
3.開(kāi)始布一個(gè)局
1,新建一個(gè)android項(xiàng)目,把新建一個(gè)Activity那個(gè)選項(xiàng)選上!然后用模擬器運(yùn)行項(xiàng)目!什么?!!
你沒(méi)看錯(cuò),記住照著做就沒(méi)錯(cuò)了…因?yàn)?今天,我們要講如何優(yōu)化和兼容View ,所以,一切從研究View開(kāi)始!
2,打開(kāi)hierarchyviewer
這是一個(gè)幫助我們優(yōu)化view的非常重要的工具的,接下來(lái)的大部分時(shí)間,都會(huì)借住這個(gè)工具進(jìn)行講解,這個(gè)工具沉睡在android sdk 目錄 tools下 hierarchyviewer.bat,或者用Everything這樣的搜索硬盤(pán)的工具直接找到!
3,分析
還記得我們第一步運(yùn)行的項(xiàng)目嗎?接著用hierarchyviewer這樣的神器,就可以導(dǎo)出這樣的圖!
這么一張圖就是我們一個(gè)Hello,World項(xiàng)目的View 布局結(jié)構(gòu),在HierarchyViewer上你點(diǎn)擊每個(gè)按鈕就會(huì)有非常詳細(xì)的布局信息,所以,這里對(duì)于hierarchyViewer的介紹到此為止!關(guān)于這個(gè)工具的詳細(xì)使用,請(qǐng)查閱 Debugging and Profiling User Interfaces 這里不做贅述！
4,如何布好一個(gè)局?
關(guān)于這點(diǎn)我在開(kāi)發(fā)中總結(jié)了一下幾點(diǎn)
1.熟讀API文檔!
布局這東西不是比酷的東西,不是比誰(shuí)的布局越復(fù)雜,那個(gè)人就越牛叉,以最少的步驟完成,設(shè)計(jì)圖的要求,這應(yīng)該是每個(gè)android開(kāi)發(fā)程序員的宗旨!!
案例一:做一個(gè)帶箭頭的返回按鈕
經(jīng)理:那個(gè)小與啊,你根據(jù)這設(shè)計(jì)圖搞一個(gè)按鈕
小與:這還不簡(jiǎn)單三分鐘搞定
于是小于程序猿,敲下了如下代碼
<RelativeLayout android:layout_width=" wrap_content " android:layout_height=" wrap_content " android:gravity=" center " > <Button android:id=" @+id/button1 " android:layout_width=" wrap_content " android:layout_height=" wrap_content " android:background=" @drawable/btn_headtita " android:textColor=" #ffffff " android:text=" @string/back " /> <ImageView android:id=" @+id/imageView1 " android:layout_width=" wrap_content " android:layout_height=" wrap_content " android:layout_alignParentLeft=" true " android:layout_centerVertical=" true " android:src=" @drawable/header_back " /> </RelativeLayout>
看代碼多累啊，我們用剛剛介紹的hierarchyviewer來(lái)分析一下，這個(gè)按鈕有什么問(wèn)題！
我們從這個(gè)圖中，我們可以看到，為了這么一個(gè)按鈕我們用了view的三個(gè)節(jié)點(diǎn)去完成!假設(shè),我們的一個(gè)view 有三個(gè)類(lèi)似的按鈕就意味著我們要用9個(gè)節(jié)點(diǎn)去完成,我們可以簡(jiǎn)單得出這是一個(gè)3N級(jí)的復(fù)雜度布局,我們可以嘗試去優(yōu)化嗎?
技巧一:熟讀官方的API文檔!
個(gè)人建議,常用的Widget的所有參數(shù)都盡量了解一遍!在閱讀官方文檔的時(shí)候我們發(fā)現(xiàn)了Button,有一個(gè)可以把圖繪制在左邊的參數(shù):android:drawableLeft
于是,我們優(yōu)化了一下小與的代碼
< Button android : id = "@+id/button1" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : background = "@drawable/btn_headtita" android : drawableLeft = "@drawable/header_back" android : gravity = "center" android : padding = "10dp" android : text = "@string/back" android : textColor = "#ffffff" />
用hierarchyviewer來(lái)分析一下
瞬間一個(gè)3N級(jí)復(fù)雜度的布局,變成了一個(gè)N級(jí)復(fù)雜的!所以,我建議各位android開(kāi)發(fā)朋友,在考慮優(yōu)化的時(shí)候先把a(bǔ)pi文檔里面的內(nèi)容爛熟與心,不然,這樣折騰下去,很浪費(fèi)時(shí)間!
有細(xì)心的朋友可能會(huì)問(wèn): android : padding = "10dp" 這個(gè)用來(lái)做什么了?
我先告訴大家,不用這個(gè)參數(shù):你將會(huì)看到:
用了以后:
這下大家能夠明白了吧?
所以,當(dāng)你在進(jìn)行布局的時(shí)候,如果碰到比較繁瑣的時(shí)候,你先想想會(huì)不會(huì)已經(jīng)API本身就有這樣的參數(shù)呢?
簡(jiǎn)單是所有布局開(kāi)始最重要的原則!
簡(jiǎn)單意味著不容易出現(xiàn)兼容問(wèn)題!
簡(jiǎn)單意味著性能不錯(cuò)!
2.模塊化布局
所謂,模塊化布局就是要你熟悉使用<include /> 這個(gè)標(biāo)簽!
一個(gè)經(jīng)典的Tab類(lèi)布局由三部分組成,我們可以根據(jù)這三部分創(chuàng)建三個(gè)可以重用的布局
head_menu.xml
content_showweibo.xml
bottom_menu.xml
然后我們可以很靈活的組合我們要顯示的,例如要完成上面的那個(gè)weibo布局
<? xml version="1.0" encoding="utf-8" ?> < LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android" android : layout_width = "fill_parent" android : layout_height = "fill_parent" android : orientation = "vertical" > < include android : id = "@+id/head_menu" layout = "@layout/head_menu" /> < include android : id = "@+id/content" layout = "@layout/content_showweibo" /> < include android : id = "@+id/bottom_menu" layout = "@layout/bottom_menu" /> </ LinearLayout >
熟練的使用<include />標(biāo)簽就可以大大的減少我們?nèi)蘸蠖季S護(hù)工作!
3.合并沒(méi)必要的節(jié)點(diǎn)
還記得我們一開(kāi)始的那個(gè)項(xiàng)目嗎?
在高效布局里面,有一條準(zhǔn)則就是,盡量的減少節(jié)點(diǎn)!!!!如圖,我們發(fā)現(xiàn),其實(shí)LinearLayout其實(shí)啥都沒(méi)干,我們卻耗費(fèi)了那么一點(diǎn)性能去繪制了這么沒(méi)用的節(jié)點(diǎn)!
接下來(lái),我們?yōu)榱讼麥邕@個(gè)節(jié)點(diǎn),我們需要一個(gè)這么的標(biāo)簽
<merge ></merge>
修改咱們的代碼讓它,性能更好!
<? xml version="1.0" encoding="utf-8" ?> < merge xmlns : android = "http://schemas.android.com/apk/res/android" > < Button android : id = "@+id/button1" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : background = "@drawable/btn_headtita" android : drawableLeft = "@drawable/header_back" android : gravity = "center" android : layout_gravity = "center_vertical|center_horizontal" android : padding = "10dp" android : text = "@string/back" android : textColor = "#ffffff" /> </ merge >
打開(kāi)hierarchyviewer 一看！
哦也！優(yōu)化了一個(gè)節(jié)點(diǎn)！并且顯示快了那么一點(diǎn)點(diǎn)．．．
5.總結(jié)
講了,這么一大堆東西,貌似,沒(méi)怎么如何去優(yōu)化?都是在說(shuō)一些操作性的東西,其實(shí),這世上沒(méi)有絕對(duì)的優(yōu)化方案,所謂的優(yōu)化方案都是基于一個(gè)最初的基本原則出發(fā),例如,內(nèi)存用得再少一點(diǎn)!那么如何才能將這內(nèi)存用得再少一點(diǎn)做的了,這樣就需要一些最基本的方法,關(guān)于布局這部分的基本方法,我在上面已經(jīng)很詳細(xì)的說(shuō)了一遍了,當(dāng)進(jìn)行布局的時(shí)候你要牢記
1,盡量使用view自身的參數(shù)
2,減少一個(gè)布局的不必要節(jié)點(diǎn)
3,盡量重用一個(gè)布局文件
兼容問(wèn)題呢?兼容問(wèn)題出現(xiàn)的原因千奇百怪,沒(méi)有一套通用的法則!關(guān)于這點(diǎn)談一下自己的看法
1,減少?gòu)?fù)雜度,往往,兼容問(wèn)題的出現(xiàn),就是布局太復(fù)雜了,例如,我舉的那個(gè)按鈕布局,本來(lái)一個(gè)View就能完成,你卻用了三個(gè)view完成,在使用的時(shí)候,出現(xiàn)問(wèn)題的概念也大幅度提升!所以,布局以簡(jiǎn)單為本,那樣兼容問(wèn)題就可以盡量避免!
2,熟練使用工具,還記得hierarchyviewer 嗎?當(dāng)出現(xiàn)兼容問(wèn)題的時(shí)候,用這個(gè)軟件可以快速定位到錯(cuò)誤位置!
順便說(shuō)一下…
如果你覺(jué)得這篇文章幫到你…剛好你又有一個(gè)eoeandroid的賬號(hào)…那就去支持一下吧…
作者：游戲阿柴
出處：http://www.cnblogs.com/youxilua
本文采用
知識(shí)共享署名-非商業(yè)性使用-相同方式共享 2.5 中國(guó)大陸許可協(xié)議
進(jìn)行許可，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出原文連接。
微博聯(lián)系:
新浪微博
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
