教你快速使用AndroidStudio制作出一張合格.9圖片

前言####

在實際的Android開發項目中,為了適配不同分辨率的Android設備,經常會碰到制作.9圖片的情況,由于這種格式的圖片可以設定一張圖片中哪些區域可以拉伸,哪些區域不可以拉伸,同時可以把內容顯示區域的位置設置清楚。.9圖片制作的工具有很多,但是AndroidStudio就自帶.9圖片制作的工具,但是網上關于如何具體用AndroidStudio制作.9圖片的過程卻非常少。


.9圖片介紹####

F0745CC0-9403-491D-A0E3-FABDB5650482.png

.9圖片和一般的png圖片相比,會多出四條黑線,如果所示共有
上(區域1)、左(標識2)、 右(標識3)、 下(標識4)四個區域,其中

(1)標識1和標識2 :表示圖片可以拉伸的區域

標識1: 圖片水平方向可以拉伸的區域,非黑色區域是不會進行拉伸的
標識2: 圖片豎直方向可以拉伸的區域,非黑色區域是不會進行拉伸的

如圖:圖片水平方向拉伸時,只有標識1的圖片區域可以進行拉伸,其它區域將保持原來的像素而不會由于拉伸而變形;

圖片豎直方向進行拉伸時,只有標識2圖片區域會進行像素拉伸,其它豎直方向的圖片區域將保持原來的像素而不會由于拉伸而變形。

(2) 標識3和標識4:表示內容可以拉伸的區域

標識3:表示豎直方向內容可以顯示的區域
標識4:表示水平方向內容可以顯示的區域

如圖:豎直方向上,標識3所表示的區域(圖片的整個高度)都可以展示內容。
水平方向上,標識4所標識的區域,可以展示內容,水平方向其它位置中內容將不會展示出來。


使用AndroidStudio制作.9圖片####

介紹完了.9圖片后,那么我們就來制作一張.9圖片吧

我們最近項目中要制作一張.9的占位圖,該占位圖的尺寸是16:9,要求在圖片URL無效的時候展示,任何16:9的圖片都能使用該占位圖,要求是中間的小圓圈icon和“暫無圖片”4個文字不能進行拉伸。

m_time_default_16_9_icon.png

(1)把該圖片放置在Drawable目錄下,右擊該圖片,點擊create 9-patch file

36D472C1-28EE-48B5-8213-7FF676D13BF8.png

(2) 然后將出現一個.9圖片編輯的頁面,左邊是我們制作的.9圖片樣式,右邊是.9圖片的拉伸效果。如圖所示,如果我們不做任何操作,圖片中的小圓圈icon和文字將會在拉伸后而變形。

304F3D95-AA5B-40B7-90B8-926D060E029D.png

(3)當鼠標放在.9圖片上時,在.9圖片的邊界將會出現4條直線,要繪制水平方向的黑線時,會出現豎直的兩條直線,要繪制豎直方向的黑線時,會出現水平方向的兩條直線。我們可以拖動直線來給圖片設置黑線。

(4)另外當我們要繪制兩條不連續的黑線時,我們可以點擊圖片以外的區域,再次出現兩條直線,并通過拖動直線,再次繪制第二條黑線。

(5)掌握了上面兩個技巧后,下面就剩下如何來繪制符合我們要求的.9圖片了,
要保證中間的小圓圈icon和“暫無圖片”4個文字不能進行拉伸,內容區域這里沒有限制,內容可以在整個圖片區域展示,如下圖所示,那么我們只要給紅線表示的區域繪制成黑色線條就行行了。

FFC42D1C-6D0D-491D-A7C5-DE8EB285604D.png

(6)最后來看看效果吧,怎么拉伸icon和文案都不會進行拉伸,是不是很簡單呢?

Gif_20170521_164330.gif
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容