2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

android平臺有多種不同的分辨率，很多控件的切圖文件在被放大拉伸后，邊角會模糊失真，在android平臺下使用點(diǎn)九PNG技術(shù)，可以將圖片橫向和縱向同時(shí)進(jìn)行拉伸，以實(shí)現(xiàn)在多分辨率下的完美顯示效果。

普通拉伸和點(diǎn)九拉伸效果對比:

對比很明顯，使用點(diǎn)九后，仍能保留圖像的漸變質(zhì)感，和圓角的精細(xì)度。

.9.png是一種非失真性壓縮位圖圖形文件格式。這種格式的圖片和普通圖片的區(qū)別就是其四周多了一個(gè)黑色邊框。

左邊那條黑色線代表圖片縱向拉伸的區(qū)域，上邊的那條黑色線代表橫向拉伸區(qū)域，右邊的黑色線代表縱向內(nèi)容繪制的區(qū)域，下邊的黑色線代表橫向內(nèi)容繪制的區(qū)域，右邊和下邊的線是可選的，左邊和上邊的線不能省略。

其實(shí)就是利用黑線把圖片分成九宮格格式，被黑線劃分出來的中間塊狀區(qū)域（⑨）是可拉伸的，其他地方是保持不變的。

1.使用Andorid SDK\tools目錄下的Draw9Patch.jar制作9.PNG圖片?

(1)定義拉伸區(qū)域:

默認(rèn)的拉伸是整體拉伸，其實(shí)邊框部分我們并不想拉伸，好，我們自己來定義拉伸區(qū)域，如下圖：

然后點(diǎn)擊File,導(dǎo)出為content.9.png。

在Eclipse新建Android工程，將圖片作為背景顯示出來：

<TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="正文:A?NinePatchDrawable?graphic?is?a?stretchable?bitmap?image,?which?Android?will?????automatically?resize?to?accommodate?the?contents?of?the?View?in?which?you?have?placed?it?as?the?????background.?A?NinePatch?drawable?is?a?standard?PNG?image?that?includes?an?extra?1-pixel-wide?bor????der."android:background="@drawable/content"android:textColor="#000"/>

可以看出，邊框非常的清晰。下圖是未使用.9.png的對比圖，而且也不是我們要的效果：

到這里為止，我們已經(jīng)基本會制作.9.PNG圖片了。為了知識體系的全面性和深入性，我們繼續(xù)。

(2)定義內(nèi)容區(qū)域:

是不是覺得文字和邊距挨的太近，好，我們使用right和bottom邊的線來定義內(nèi)容區(qū)域，來達(dá)到增大內(nèi)邊距的目的。

我們定義了一個(gè)很小的內(nèi)容區(qū)域，其他的地方則自動充當(dāng)邊框，從而使內(nèi)邊距顯的很大，如下圖:

在這里，我要特別說明，一開始為了增大內(nèi)邊距，很容易慣性思維，在<TextView>中申明android:padding="10dip" 之類的，我在這里勸告朋友們不要這么做，一是你將無法預(yù)知你的顯示，二是這比較混淆，因?yàn)樵O(shè)置內(nèi)容區(qū)域就是確定padding，所以我在前面部分說他們是神似。我個(gè)人認(rèn)為通過內(nèi)容區(qū)域設(shè)定padding比在布局xml中定義padding更優(yōu)雅，更簡潔！
關(guān)于Draw9Patch工具的其他使用說明，我在次不再累述，因?yàn)橐f的話太多，為了節(jié)省篇幅，請參考官方文檔。

(3)制作.9.PNG的高級技巧

對于初學(xué)Draw9Patch的人來說，這可以算是高級技巧，那就是：拉伸區(qū)域，可以不是連續(xù)的，可以不止一塊，而且是和自定義的邊框線的長度成正比。

直接上圖說明：

(4)draw9patch.bat其他功能說明

①Zoom: 用來縮放左邊編輯區(qū)域的大小

②Patch scale: 用來縮放右邊預(yù)覽區(qū)域的大小

③Show lock: 當(dāng)鼠標(biāo)在圖片區(qū)域的時(shí)候顯示不可編輯區(qū)域

④Show patches: 在編輯區(qū)域顯示圖片拉伸的區(qū)域 （使用粉紅色來標(biāo)示）

⑤Show content: 在預(yù)覽區(qū)域顯示圖片的內(nèi)容區(qū)域（使用淺紫色來標(biāo)示）

⑥Show bad patches: 在拉伸區(qū)域周圍用紅色邊框顯示可能會對拉伸后的圖片產(chǎn)生變形的區(qū)域，如果完全消除該內(nèi)容則圖片拉伸后是沒有變形的，也就是說，不管如何縮放圖片顯示都是良 好的。（實(shí)際試發(fā)現(xiàn)NinePatch編輯器是根據(jù)圖片的顏色值來區(qū)分是否為bad patch的，一邊來說只要色差不是太大不用考慮這個(gè)設(shè)置。）

2.使用Photoshop制作9.PNG圖片?

如流程圖所示，相對與方法1，只需2個(gè)步驟就可得到.9.png圖片，具體步驟為：

1. 確定切圖后直接改變圖片的畫布大小，

2. 手動將上下左右各增加1px

3. 使用鉛筆工具，手動繪制拉伸區(qū)域，色值必須為黑色（#000000）。

4. 存儲為web所用格式，選擇png-24，儲存時(shí)手動將后綴名改為.9.png

不過這種方法的缺點(diǎn)是不能實(shí)時(shí)預(yù)覽，判斷并測試?yán)靺^(qū)域的準(zhǔn)確性。

使用此方法需要注意以下2點(diǎn):

1. 手繪的黑線拉伸區(qū)必須是#000000，透明度100%，并且圖像四邊不能出現(xiàn)半透明像素；

2. 你的.9.png必須繪有拉伸區(qū)域的黑線；

否則，圖片不會通過android系統(tǒng)編譯，導(dǎo)致程序報(bào)錯(cuò)。還有，有同學(xué)疑惑解壓縮apk文件后，.9.png圖片里的黑線怎么沒了？

那是因?yàn)閍ndriod程序在把文件打包成apk的時(shí)候，程序會自動把*.9.png圖片邊緣的黑線去掉，所以解壓縮apk后看到的.9.png文件是沒有黑線的。

轉(zhuǎn)載于:https://my.oschina.net/u/1175007/blog/484589

總結(jié)

以上是生活随笔為你收集整理的Android .9.png图片的处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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