Android .9 图片，顾名思义，就是图片后缀名前有 .9 的图片,如 avatar.9.png 这样的图片

.9 图片能干嘛？

在图片拉伸的时候特定的区域不会发生图片失真，而不失真的区域可以由我们自己绘制

.9 图片用什么做？

工欲善其事，必先利其器，做 .9 图片的工具有

1. Android Studio (推荐，现在可智能了)

   

   Android Studio 自带，打开方式是在某个 .png 的图片上点右键，就能看到一个 Create 9-Patch files...

   

2. NinePatchEditor

   

   官网地址 http://weblookandfeel.com/nine-patch-editor/

3. PhotoShop 这个应该众所周知了，怎么做 .9.png 自己百度吧

.9 图片怎么做？

.9 图片只有一个要诀，就是 左上拉伸，右下内容

我们使用 Android Studio 来制作一个 .9.png 图片

1. 创建一个 空的 Android 项目 cn.twle.android.NineImage

2. 修改 res/values/strings.xml 内容添加一个字符串

   <?xml version="1.0" encoding="utf-8" ?>
   <resources>
       <string name="app_name">NineImage</string>
       <string name="hellos">简单教程</string>
       <string name="hello">简单教程，简单变成</string>
   </resources>
   

3. 下载下面这张图片 /static/i/android/btn_bg.png

   

   然后放到 res/drawable 目录下

4. 修改 activity_main.xml 添加一个 TextView 然后设置背景为刚刚下载的图片

   <?xml version="1.0" encoding="utf-8" ?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical" 
       android:layout_width="match_parent"  
       android:layout_height="match_parent">
   
       <TextView
           android:layout_margin="16dp"
           android:textColor="#ffffff" 
           android:gravity="center"
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"
           android:background="@drawable/btn_bg"
           android:text="@string/hellos" />
   
       <TextView
           android:layout_margin="16dp"
           android:textColor="#ffffff"
           android:gravity="center"
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"
           android:background="@drawable/btn_bg"
           android:text="@string/hello"/>
   
   </LinearLayout>
   

5. 运行结果如下

   

   内容少的时候还正常，一多起来就惨不忍睹了

   图片被拉伸变形了,很明显,这不合我们的需求,于是乎我们需要对这个图片来进行一些处理,让圆角部分的不随长度拉伸,中间部分才拉伸

   

6. 在 btn_bg.png 图片上点右键，然后选择 Create 9-Patch files... 创建一个 .9.png 的图片, 然后双击 btn_bg.9.png 打开 .9.png 编辑框

   

   右面的预览区域分别是：纵向拉伸，横向拉伸，横纵都拉伸的预览

7. 好了，接下来我们开始处理这张图片， 调 Zoom 和 Patch scale 设置自己适合的缩放比例,勾选 show patch 可以让 Zoom 足够大,因为后面我们需要处理"斑马线"

   

8. 接下来在 "斑马线" 上进行操作就可以了

   黑色那条线是一条条拖出来的,如果想消除点的话:按住 shift 点即可

   

9. 然后删除以前的 .png 图片，运行项目

   

效果不错，无论显示的字符多长，都是图中这个结果