Android Studio 之 制作 Nine-Patch 图片（.9图片）

时间：2024-04-15 19:43:50

 

•引言

　　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图片每个边都必须有黑线标记；

 

相关文章