3分鐘學習點九圖的製作和使用(聊天氣泡的實現)

我們都知道Android平臺有多種不同的分辨率,很多控件的切圖文件在被放大拉伸後,邊角會模糊失真,有的甚至會變形。那麼如何去避免這種情況呢?

答案是:使用 點九圖(xxx.9.png) 代替那些隨着分辨率需要拉伸改變、或者隨着程序運行需要改變的圖片,可以避免變形、模糊失真等不良效果!

使用點九圖的優勢:

  • 拉伸效果:在Android平臺下使用點九PNG技術,可以將圖片橫向和縱向同時進行拉伸,以實現在多分辨率下的完美顯示效果

在這裏插入圖片描述

  • 顯示效果:使用點九圖可以減少由於屏幕素質差而導致的橫紋,如下,點九圖的橫紋明顯少於PNG格式(仔細觀察)
    在這裏插入圖片描述
  • 減少工程量&安裝包大小:使用點九圖,可以用一套界面去適配各種分辨率的屏幕,並且可以減少安裝包的大小

製作(兩種方法):

這裏不講SDK下的工具draw9patch,因爲我覺得AndroidStudio裏面自帶的更方便

工具:PS(或者其他可以編輯圖片的工具)、AndroidStudio

準備工作:

  1. 把你想要製作成點九圖的圖片 四周都加上一個像素(px)的空白區域

    PS打開畫布大小,快捷鍵:Ctrl+Alt+C,把相對取消勾選,然後把單位改成像素,寬度和高度都在原有的基礎上**+2**,然後點擊確定,PS就會自動幫你在你圖片的上下左右加上1像素的空白位置
    在這裏插入圖片描述

全程PS製作:(無預覽圖)

首先要知道,點九圖肯定是想讓那些純色(或者漸變色),不會被拉伸變形的地方作爲可拉伸區域,那些有圖像的地方不讓他去拉伸。

上下的黑邊:黑邊所在區域的 縱向 作爲可拉伸區域(如下圖)

左右的黑邊:黑邊所在區域的 橫向 作爲可拉伸區域

填充好了黑色以後,直接保存圖片爲xxx.9.png的格式複製到你項目的 res/Drawable 就可以了!(也可以先保存爲PNG格式,然後重命名修改)

注意:手繪的黑線拉伸區必須是#000000,透明度100%,並且圖像四邊不能出現半透明像素

在這裏插入圖片描述

PS+AndroidStudio製作:(可視化操作,有預覽圖)

  1. 保存圖片,文件拓展名改成 xxx.9.png ,把這張點九圖複製到你項目的res/Drawable文件夾中

  2. 點開圖片:點開圖片,左下角切換成點九圖的編輯模式,然後四個CheckBox是一些區域的顯示(比如你設置的可拉伸區域)
    在這裏插入圖片描述

  3. 然後就可以開始設置這張點九圖的拉伸區域了(邊緣1像素的位置是你的操作區

    你需要用鼠標在圖片最邊緣那1像素的空白位置拖出一根線來(如圖,橫向區域也一樣拖),黃色的區域就代表可拉伸區域,並且可以設置多個可拉伸區域,這樣可以保證圖像的佈局不發生變化,比如這張圖片上面中間部分,可以讓無論圖片怎麼拉伸,都處於圖片的上面中間(如果圖片比較大建議把視圖放大一些再拖)

在這裏插入圖片描述

大功告成!我是縱向設置了兩個區域,橫向設置了一個區域,可以看到右邊的拉伸預覽圖,圖片上圖像的佈局和原圖一樣,並且沒有被圖片的拉伸所影響!

在這裏插入圖片描述
注意:由於點九圖的特性是在拉伸圖片的時候保證圖片的效果,而不包括縮,所以點九圖一般是越小越好

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章