Android studio中.9圖片的含義及制作教程


記得剛學Android的時候對.9圖片很懵逼,當時同學使用android studio制作.9圖片的時候感覺好神奇,但是年少輕狂的我並沒有學會哦。剛好今天接觸到這個.9圖片,就打算今天把這個弄懂,不對的地方望指點,下面就隨我一步一步詳細的來繪制.9圖片之ic_launcher.9.png:

一、9patch圖片的概念

 

1、9patch圖片是andriod app開發里一種特殊的圖片形式,文件的擴展名為:.9.png
2、9patch圖片的作用就是在圖片拉伸的時候保證其不會失真。所以我們使用.9圖片,讓圖片在指定的位置拉伸和在指定的位置顯示內容,這樣圖片的邊邊角角就不會出現失真了。

 

二、使用.9圖片和不使用的差異

1、9patch和一般圖片的區別在於.9圖片有四條黑邊,而一般的圖片沒有,這四條黑邊就是用來拉伸和指定顯示位置的。
2、使用.9圖片后,整個圖片應該是包裹着你想要顯示的內容的,而沒有使用的話整個控件布局看起來特別糟糕。

1.上圖使用了.9圖片作為textview的背景

2.上圖是使用系統的ic_launcher圖片顯示的效果

 

 

三、繪制.9圖片

  • 繪制之前先來說一下.9圖片的四條黑邊的意義,每條黑邊的意義都不一樣。

 

頂部:在水平拉伸的時候,保持其他位置不動,只在這個點的區域做無限的延伸

左邊:在豎直拉伸的時候,保持其他位置不動,只在這個點的區域做無限的延伸

底部:在水平拉伸的時候,指定圖片里的內容顯示的區域

右邊:在豎直拉伸的時候,指定圖片里的內容顯示的區域

3.   .9圖片的制作

詳細解釋一下這里的四條黑邊:
1.首先看到圖3,ic_launcher圖片的上邊有一條小小的黑邊,黑邊的長度對應的區域就是上面一條窄窄的綠條,在布局的時候會根據圖片上的內容自動橫向拉伸這條窄窄的區域,圖片橫向的其他位置保持原狀不進行拉伸,從而不失真。(記住這時候不要去管下面圖片的黑邊)
2.再看圖3的左邊有一條小小的黑邊,黑邊的長度對應的區域就是上面一條較寬的綠條,在布局的時候會根據圖片上在縱向的內容自動縱向拉伸這條較寬的區域,圖片縱向的其他位置保持原狀不進行拉伸。(記住這時候不要去管右邊的黑邊)
3.右邊的黑邊:指定圖片里的內容顯示的縱向區域
4.下邊的黑邊:指定圖片里的內容顯示的橫向區域

 

1、使用Android Studio工具制作.9圖片

Android Studio中天生就自帶了.9的繪制工具
 
 

將一張ic_launcher.png圖片放到drawable文件夾下,右鍵這張圖片,選擇create 9-Patch file...

 

這里會選擇.9圖片的路徑和命名(這里就不管,默認保存),點擊OK

drawable下就多了一張.9.png的圖片。可以把原圖ic_launcher.png刪了。
 
雙擊點擊.9.png,我們可以看到左邊是對圖片的操作界面,右邊則是實時的顯示界面。接下來,我們要對圖片進行描邊了,描邊之前一定要清楚四條邊的含義,上左控制拉伸位置,下右控制內容顯示位置。
 
描邊時,按下鼠標左鍵,然后放在圖片邊界移動就能描邊了,要是想要去掉黑邊,可以按下Shift鍵,然后點擊鼠標左鍵。
 
我們先繪制左上兩邊,控制拉伸位置,如下繪制完成了之后,可以看右邊的閱覽圖,明顯比沒有繪制時邊角的清晰度更高。
 
繪制完了圖片的拉伸區域之后,我們還需要繪制圖片包裹的內容的顯示區域,如果沒有繪制的話,里邊的內容是會從左到右依次顯示,這樣有時達不到我們想要的效果。
 
通過對四條邊的描黑邊處理,我們就成功了避免了使用圖片時拉伸邊角的問題,拉伸的都是我們設置的區域,顯示的也是我們想要顯示的位置。
 
2、介紹一下點九圖片繪圖區下方的幾個選框和滾動條的作用

 1.首先我們要把圖片下方的show bad patches勾選上,此時(如果點九圖片繪制有誤的話)會看到圖片出現
 報錯的區域
 2.說明一下:圖片下方的show content如果勾選上,會看到右側的小圖中出現藍色的區域,代表的是可以自動
 拉伸的部分。
3.如果發現你的點9圖片太小或者極小,可以拖動圖片下方的zoom放大圖片,然后就可以精確操作了。

3、使用Eclipse工具制作.9圖片
  • 在Eclipse中有提供專門的工具來制作.9圖片。在你的sdk目錄下的tools目錄下,有一個叫做draw9patch.bat的文件,雙擊打開就可以使用了。
  • 打開之后,我們可以直接將圖片拖動到該工具之中,或者點擊File,然后在導入進來。操作和android studio一樣。
 

四、9patch圖片使用總結

  • 要想學會繪制.9圖片一定要明白四條黑邊的意義,還有一定要會使用draw9patch工具。
    開發過程中,大部分的.9圖片還是要我們程序員自己去繪制,當然你在公司的美工比較多的除外。所以學會繪制.9圖片還是很重要的。
    使用.9圖片遇到錯誤千萬別着急,先看一下錯誤提示,然后檢查一下你繪制的圖片有沒有問題,實在解決不了可以發出來大家一起想辦法。

 

五、關於在Android Studio中使用.9圖片出錯解決方案


用過Android Studio的童鞋都知道,AS中對.9的圖片增加了安全檢查機制,你的.9圖片只要有不規范的地方都會給你編譯報錯,本人剛開始用AS時就深受其苦,后來才找到了解決辦法。
解決方式主要有兩種:
一是讓AS取消掉對.9圖片的安全檢查。找到你app目錄下的build.gradle文件,打開之后你可以在buildToolsVersion屬性之下添加取消安全檢查的兩行代碼。
// 取消掉系統對.9圖片的檢查
aaptOptions.cruncherEnabled = false
aaptOptions.useNewCruncher = false
二是 .9圖片編譯報錯,那肯定說明你的.9圖片制作不完善,你可以檢查一下圖片哪里沒繪制好。你可以檢查一下是否有重復繪制黑邊,或者有哪條邊沒有繪制。這里注意:AS中要求.9圖片的四條邊都會繪制。

 

.9.png中四條黑線的意義:

1黑色條位置向下覆蓋的區域表示圖片橫向拉伸時,只拉伸該區域

2號黑色條位置向右覆蓋的區域表示圖片縱向拉伸時,只拉伸該區域

3號黑色條位置向左覆蓋的區域表示圖片縱向顯示內容的區域(在手機上主要是文字區域)

4號黑色條位置向上覆蓋的區域表示圖片橫向顯示內容的區域(在手機上主要是文字區域)

 

 轉載: https://blog.csdn.net/sunbinkang/article/details/77331718#comments_13483214


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM