android draw 9-path使用總結

參考：http://www.fengfly.com/plus/view-200214-1.html

http://www.helloandroid.com/tutorials/advanced-9patch-drawing-android

及api：***/guide/developing/tools/draw9patch.html

首先說一下9 path是什麼。9path是android特殊格式的png圖，它以.9.png為後綴名。

它用在使用圖片做背景時做拉伸使用的，9path會選擇一個背景圖片中的一部分在拉伸時做平鋪，其他區域保持原始大小，來組合成一張新的背景。當然也可以用在設置圖片的時候設置的圖片超過原始大小時，將其中的部分做平鋪，其他區域保持不變。

怎麼得到9path圖片？

使用android sdk中自帶的工具

雙擊打開。

點擊file，打開一張普通的png圖片。

序列 ① ：在拉伸區域周圍用紅色邊框顯示可能會對拉伸後的圖片產生變形的區域，如果完全消除該內容則圖片拉伸後是沒有變形的，也就是說，不管如何縮放圖片顯示都是良 好的。 （實際試 發現NinePatch編輯器是根據圖片的顏色值來區分是否為bad patch的，一邊來說只要色差不是太大不用考慮這個設置。）

序列 ② ：區域是導入的圖片，以及可操作區域。

序列 ③ ：這裡 zoom：的長條bar 是對導入的圖放大縮小操作，這裡的放大縮小只是為了讓使用者更方便操作，畢竟是對像素點操作比較費眼，下面的 patch scale 是序列 ④區域中的三種形態的拉伸後的一個預覽操作，可以看到操作後的圖片拉伸後的效果。

序列 ④： 區域這裡從上到下，依次為：縱向拉伸的效果預覽、橫向拉伸的效果預覽，以及整體拉伸的效果預覽

序列 ⑤： 這裡如果你勾選上，那麼當你鼠標放在 ② 區域內的時候並且當前位置為不可操作區域就會出現lock的一張圖,就是顯示不可編輯區域 ;

序列 ⑥： 這裡勾選上，那麼在④ 區域中你就會看到當前操作的像素點在拉伸預覽圖中的相對位置和效果。

序列 ⑦： 在編輯區域顯示圖片拉伸的區域;

操作：鼠標左鍵選取需要拉伸的像素點；  shift+鼠標左鍵取消當前像素點。

如下圖：新導入的png文件在周圍會多出一個像素點，這一圈一像素點是我們的操作區域

這裡需要注意一點就是，必須左邊和上邊都得有黑線，如果只有一邊有黑線的話，生成的png文件在eclipse中會報錯。另外要注意內容區域的標記不能有間斷，也就是說標記要連續且僅有一處，否則.9.png圖片在放入項目下會報錯。

主要大家注意Left 和 top 操作區域；

Top操作區域的一排像素點，表示橫向拉伸的像素點；

Left操作區的一排像素點，表示縱向拉伸的像素點；

保存：點擊file中的保存，直接寫文件名即可，默認會保存在“我的文檔”目錄下，這個目錄可以調整，保存完成之後就可以看到一個以.9.png為後綴的圖片了，如下圖：

可以看到這張圖的左側和上部都有一條黑線。

使用：直接放在你的功能下的drawable目錄或者其他drawable目錄下即可。使用的時候直接在xml文件中使用，例如：

<TextView android:id="@+id/swithCity"
    android:background="@drawable/cityswitchback" android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:text="切換城市"
    style="@style/text03" android:gravity="center">
</TextView>

 

效果圖如下：

“另外要注意內容區域的標記不能有間斷，也就是說標記要連續且僅有一處，否則.9.png圖片在放入項目下會報錯”
標記區域應該可以間斷。