Android技能-點九圖的製做

安卓開發者必備技能之-點九圖的製做

前言

不少安卓開發者以爲UI製做都是美工的事情，本身只須要完成控件的擺放和功能的實現。可是不少時候，在咱們本身寫一些小應用或者小Demo的時候，並不會有個美工在咱們身邊，而點九圖之於咱們安卓開發者來講再常見不過了，因此這個技能咱們掌握了也是很是實用的。如下博文只是帶你們入門使用點九圖，不敢在美工設計師面前班門弄斧，大神請直接略過。

點九圖

隨着智能手機的發展,咱們的應用須要適應不一樣屏幕尺寸的手機，同一幅界面會在隨着手機(或平板電腦)中的方向傳感器的參數不一樣而改變顯示的方向,在界面改變方向後,界面上的圖形會由於長寬的變化而產生拉伸,形成圖形的失真變形。

而點九（即.9），是andriod平臺的應用軟件開發裏的一種特殊的圖片形式，文件擴展名爲：.9.png，正是爲了解決咱們的圖片在不一樣尺寸屏幕上顯示失真而應運而生的一種格式。

<center></center>

<center>普通拉伸和點九拉伸效果對比</center>

<!-- more -->

通過對比，很明顯，使用點九後，仍能保留圖像的漸變質感，和圓角的精細度。

因此，使用.9圖的意義就是爲了從本身.png格式的圖片中選畫出四條線，這四條線相互交錯構成了九個部分(這就是叫作點九圖的緣由)，而後咱們的內容只能在其中重複的那個區域顯示，而咱們的圖片在拉伸過程當中只有顯示內容的部分被拉伸，從而使得咱們圖片的邊緣部分獲得了很好的保真效果。

工具

1. Android Studio (Android Studio自帶製做點九圖功能)
2. Draw9path(PC端能夠直接下載使用)
3. NinePng(一個安卓應用，使用簡單，去手機商店直接搜索就有了)

製做.9圖

在Android Studio下製做

1.打開AS，將你要製做點九圖的.png圖片放到工程目錄的drawable文件夾下（例如我準備了一張word.png），右鍵，選擇 Create 9-Patch file

2.而後會產生一個同名的以.9.png爲後綴的文件。

3.雙擊打開 **.9.png圖片

4.咱們能夠看到有四條線，就是咱們上面所說到的構成九個區域的四條線，那麼咱們就能夠直接經過拖拉着四條線選擇咱們所須要的區域便可，完成後在圖片能夠看到左和上有兩條黑線，而把鼠標放到中間，就能夠看到咱們圖片實際拉伸的區域。

5.拉伸右邊的預覽框，能夠看到咱們的.9圖在不一樣拉伸狀況下的效果。

在Draw9path下製做

若是你不是安卓開發者，只是一個美工人員，那麼Draw9Path是一個不錯的選擇。

1.安裝完成Draw9Path以後打開 draw9patch.bat,而後按 Ctrl+O 打開一張們須要製做的圖片。

2.將鼠標放到中心區域，能夠看到圖片已經被打上馬賽克，可是四周邊緣留下空白的地方，這些地方就是讓咱們劃線用的。

3.而後咱們按住鼠標，在咱們須要劃線的區域劃線便可(按住shift+鼠標左鍵爲刪除點，不支持Ctrl+Z撤銷功能)。

• 點擊右上角Show bad patches來查看咱們畫的線是否對齊。
• 點擊下邊的Show Content顯示拉伸的後的內容區域。
• 點擊下邊的Show Patches顯示當前圖片的內容區域。

4.按Ctrl + S保存圖片。

在NinePng下製做

網上已經有詳細教程，此處就不給具體的教程了。

詳看： 關於點九圖的介紹及其製做

運行效果

參考資料

• App自適應draw9patch不失真背景 -by 謙虛的天下

• 關於點九圖的介紹及其製做