??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

package?com.himi;??

import?android.content.Context;??

import?android.graphics.Bitmap;??

import?android.graphics.BitmapFactory;??

import?android.graphics.Canvas;??

import?android.graphics.Color;??

import?android.graphics.NinePatch;??

import?android.graphics.Paint;??

import?android.graphics.RectF;??

import?android.util.Log;??

import?android.view.SurfaceHolder;??

import?android.view.SurfaceView;??

import?android.view.SurfaceHolder.Callback;??

public?class?MySurfaceView?extends?SurfaceView?implements?Callback,?Runnable?{??

????private?Thread?th?=?new?Thread(this);??

????private?SurfaceHolder?sfh;??

????private?Canvas?canvas;??

????private?Paint?paint;??

????private?Bitmap?bmp_old;??

????private?Bitmap?bmp_9path;??

????private?NinePatch?np;??

????public?MySurfaceView(Context?context)?{??

????????super(context);??

????????this.setKeepScreenOn(true);??

????????bmp_old?=?BitmapFactory.decodeResource(getResources(),?R.drawable.himi_old);??

????????bmp_9path?=?BitmapFactory.decodeResource(getResources(),?R.drawable.himi_9path);??

????????np?=?new?NinePatch(bmp_9path,?bmp_9path.getNinePatchChunk(),?null);??

????????//創(chuàng)建一個(gè)ninePatch的對(duì)象實(shí)例，第一個(gè)參數(shù)是bitmap、第二個(gè)參數(shù)是byte[]，這里其實(shí)要求我們傳入??

????????//如何處理拉伸方式，當(dāng)然我們不需要自己傳入，因?yàn)椤?9.png”圖片自身有這些信息數(shù)據(jù)，??

????????//也就是我們用“9妹”工具操作的信息！?我們直接用“.9.png”圖片自身的數(shù)據(jù)調(diào)用getNinePatchChunk()即可??

????????//第三個(gè)參數(shù)是圖片源的名稱，這個(gè)參數(shù)為可選參數(shù)，直接null~就OK~??

????????sfh?=?this.getHolder();??

????????sfh.addCallback(this);??

????????paint?=?new?Paint();??

????????paint.setAntiAlias(true);??

????????setFocusable(true);??

????}??

????public?void?surfaceCreated(SurfaceHolder?holder)?{??

????????Log.v("Himi",?"surfaceCreated");??

????????th.start();??

????}??

????/**?

?????*?@author?Himi?

?????*/??

????public?void?draw()?{??

????????canvas?=?sfh.lockCanvas();??

????????canvas.drawColor(Color.BLACK);??

????????RectF?rectf_old_two?=?new?RectF(0,?50,?bmp_old.getWidth()?*?2,?120?+?bmp_old.getHeight()?*?2);//備注1??

????????RectF?rectf_old_third?=?new?RectF(0,?120?+?bmp_old.getHeight()?*?2,?bmp_old.getWidth()?*?3,??

????????????????140?+?bmp_old.getHeight()?*?2?+?bmp_old.getHeight()?*?3);??

????????//?--------下面是對(duì)正常png繪畫方法-----------??

????????canvas.drawBitmap(bmp_old,?0,?0,?paint);??

????????canvas.drawBitmap(bmp_old,?null,?rectf_old_two,?paint);??

????????canvas.drawBitmap(bmp_old,?null,?rectf_old_third,?paint);??

????????RectF?rectf_9path_two?=?new?RectF(250,?50,?250?+?bmp_9path.getWidth()?*?2,?90?+?bmp_9path.getHeight()?*?2);??

????????RectF?rectf_9path_third?=?new?RectF(250,?120?+?bmp_9path.getHeight()?*?2,?250?+?bmp_9path.getWidth()?*?3,??

????????????????????140?+?bmp_9path.getHeight()?*?2??

????????????????+?bmp_9path.getHeight()?*?3);??

????????canvas.drawBitmap(bmp_9path,?250,?0,?paint);??

????????//?--------下面是".9.png"圖像的繪畫方法-----------??

????????np.draw(canvas,?rectf_9path_two);??

????????np.draw(canvas,?rectf_9path_third);??

????????sfh.unlockCanvasAndPost(canvas);??

????}??

????public?void?run()?{??

????????//?TODO?Auto-generated?method?stub??

????????while?(true)?{??

????????????draw();??

????????????try?{??

????????????????Thread.sleep(100);??

????????????}?catch?(Exception?ex)?{??

????????????}??

????????}??

????}??

????public?void?surfaceChanged(SurfaceHolder?holder,?int?format,?int?width,?int?height)?{??

????????Log.v("Himi",?"surfaceChanged");??

????}??

????public?void?surfaceDestroyed(SurfaceHolder?holder)?{??

????????Log.v("Himi",?"surfaceDestroyed");??

????}??

}??

?

?

下圖是模擬器中的效果圖、

?

?

?? ? ? ? ? ? ? ? ? ? ??

?

左邊是正常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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。