Android Studio 之 制作 Nine-Patch 圖片(.9圖片)


 

•引言

  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圖片:

  1. 將圖片放入到 drawable 文件夾中,將圖片后綴改為.9.png,然后點擊圖片,直接進入點9圖片制作視圖
  2. 我們在 res/drawable 下找到這張圖片,右擊該圖片選擇 Create 9-Patch file 選項

      

      

    點擊 OK 即可創建 message_left.9 圖片,打開 .9 圖片,如下圖所示:

      

  我們可以在圖片的四個邊框繪制一個個的小黑點;

  使用鼠標在圖片的邊緣拖動就可以進行繪制:

    

   按住 shift 鍵拖動可以進行擦除:

    

   繪制完成后的效果圖如下圖所示:

    

•說明

  以下內容為轉載內容,原文鏈接:如何在Android Studio中瀟灑的使用.9.png

•在AS中使用.9.png要點

  1. 點9圖片每個邊都必須有黑線標記;
  2. 點9圖片每個邊只能一條黑線標記;
  3. 左邊和上邊的線用於限制可以拉伸的區域,右邊和下邊的線用於限制內容可以顯示的區域;
  4. AS中可以直接制作點9圖片;
  5. 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

  1. .9圖片每個邊只能一條黑線標記;
  2. .9圖片每個邊都必須有黑線標記;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM