.9图片的那点事儿
概述
點九圖又稱九圖,是一種png格式的圖片,其后綴為.9.png ,其與傳統png圖片不同的地方是,點九圖的四周邊緣各有1個像素寬高的區域,而且只能填兩種顏色,透明(#00000000)和黑色(#FF000000),其目的是用于對該圖片的擴展區域和內容顯示區域進行定義。
9圖說明
左邊那條黑色線代表圖片垂直拉伸的區域,
上邊的那條黑色線代表水平拉伸區域,
右邊的黑色線代表內容繪制的垂直區域,
下邊的黑色線代表內容繪制的水平區域,
右邊和下邊的線是可選的,左邊和上邊的線不能省略。
核心要點:左上拉伸,右下內容
使用系統自帶draw9patch工具制作9圖
采用NinePatch圖片做背景,可使背景隨著內容的拉伸(縮小)而拉伸(縮小)。那么如何將普通的PNG圖片編輯為NinePatch圖片呢, Android SDK/tools目錄下提供了編輯器draw9patch.bat,雙擊即可打開。
執行該工具,然后點擊“File”->“open 9-path”打開一張用于制作NinePatch圖片的圖片。在畫布的上方和左方的邊上畫線指定縮放區域,勾選“Show patches”可顯示畫定的區域,綠色為固定大小區域,紅色為縮放區域,文字會擺放在紅色區域。
制作完后,點擊“File”—“save 9-path”保存圖片,draw9patch工具會自動為圖片加上*.9.png后綴。
把制作好的圖片拷貝進項目的res/drawable目錄,然后
編寫代碼
黑色那條線是一下下點出來的,如果想消除點的話:按住shift點即可!
- Zoom: 用來縮放左邊編輯區域的大小
- Patch scale: 用來縮放右邊預覽區域的大小
- Show lock: 當鼠標在圖片區域的時候顯示不可編輯區域
- Show patches: 在編輯區域顯示圖片拉伸的區域 (使用粉紅色來標示)
- Show content: 在預覽區域顯示圖片的內容區域(使用淺紫色來標示)
- Show bad patches: 在拉伸區域周圍用紅色邊框顯示可能會對拉伸后的圖片產生變形的區域,如果完全消除該內容則圖片拉伸后是沒有變形的,也就是說,不管如何縮放圖片顯示都是良 好的。(實際試發現NinePatch編輯器是根據圖片的顏色值來區分是否為bad patch的,一邊來說只要色差不是太大不用考慮這個設置。)
使用NinePatchEditor制作.9圖片
用法基本同SDK自帶的draw9patch
使用[AndroidAssetStudio]制作.9圖片(http://romannurik.github.io/AndroidAssetStudio/nine-patches.html)
操作很簡單,進入官網,相信一看就明白了。
這個功能只是AndroidAssetStudio的一個小功能,點擊查看更多~
使用NinePng九圖神器,手機版的.9處理工具
下載地址
下載安裝九圖神器App,并啟動;
劃開左側菜單欄,打開wifi共享,并在在瀏覽器上訪問提示的地址,比如http://192.168.1.102:9889(注意,必須保證手機連接的wifi和電腦連接的wifi在同一局域網內才行,或者使用同一個路由器)
然后開始上傳圖片到手機上。并選擇修改模式(一打開軟件默認就是這個模式),點擊進去編輯。
要想預覽一下效果的話,可以點擊預覽效果按鈕,就是那個頂部三角形按鈕,圖片會自動保存,預覽時還可以設置一下文字信息等,App本身自動設置了模擬幾個主流dpi分辨率的機型。
- 不滿意,返回第三步修改,直到滿意為止~
還有一篇很棒的文章~
總結
- 上一篇: ANDROID ASSET STUDIO
- 下一篇: HTTP协议和HTTPS协议初探