這篇文章是android開發(fā)人員的必備知識(shí)，是我特別為大家整理和總結(jié)的，不求完美，但是有用。

1.背景自適應(yīng)且不失真問題的存在

　　制作自適應(yīng)背景圖片是UI開發(fā)的一個(gè)廣泛問題，也是界面設(shè)計(jì)師渴望解決的問題，我相信我們彼此都深有體會(huì)。

　　比如,列表的背景圖一定，但是列表的高度隨著列表數(shù)據(jù)項(xiàng)會(huì)發(fā)生變化；標(biāo)題欄的背景，無論橫屏還是豎屏，高分辨率還是低分辨率，都能自動(dòng)填充滿，而且不失真等等背景問題。

　　根據(jù)以往的經(jīng)驗(yàn)，我們一般采用先切圖后拼湊的做法，這種做法本來我想在這里和大家介紹一下，其實(shí)有的時(shí)候還是很有用的，但是說起來會(huì)比較麻煩，就不說這個(gè)非重點(diǎn)了，略去，如果大家真的要介紹，在回復(fù)中說明，我再考慮一下。

　　Android針對(duì)這種情況，專門制作了一種.9.PNG格式來解決這個(gè)問題。

2.9.PNG格式。

      我不想在這里過多的討論P(yáng)NG格式的定義問題。但是.9.PNG確實(shí)是標(biāo)準(zhǔn)的PNG格式，只是在最外面一圈額外增加1px的邊框，這個(gè)1px的邊框就是用來定義圖片中可擴(kuò)展的和靜態(tài)不變的區(qū)域。特別說明，left和top邊框中交叉部分是可拉伸部分，未選中部分是靜態(tài)區(qū)域部分。right和bottom邊框中交叉部分則是內(nèi)容部分（變相的相當(dāng)于定義看一個(gè)內(nèi)邊距，神似padding功能，后面我會(huì)單獨(dú)介紹一下），這個(gè)參數(shù)是可選的, 如下圖。

　　在Android中以9.PNG格式的圖片未背景，則能夠自定義拉伸而不失真，比如系統(tǒng)的Button就是一個(gè)典型的例子。 

     其實(shí)呢，無論是left和top，還是right和bottom都是把圖片分成9塊 (邊角四塊是不能縮放的，其他的四塊則是允許縮放的)，所以叫做9.PNG。

3. 使用Draw9Patch.jar制作9.PNG圖片之定義拉伸區(qū)域。

　　前面已經(jīng)了解到9.PNG格式的工作方式，下面我們使用谷歌提供的Draw9Patch(運(yùn)行android-sdk-windows\tools目錄下的Draw9Patch.bat)來制作.9.PNG圖片。

      第一步：準(zhǔn)備要拉伸的圖片。

　　非常小的一張圖片，我希望以此為背景，中間部分填充文章內(nèi)容。

      第二步：制作.9.PNG圖片。

      打開Draw9Patch,把圖片拖進(jìn)去，如下：

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

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

       第三步：在layout文件中使用制作的 .9.PNG圖片.

       新建工程Draw9Patch，默認(rèn)主Activity為Draw9PatchActivity.java:

1 @Override
2 public void onCreate(Bundle savedInstanceState)
3 {
4   super.onCreate(savedInstanceState);
5   setContentView(R.layout.main);
6 }

　　我們把content.9.png文件拷貝到/res/drawable文件夾下，打開/res/layout目錄下的main.xml，申明如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3   android:orientation="vertical"
 4   android:layout_width="fill_parent"
 5   android:layout_height="fill_parent"
 6   android:background="#777"
 7   android:padding="8dip"
 8 >
 9   <TextView android:layout_width="fill_parent"
10   android:layout_height="wrap_content"
11   android:text="正文:A NinePatchDrawable graphic is a stretchable bitmap image."
12   android:background="@drawable/content"
13   android:textColor="#000"
14 />
15 </LinearLayout>

　　如圖，

　　我們修改text，

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3   android:orientation="vertical"
 4   android:layout_width="fill_parent"
 5   android:layout_height="fill_parent"
 6   android:background="#777"
 7   android:padding="8dip"
 8 >
 9 <TextView android:layout_width="fill_parent"
10   android:layout_height="wrap_content"
11   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 border."
12   android:background="@drawable/content"
13   android:textColor="#000"
14 />
15 </LinearLayout>

　　如圖，

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

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

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

　　我們定義了一個(gè)很小的內(nèi)容區(qū)域，其他的地方則自動(dòng)充當(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é)省篇幅，請(qǐng)參考官方文檔。

5.制作.9.PNG的高級(jí)技巧。
       對(duì)于初學(xué)Draw9Patch的人來說，這可以算是高級(jí)技巧，那就是：拉伸區(qū)域，可以不是連續(xù)的，可以不止一塊，而且是和自定義的邊框線的長度成正比。
       直接上圖說明：

6.SDK中如何處理9.PNG圖片。
      SDK專門針對(duì)9.PNG做了定義和處理，這里我們只是做個(gè)簡單的流程分析，Bitmap在讀取圖像流數(shù)據(jù)的時(shí)候，會(huì)把判斷圖片的NinePatchChunk(9Patch數(shù)據(jù)塊)，如果NinePatchChunk不為空，則是NinePatchDrawable，NinePatchDrawable則又會(huì)交給NinePatch處理：

1 setNinePatchState(new NinePatchState(
2        new NinePatch(bitmap, bitmap.getNinePatchChunk(), "XML 9-patch"),
3        padding, dither), r);

　　NinePatch檢驗(yàn)成功則調(diào)用本地方法，繪制出最終的圖片：

1 nativeDraw(canvas.mNativeCanvas, location,
2         mBitmap.ni(), mChunk, paint != null ? paint.mNativePaint : 0,
3         canvas.mDensity, mBitmap.mDensity);

7.android系統(tǒng)中大量應(yīng)用了9.PNG圖片。

     通過解壓隨便一個(gè)rom，找到里面的framework_res.apk,里面有大量的9.PNG格式文件，被廣泛的應(yīng)用起來，比如常見的有：

　　按鈕：  

　　解鎖：  

　　下拉框：  

　　標(biāo)題欄：

　　Toast：

 　　還有搜索，鍵盤，放大縮小控件，時(shí)間加減等等，我就不一一列舉。

8.最后送上一些圖例，以饗讀者，以做后鑒：

最新評(píng)論