轉載請說明出處，本文來自Android菜鳥：http://blog.csdn.net/android_cai_niao/article/details/43150831
QQ：2717521606
如需要更詳細的講解，請看視頻：http://edu.csdn.net/course/detail/351
由於本視頻在上傳後學院會對其進行轉碼，而轉碼後視頻質量嚴重下降，導致花屏、馬賽克、畫面停滯等等問題，因此在學院解決這個問題之前這裏會提供原視頻下載，視頻不大，每個視頻20M左右，下載地址：http://pan.baidu.com/s/1o6xBXME ，相關的課件也是在這裏面下載。
工具介紹
這是一張png圖片，做的比較大，只是爲了方便觀看。在Android中使用NinePatch圖片的一般都是很小的圖片，因爲當內容多了的時候，背景會自動拉申來適應內容，而如果圖片做大了，內容少，則圖片也不會自動變小，所以用作NinePatch圖片的png圖片一般是比較小的。
打開Android自帶的NinePatch圖片製作工具（sdk\tools\draw9patch.bat），並且打開上面的圖片，如下：
打開圖片後，在位置1的地方，可以看到圖片的周圍多了1圈1像素大小的透明的點，這就是我們要進行NinePatch圖片製作的地方。
1. 位置1：編輯區。
在這個區域來設置圖片的“拉申區域”和“內容區域”。注：“拉申區域”意思是哪個區域是可以進行拉申的；“內容區域”，如一個Button、TextView，Button中有文字，則這些文字所在的區域即爲內容區域。又如一個Linearlayout，這個佈局裏面的內容顯示的地方也是內容區域。
2. 位置2：拉申預覽區域。
這是模擬垂直拉申、水平拉申、垂直水平都拉申的3種情況的預覽圖。從上圖中可知，“Zoom”是%100，也就是原圖的編輯區的大小是原圖大小，再看拉申預覽區域，垂直拉申時，上下兩條邊的線條寬度被拉高了一倍，因爲“Pathch scale”設置的是2x，也就是拉申爲原來的兩倍，垂直拉申後高度就是原來的兩倍了，水平拉申後則寬是原來的兩倍了，兩邊都拉申後則寬高都是原來的兩倍。從上圖可知，水平拉申後，左右兩條邊的線條寬度比原來寬了一倍，而兩邊都拉申的預覽圖可知4條邊的線條寬度都被比原來寬了1倍。
3. 位置3：Zoom - 編輯區顯示大小的調整，如果編輯區太小不好編輯，則可以調整這裏把編輯區放大
4. 位置4：Patch scale - 拉申倍數，調整拉申倍數可以方便的查看拉申不同倍數後的效果
5. 位置5：Show lock - 顯示鎖定的區域，即不可編輯的區域
6. 位置6：Show patches – 顯示拉申區域
7. 位置7：Show content – 顯示內容區域
8. 位置8：顯示使用提示信息
工具實戰
1. 把編輯區視圖顯示調大，如下：
2. 爲了方便查看拉申後的效果也把拉申比例調大一些：
3. 顯示不可編輯區域，如下圖，當把鼠標移到圖片上時就會顯示不可編輯區域，即紅色框中的區域，現實中最外的紅色框是沒有的，這裏加一個紅框只是爲了方面觀看，從 下圖可看到紅框外由一個像素大小的透明線條圍了起來：
4. 顯示會被進行拉申的區域，如下的粉紅色區域即是會被拉申的地方，其他的地方將不會被拉申，也就是說不管怎麼拉申，變的只是粉紅的區域，其他的區域的形狀什麼的 都不會發生變化：
注：對於會進行拉申的區域很多人都是這麼說的，其實應該用一種更加準確的說法是“粉紅色區域包括粉紅色區域的前後左右的部分都是拉申部分，其他的纔是不會被拉申 的部分，我再加些邊框後效果圖如下：
上圖中粉紅色區域，和它上下左右的4個藍色框區域都是拉申的區域，其他還有4個紅框的區域則是一直保持不變的區域。從這張圖可看到總共有9個區域，所以稱這樣的 圖片爲NinePatch圖片。
5. 顯示內容區域，如下圖中藍色的區域即內容區域，如一個TextView設置了下面的圖爲背景，則文字顯示的區域爲下面的藍色區域：
6. 畫黑線的快捷方式
如上圖，把鼠標移到編輯區的灰色區域，上、下、左、右都可以，如上圖移到了上方的灰色區域，此時看到了兩條灰色線，拉動這兩條灰色線即可畫出黑線，如下：
如上圖，拖動右邊的線向左拖，發現左邊自動出現了一條黑線，繼續向左方向拖是漸漸的消除這條黑線，如果一直拖到與最左邊的灰色線重合，則這一條黑線都被消除了，如下圖：
經常的情況是我們要自定義的畫出黑色線，也就是可以從任何地方開始畫黑色的線，方式也很簡單，在灰色的地方按下鼠標開始拖動即可，如下：
如上圖是從隨意的一個位置按下鼠標向右拖動拖出來的一斷黑色線。上、下、左、右四條邊的黑色線都可以用類似的方法來畫。當然了，也可以在透明的線上直接點或者 拖動來畫黑色線，如下：
如上圖就是在透明的線上隨意位置按下鼠標向右拖動，當鬆開鼠標時黑色線就出來了。
刪除黑色線，前面說了一種刪除黑色線的方式，也可以使用Shift + 點擊/拖動 來實現，如下：
7. bad patches(壞拉申)
點擊這個按鈕，如果有壞的拉申，則會顯示出紅色框，這說明你需要修改你的黑色線，直到沒有紅色的框，不然的話你的這張NinePatch圖片在使用時將會有壞的拉申。
製作NinePatch圖片實戰
製作拉申區域
爲了方便知道使用NinePatch圖片帶來的好處，這裏再使用另一張圖片來進行解講，如下：
有時發現打開png圖片後發現四周的透明區域不太規則，不是說只會在原圖形的周圍多一像素的空間而已嗎？這時拉動一下Zoom的比例的可以了，如下圖：
這裏我們要實現拉申時線條的寬度不變，四個圓角不變。很多人在作用NinePatch圖片時都是畫一條一條的黑線，其實是他們沒能夠理解透NinePatch圖片的製作，如這裏 要達到拉申時線條的寬度不變、四個轉角不變，只需要點兩個點就夠了，如下：
從上圖的拉申預覽圖可以看到線條寬度沒變，4個圓角也沒有變。有了前面的理論就容易理解了，在進行水平拉申時，拉申的是垂直的那條線的區域，垂直線的兩邊不會被 水平拉申的，如下圖紅框是會被水平拉申的區域，它的左右兩邊的區域將保持不變：
相應的，垂直拉申時拉申的是水平的那條線的區域，這條線的上下兩部分是不會被垂直拉申，如下圖中的紅色區域會被拉申：
製作內容區域
如果圖片只是拉申的功能，上面的知識就夠用了。製作內容區域是可選的，如果你沒有這個需求就不需要製作內容區域。如果這個圖片要用作某些容器的背景，如用作TextView的背景時，TextView中的文字的位置應該是怎樣的呢？
如：公司要求這樣：需要文字是靠矩形的底部對齊的，應該怎樣製作符合這樣要求的NinePatch圖片呢？
這裏還是使用上圖的基礎上製作，如下：
如上圖，在下方畫了一條黑錢，則這條黑線就定義了紅框這個區域，當然，上圖中的紅框、藍框是我畫上去的爲了方面講解。這樣內容只會出現在紅框中，而不會出現在它左右兩邊的藍框中。從右邊的拉申預覽圖也可以看到效果，把“Show content”勾上，則拉申預覽圖就可以看到藍色的區域，這些區域就是文字出現的地方。
接着來設置文字靠矩形的底部對齊，其實這樣說不太對，因爲當內容小於NinePatch圖片設置內容區域的高度時，內容就小於內容區域，那這時內容應該顯示在內容區域的哪裏呢，這時就要配合gravity來調整。NinePatch圖片編輯如下：
如上圖在右邊畫了一條黑線，這條黑線偏下，它定義了內容在垂直方向的位置是偏下的，底部和右邊這兩條線的交叉部分，如上圖的畫了斜線的紅框即爲內容區域，文字將顯示在這個區域。
其實這樣理解內容區域是錯誤的，因爲圖片是會進行拉申的，正確的理解應該是這樣的：底部的黑線和右邊的黑線是給內容設置padding，這樣比較好理解，如上圖設的內容設置用padding來理解如下圖：
在Android的佈局的TextView使用這張背景，代碼如下：
效果圖如下：
可看到字體的左右是有一些padding，而上下是方向的padding則是上方的比較大，看起來就像是文字在底部對齊一樣。因此，NinePatch圖片做的好，連TextView在佈局中的padding設置都省了。
學習例子
更多的NinePatch圖片的製作例子，可查看AndroidSDK目錄下的圖片，如：sdk\platforms\android-19\data\res\drawable-ldpi，使用搜索查找NinePatch圖片，然後看官網的圖片都是怎麼點這些黑線的，有什麼值得學習的，爲什麼別人這麼點？多看，對於理解NinePatch圖片的製作一定大有幫助的，搜索結果如下圖：
如用ps打開這些圖片，並放大觀察：
從這張圖片可以看到左邊、上邊都點了兩個黑點，他的意圖是什麼呢？通過上面的學習分析，它這就是設置了拉申區域在圖形中間的加號的四周，即不管怎麼拉申，圖形中間的加號是不會變大、變形的，也就是不會發生改變的。又如下面的圖是爲了保持中間的減號不被拉申：
很多這樣的好的NinePatch圖片，如：
如果某個NinePatch圖片你看不明白他的意圖，則可以把它複製到你的Android項目中，然後使用它，看看是什麼效果即可知其意圖。如有一張這樣的NinePatch圖片：
你想象不到使用它會是什麼效果吧？這就是人家的高招，如果你不去看別人的，你自己就不會懂得像人家這樣去製作NinePatch圖片，所以要多看，如應用上圖的NinePatch圖片效果如下：
再看下面兩張這樣的NinePatch圖片：
它就是一條透明灰色的水平線，和一條黑色的垂直線，沒有必要做成NinePatch啊，爲什麼呢？
使用這條線看看什麼效果，如下：
很經典的一條線，所以需要用到這條線時，我們爲何還要自己去製作呢，直接使用：android:background="@android:drawable/menu_separator"，這樣做需要注意，可能在不同的版本這條線可能顯示效果不一樣
這張就是保留髮光的光暈不會被拉申，拉申的是中間白色的區域。文字內容也只會出現在白色區域
這張是爲了保留右邊的箭頭不被拉申
看着是個橢圓，使用後效果爲：
再看看這些NinePatch圖片的意圖是什麼？
答：這張圖片也很高明，放大鏡永遠不會被拉申，水平方向的拉申是頂部右邊的那個點，關鍵是垂直拉申了，這是左邊的那個點，拉申的是這個點，而這個點是透明的，所以垂直拉申時不會對下面有顏色的圖片的形狀有影響。
再來看這張，完全無法想象使用後會是什麼效果，只能實際使用去直觀的看了：
用作TextView的背景後爲：
這是scrollbar_handle_vertical.9.png，使用在iamgeView後爲：
看上圖NinePatch圖片的兩邊明明是透明度比較高呀，可效果爲什麼是邊線的顏色比較深？
還有這麼小的NinePatch圖片：
btn_default_transparent_normal.9.png
使用後的效果爲：
美啊！
再看這個透明的NinePatch圖片又有什麼意圖：
使用的效果爲：
看了效果才明白其意圖，就是圖片就設置好了paddingLeft的，如下調用View的寬度後的效果：
不理解原理的人，以爲下面的點就是內容區域，就會認爲內容應該顯示在圖片的右邊，實際上不是，跟據前面所學，下面的點是設置padding的，也就是paddingLeft是固定的矩離，如下圖：
如果是這樣的話，那paddingRight就是0，所以我們在保持長度不變的情況下增加文字，如下：
哈哈，證明了我的猜想是對的呀！！
如果NinePatch圖片真的是設置了paddingLeft的值的話，那我在代碼中把paddingLeft設置爲0，看看效果：
哈哈，猜想又是對的！！！學習只用腦子想是不是對的，不要猜想，要用實踐去證明！！
再來看一張使用相同原理的圖：
效果爲：
這達到了drawableRight的效果，並且圖片已經是和文字居中的
看着像是個圓形，其實他它是個圓角矩形，真是想不到啊！做圖的人太牛了！把圖片的容量做到了最小，節省apk的大小啊！
再來看這張又有什麼高明之處呢？
divider_horizontal_dark.9.png
不知道高明在哪裏。但相信Google的人不會這麼無聊的，肯定有高明的地方。
這個就一像素的顏色，更加不明白其意圖何在。
此時想我起我曾經在用友面試時，一位技術官問我，在ListView中是使用圖片做分隔線好還是直接使用Shape圖形好，技術官後來說是使用圖片的好，因爲Android的圖形渲染機制不夠好，如果直接使用Shape效率就會比較低、比較耗內存。這樣可以解釋爲我們儘量的使用圖片，而不要直接使用代碼來畫圖形。
這個就是爲了圖片的圖形保持不變，如果只是這樣那在使用圖片時用wrapcontent即可，它這樣做又會帶來什麼好處？答：爲了可以使背景圖片適應任何的控件大小，而且保持圖形大小不變。適應大小是爲了使點擊事件更容易發生，因爲控件大的話點中的機率就會大。
Android中自帶了這麼多的好的NinePatch圖片，我們要多看，這樣使用的時候才知道有這樣的圖片，這樣也省去了我們的製作，android自帶的都是專業製作的，必須好用，但是需要注意的是，同一張圖片在不同的Android版本中可能效果會被修改，所以保險的做法是把圖片從SDK複製到自己的項目中，這樣就能保證在各個Android版本中都顯示一致。