AndroidStudio制作Nine-Patch【.9】圖片

使用AndroidStudio制作Nine-Patch【.9】圖片，以及為什么要制作Nine-Patch【.9】圖片【以聊天氣泡為例】

 

本文鏈接： https://blog.csdn.net/ShenQiXiaYang/article/details/80209749

新建一個Module

 

修改activity_main.xml文件，

1.  
   <?xml version="1.0" encoding="utf-8"?>
2.  
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.  
   xmlns:app="http://schemas.android.com/apk/res-auto"
4.  
   xmlns:tools="http://schemas.android.com/tools"
5.  
   android:layout_width="match_parent"
6.  
   android:orientation="vertical"
7.  
   android:layout_height="match_parent"
8.  
   tools:context=".MainActivity">
9.  
    
10.  
    <TextView
11.  
    android:gravity="center|left"
12.  
    android:background="@drawable/nine"
13.  
    android:layout_width="match_parent"
14.  
    android:layout_height="wrap_content"
15.  
    android:textSize="35sp"
16.  
    android:textColor="@color/colorAccent"
17.  
    android:text="小白陽" />
18.  
     
19.  
    </LinearLayout>

程序運行結果如下圖所示：

 

這UI體驗。對用戶來說極差。如果有這樣效果的出現，那么用戶肯定是要卸載APP的呢。

所以，就有了Nine-Patch【.9】圖片的效果。

 

Nine-Patch【.9】圖片，它是一種被特殊處理過的png圖片，能夠指定那些區域被拉伸、那些區域不可以。

 

 

在AndroidStudio2.3之前，在Android sdk目錄下有一個tools文件夾，在這個文件夾中找到draw9patch.bat文件，我們可以使用它來制作Nine-Patch圖片。

現在，AndroidStudio2.3之后，不再提供單獨的draw9patch.bat文件，這個功能直接被集成到了Android Studio當中。在Android Studio中對着任意一張png圖片右擊——>Create 9-Patch file，即可創建Nine-Patch圖片，接下來我們來制作一張Nine-Patch【.9】圖片。

---

Nine-Patch【.9】圖片介紹

 

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

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

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

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

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

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

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

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

---

 

使用AndroidStudio制作Nine-Patch【.9】圖片

即時通訊手機軟件聊天氣泡png格式圖片一張

 

將圖片放入res包下drawable包中。

右擊圖片

選中Create 9-Patch file，然后出現一個.9圖片編輯的頁面，左邊是我們制作的.9圖片樣式，右邊是.9圖片的拉伸效果。

 

繪制符合我們想要的效果的兩個小技巧：

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

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

我們想要的效果是尖尖不變，圖片的內容體要大。進行拉伸。

點擊Show patches，能看到我們想要拉伸的內容，和不想被拉伸的內容。

 

 

Nine-Patch【.9】圖片的使用和普通的png圖片使用一樣。在XML文件中對制作好的Nine-Patch【.9】圖片進行使用，重新運行程序，結果如下圖：