Android學習—.9圖片詳解

jopen 10年前發布 | 29K 次閱讀 Android Android開發 移動開發

.9 圖片講解

什么是.9圖片

至于什么是.9圖片這里就簡單提一下,即圖片后綴名前有.9的圖片,如pic.9.png、pic1.9.jgp,諸如此類的圖片就稱為.9圖片。

 

.9圖片的作用

①.9圖片的作用是在圖片拉伸的時候特定的區域不會發生圖片失真,至于哪些部分不會失真那么得看你的圖片是如何繪制的。

②當一張圖片作為背景時可以指定前景內容的顯示區域。如圖:

 

Android學習—.9圖片詳解

其中灰色是背景、綠色是前景。那么前景放在背景的具體位置是可以通過.9圖片進行規定的。

 

如何繪制.9圖片

①利用android開發環境中提供的工具draw9patch

draw9patch如圖 :

Android學習—.9圖片詳解

在“原始圖像顯示繪制區域”(這個名稱自己取的)其實顯示的是一張原始 圖片,并且在原始圖片的四周添加了一個像素,通俗點說就是圖片比原始圖片擴大了一圈,多出來的那一圈是透明像素。我們需要繪制的地方真是在那一圈透明像素 上進行繪制。在繪制之前先講講那一圈透明像素的含義。如圖:

Android學習—.9圖片詳解

四周分別命名為LTRB

繪制在L的區域:用于拉伸的縱向區域。

繪制在T的區域:用于拉伸的橫向區域。

繪制在R的區域:用于顯示前景的縱向范圍。

繪制在B的區域:用于顯示前景的橫向范圍。

舉例說明一下,如圖 :

Android學習—.9圖片詳解

這個圖會如何拉伸、如何顯示前景呢?最簡單的方法是直接看“拉伸預覽區”,當然更快捷是方法是你能直接看出這個區域。

拉伸區域

如圖:

 

Android學習—.9圖片詳解

紅色框區域:表示縱向拉伸的區域,也就是說,當圖片需要縱向拉伸的時候它會只指定拉伸紅色區域,其他區域在縱向是不會拉伸的。

綠色框區域:表示橫向拉伸的區域,也就是說,當圖片需要橫向拉伸的時候它會只指定拉伸綠色區域,其他區域在橫向是不會拉伸的。

顯然紅色和綠色相交的部分是既會進行橫向拉伸也會進行縱向拉伸的。

前景的顯示區域

如圖:

 

Android學習—.9圖片詳解

藍色區域:表示前景能顯示的縱向范圍。即前景的最上面可以顯示到什么地方,最下面可以顯示的什么地方。

黃色區域:表示前景能顯示的橫向范圍。即前景的最左邊可以顯示到什么地方,最右邊可以顯示的什么地方。

藍色和黃色相交部分:表示整個前景能顯示的區域。一個區域是矩形的,藍色規定了上下邊界,黃色規定了左右邊界,兩者共同當然也就規定了一個矩形區域。

 

②利用photoshop進行繪制。

如何繪制?

A、首先將畫布四周放大一個像素。

B、然后在四周繪制黑色像素(四周像素的意義參見①)。

C、保存的時候改成.9圖片的后綴名。

何時使用ps繪制?

A、圖片很大的時候用draw9patch不是很好繪制,這個時候你就可以利用ps進行繪制。

B、當你要做很多圖標的時候,你可以利用ps中的動作功能來批量完成。

小結:如果你熟悉ps的話某種程度上可以做到事半功倍。而且可以做一些模板,或者是錄制一些動作。

 

何時需要使用.9圖片

簡單點講,一張圖片被拉伸以后會發生嚴重的圖像失真時,那么就可以考慮.9圖片。那么哪些時候這種圖片格式是比較有效的呢?

①圖片有圓角并且其他某一區域可以拉伸而不影響圖片效果。

②一些圖標需要適配不同的分辨率的設備。

當然具體的使用還得看具體的要求,這里只是說了一下我最常用的,不常用的就沒有列舉了。

 

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!