•引言
9.png 可以保證圖片在合適的位置進行局部拉伸,避免了圖片全局縮放造成的圖片變形問題。
但是由於Android Studio對於.9圖片的檢查更加嚴格,所以不符合AS要求的.9圖片會帶來很多坑。
不過,AS也提供了制作點9圖片的便捷入口,並且會檢查你的.9圖是否有不合理的拉伸區域。
•為什么要制作 .9 圖片?
Nine-Patch 圖片到底有什么實際作用呢?
我們通過一個例子來看一下;
從網上下載一張氣泡樣式的圖片 message_left.png,如下圖所示:
將該圖片放置到 res/drawable 文件夾下;
我們將這張圖片設置為 LinearLayout 的背景圖片,修改 activity_main.xml 中的代碼,如下所示:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/message_left"> </LinearLayout>將 LinearLayout 的寬度指定為 match_parent,然后,將他的背景圖片設置為 message_left;
現在運行程序,效果圖如下所示:
可以看到,由於 message_left 的寬度不足以填滿整個屏幕的寬度;
整張圖片被均勻地拉伸了;
這種效果非常差,也是后我們就可以使用 Nine-Patch 圖片來進行改善;
•如何制作.9圖片?
首先《第一行代碼中》的方法過時了,這項功能已經被集成到AS當中了;
兩種方式制作.9圖片:
- 將圖片放入到 drawable 文件夾中,將圖片后綴改為.9.png,然后點擊圖片,直接進入點9圖片制作視圖
- 我們在 res/drawable 下找到這張圖片,右擊該圖片選擇 Create 9-Patch file 選項
點擊 OK 即可創建 message_left.9 圖片,打開 .9 圖片,如下圖所示:
我們可以在圖片的四個邊框繪制一個個的小黑點;
使用鼠標在圖片的邊緣拖動就可以進行繪制:
按住 shift 鍵拖動可以進行擦除:
繪制完成后的效果圖如下圖所示:
![]()
•說明
以下內容為轉載內容,原文鏈接:如何在Android Studio中瀟灑的使用.9.png
•在AS中使用.9.png要點
- 點9圖片每個邊都必須有黑線標記;
- 點9圖片每個邊只能一條黑線標記;
- 左邊和上邊的線用於限制可以拉伸的區域,右邊和下邊的線用於限制內容可以顯示的區域;
- AS中可以直接制作點9圖片;
- AS中點9圖片要放在drawable中而不是mipmap中;
•.9.png中四條黑線的意義
1:黑色條位置向下覆蓋的區域表示圖片橫向拉伸時,只拉伸該區域
2:黑色條位置向右覆蓋的區域表示圖片縱向拉伸時,只拉伸該區域
3:黑色條位置向上覆蓋的區域表示圖片縱向顯示內容的區域(在手機上主要是文字區域)
4:黑色條位置向左覆蓋的區域表示圖片橫向顯示內容的區域(在手機上主要是文字區域)
•.9.png制作工具解析
- Zoom : 左邊原圖的縮放比例
- Patch scale : 右邊 .9圖 縮放后的效果
- show lock : 勾選后,鼠標放到原圖上,會顯示紅色斜線部分,表示 .9圖 鎖定的區域
- show content :
- 勾選后,右邊圖中的藍色區域表示可以填充內容,綠色區域便是不可填充內容
- 移動原圖中右邊和下邊的修改可填充內容的區域,規則如上
- show patches : 顯示原圖中可以縮放的區域
- show bad patches : 顯示原圖中不規范的縮放區域
- 比如帶弧度中部分是不應該縮放的,如下圖中紅線標記的區域
- 遇到這種情況,需要調整1,2位置的黑線,不標記弧度部分,紅線就會取消
•.9.png的常見bug
- .9圖片每個邊只能一條黑線標記;
- .9圖片每個邊都必須有黑線標記;