【Android 界面效果9】9patch图片
??1.什么是“9妹”(9patch)?
它是一個(gè)對(duì)png圖片做處理的一個(gè)工具,能夠?yàn)槲覀兩梢粋€(gè)"*.9.png"的圖片;
??2.何為"*.9.png"?
所謂"*.9.png"這是Android os里所支持的一種特殊的圖片格式,用它可以實(shí)現(xiàn)部分拉伸;這種圖片是經(jīng)過(guò)”9妹“進(jìn)行特殊處理過(guò)的,如果不處理的話,直接用PNG圖就會(huì)有失真,拉伸不正常的現(xiàn)象出現(xiàn)。
??3.它的用途是?
?? ? ??說(shuō)到用途,這種特殊格式的png圖,我也看了網(wǎng)上的相關(guān)文章但都是用一個(gè)能自適應(yīng)的button舉例子!(如下圖)清一色抄襲.. - -、
?? ? ? ???(此實(shí)例咱們直接無(wú)視掉,在后面我會(huì)給大家灌輸游戲中實(shí)例)
?這個(gè)例子是指當(dāng)button上的字體大小改變,那么文字底下的png圖也會(huì)自動(dòng)適應(yīng)文字。
?這似乎表明做Android 軟件應(yīng)用 使用一些組件的的時(shí)候會(huì)時(shí)常用到;
?? ? ? 4.那么實(shí)際在游戲中到底如何使用呢?什么情況下去使用呢?
?? ....當(dāng)然啦,身為做游戲我一定要”9妹“利用在咱們游戲中才行,不然豈不是白研究了、經(jīng)過(guò)思考突然想到了一些情況,并且發(fā)現(xiàn)“9妹”確實(shí)在游戲開發(fā)中占有一定的分量!下面我們來(lái)先熟習(xí)“9妹”工具,然后再跟大家舉例,貼圖來(lái)說(shuō)明其用途、畢竟有圖有真相 呵呵~
?
啟動(dòng)9妹:
在你Android SDK 路徑下 X:/android sdk/tools ,你會(huì)找到一個(gè) 【draw9patch.bat】,沒(méi)錯(cuò)這就是9妹啦、官方名 NinePatch ;
?? ? ? ??
?
提示導(dǎo)入一張png圖片,然后真正進(jìn)入"9妹"的操作界面(如下圖): ? ??(圖1)
?
?? ? ?
?
?
序列?① :在拉伸區(qū)域周圍用紅色邊框顯示可能會(huì)對(duì)拉伸后的圖片產(chǎn)生變形的區(qū)域,如果完全消除該內(nèi)容則圖片拉伸后是沒(méi)有變形的,也就是說(shuō),不管如何縮放圖片顯示都是良 好的。 (實(shí)際試 發(fā)現(xiàn)NinePatch編輯器是根據(jù)圖片的顏色值來(lái)區(qū)分是否為bad patch的,一邊來(lái)說(shuō)只要色差不是太大不用考慮這個(gè)設(shè)置。)?
序列 ② :區(qū)域是導(dǎo)入的圖片,以及可操作區(qū)域。
序列 ③?:這里 zoom:的長(zhǎng)條bar 是對(duì)導(dǎo)入的圖放大縮小操作,這里的放大縮小只是為了讓使用者更方便操作,畢竟是對(duì)像素點(diǎn)操作比較費(fèi)眼,下面的 patch scale 是序列 ④區(qū)域中的三種形態(tài)的拉伸后的一個(gè)預(yù)覽操作,可以看到操作后的圖片拉伸后的效果。
序列 ④:?區(qū)域這里從上到下,依次為:縱向拉伸的效果預(yù)覽、橫向拉伸的效果預(yù)覽,以及整體拉伸的效果預(yù)覽
序列 ⑤:?這里如果你勾選上,那么當(dāng)你鼠標(biāo)放在?② 區(qū)域內(nèi)的時(shí)候并且當(dāng)前位置為不可操作區(qū)域就會(huì)出現(xiàn)lock的一張圖,就是顯示不可編輯區(qū)域 ;
序列 ⑥: 這里勾選上,那么在④ 區(qū)域中你就會(huì)看到當(dāng)前操作的像素點(diǎn)在拉伸預(yù)覽圖中的相對(duì)位置和效果。
序列?⑦:?在編輯區(qū)域顯示圖片拉伸的區(qū)域;
?
如何操作:
?? ? ? ? ? ? ? ? ??鼠標(biāo)左鍵選取需要拉伸的像素點(diǎn); ?shift+鼠標(biāo)左鍵取消當(dāng)前像素點(diǎn)。
?
?
操作區(qū)域:
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?? ? 大家看到導(dǎo)入的png圖片默認(rèn)周圍多了一像素點(diǎn),也就是這一圈一像素點(diǎn)就是咱們的可操作區(qū)域。因?yàn)?strong>下方和右方可操作區(qū)域是指定內(nèi)容的顯示區(qū)域,屬于可選區(qū)域,可不予理會(huì);但是要注意內(nèi)容區(qū)域的標(biāo)記不能有間斷,也就是說(shuō)標(biāo)記要連續(xù)且僅有一處,否則.9.png圖片在放入項(xiàng)目下會(huì)報(bào)錯(cuò)。
?? ? ?主要大家注意Left 和 top 操作區(qū)域;
?
?? ? Top操作區(qū)域的一排像素點(diǎn),表示橫向拉伸的像素點(diǎn);?
?? ? Left操作區(qū)的一排像素點(diǎn),表示縱向拉伸的像素點(diǎn);
?
?
下圖是我對(duì)圖片的操作:
?? ? ? ? ? ? ? ? ???? ? ? ? ? ? ? ? ? ? ? ?(圖2)
?? ? ?
?
?
大家看到上方和左邊的黑色像素了么?對(duì),這些是我手動(dòng)操作的地方,我這里是想讓此png圖像拉伸操作的時(shí)候,只是中間區(qū)域被拉伸。選擇上方中間區(qū)域是為了橫向拉伸的時(shí)候選取的拉伸像素點(diǎn),左邊則是縱向拉伸的;
??
那么大家現(xiàn)在回頭看一眼(圖1)然后對(duì)比(圖2),看到區(qū)別了吧!很明顯,(圖1)我們沒(méi)有任何操作,默認(rèn)整體拉伸,那么拉伸的效果很明顯的失真了...而(圖2)我們指定了拉伸的像素點(diǎn)所以只是中間的被拉伸,圖片的花邊我們保留不拉伸這樣看起來(lái)就好太多啦 娃哈哈、
然后通過(guò)“9妹”就可以保存出來(lái)一張“*.9.png”圖片,我們放在android 項(xiàng)目的res 下的 drawable 下就可以拉!
?
現(xiàn)在我就可以跟大家講下使用“*.9.png”的好處:
?
??在我們手機(jī)游戲開發(fā)的過(guò)程中,我們最關(guān)系的是生成的安裝文件、比如j2me 的jar 包,塞班的sis、sisx 以及咱們andrid中的apk都希望打包后的包越小越好、雖然現(xiàn)在的手機(jī)趨向于智能了,但是畢竟手機(jī)的容量和內(nèi)存還是有限、身為移動(dòng)設(shè)備開發(fā)者的我們對(duì)此都很看重,那么通過(guò)"9妹"處理后的圖片我們就可以省去不少的內(nèi)存和容量。
??1.?省精力和時(shí)間!
?? ?如果我們有一張50*50的類似上面那種帶花邊的png圖片,那么我們?cè)赼ndroid或者大分辨率的機(jī)器上使用的畫,肯定需要對(duì)其處理,那么要不就是讓美工的mm們給咱們重新做一張,那么通過(guò)"9妹"處理得到的“*.9.png”就會(huì)省去美工的負(fù)擔(dān)了。
??2.省內(nèi)存!
?? 如果不想用代碼來(lái)對(duì)其小圖進(jìn)行縮放來(lái)再次使用(因?yàn)榭紤]會(huì)失真),那么可能會(huì)多加了圖片,這樣一來(lái)游戲包的大小就會(huì)增加了,幾K—幾十K不等,而利用"9妹"處理的就省去了這些麻煩。
??3.減少代碼量!?
??有些童鞋該說(shuō)啦,我用代碼一樣能實(shí)現(xiàn)(圖2)的效果不失真,OK,我也知道。當(dāng)初我在J2ME平臺(tái)做RPG的時(shí)候也是利用設(shè)置可視區(qū)域等代碼來(lái)實(shí)現(xiàn)的,但是如果你用“.9.png”的方式就更簡(jiǎn)單!!!
?
不多吹 “9妹”的好處,下面我們來(lái)看看代碼如何實(shí)現(xiàn)此格式的方式和效果吧!
?
??
[java:showcolumns]?view plaincopy ·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150?
?
下圖是模擬器中的效果圖、
?
?
?? ? ? ? ? ? ? ? ? ? ??
?
左邊是正常png的縮放不同大小的情況,右邊是咱們的9妹處理過(guò)的“*.9.png”、娃哈哈,怎么樣 ?效果明顯不一樣吧!
轉(zhuǎn)載于:https://www.cnblogs.com/dongdong230/archive/2013/05/24/4183140.html
總結(jié)
以上是生活随笔為你收集整理的【Android 界面效果9】9patch图片的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 【转】Loadrunner入门(《软件性
- 下一篇: linux下通过yum安装svn及实现S