简述Android 9-Patch

什么是9-Patch

• 安卓开发里面的一种特殊的图片，这种格式的图片在 android 环境下具有自适应调节大小的能力，文件名以.9.png结尾。

如何制作 9-Patch 文件

• 创建：
  • 首先，将需要制作成 9-patch 的图片放进项目中
  • 点击该图片，右键调出菜单栏，选中 Create 9-Patch file
    • image
  • 指定9-Patch文件存储位置（建议重新编辑下名称，后面引用才不会冲突）
    • image
  • 点击确定后，我们就在目录下得到了一张.9图了，但是，我们还需要对图片进行编辑，这样图片的拉伸效果才会是我们想要的。
• 编辑：
  • 编辑界面初始化完成时，我们可以看到界面分为两部分：
    • 左侧部分为编辑区域，该区域的下方是控制栏，灵活使用控制栏中的功能能让我们操作更加简单；
    • 右侧部分为预览区域，在编辑区域做的操作都会在预览区域得到体现。
    • image
  • 在我们开始编辑前，非常重要的一点！！！需要清楚我们编辑的图片矩形区域对应边的作用！！！
    • 拉伸区域：
      • 在图片矩形区域的左边为纵向拉伸区域，上边为横向拉伸区域；
      • 该区域，可以存在多段拉伸区域。
    • 内容区域：
      • 在图片矩形区域的右边为纵向内容区域，下边为横向内容区域；
      • 该区域，拉伸区域应该是连续的一段。
  • 我们回到左侧的编辑区域，可以尝试将鼠标移至图片区域，我们能看到图片出现了一层蒙板，还出现了多条灰色的线条，将鼠标移至任意一条线条上，鼠标指针会变成可左右或上下拖动的模式，按住鼠标左键就可以进行拖动了。
    • image
  • 拖动后我们可以发现，图片原本周围有一圈白灰相间的区域，发生了变化，一部分变成了黑色，该黑色部分就是我们设置的可拉伸区域。编辑中我们会发现，拉伸区域可以是一个范围，也可以只有一个点，根据我们的需要去设置就可以了。
    • image
  • 接着我们继续拖动不同的线条，或直接点击在图片周围的灰白相间区域，获得拉伸区域，在进行拖动扩大拉伸范围。
  • 在图片矩形区域需要拉伸的边上设置拉伸区域，这时我们可以看预览区域的效果，在进行微调，直到达到你想要的效果。
• 技巧：
  • 这部分我们将使用到前面提到的控制栏，现在我们来看看控制栏能帮我们做些什么。
  • Zoom
    • 在编辑可拉伸区域时，我们可以利用控制栏中的 Zoom 放大编辑区域，提高我们编辑的精度。
    • image
    • image
  • Patch scale
    • 当我们编辑完成，预览区域的效果无法让我们看大更大的拉伸效果时，我们可以利用控制栏中的 Patch scale 调整预览区域显示效果。
    • image
    • image
  • Show content
    • 但预览图达到了我们想要的效果时，运行起来，内容都显示不完整，此时我们就需要使用 Show content 查看内容显示区域是否足够大。
    • 开启后，预览区域中紫色区域就是我们内容显示区域，该区域为图片矩形相邻的右下两边区域的重叠部分，如果该区域偏小，我们需要再次编辑内容区域，使重叠部分增大。
    • image
  • Show patches
    • 编辑拉伸区域时，我们可以开启 Show parches 后，在编辑区域拉伸区域会呈现粉红色，非拉伸区域会呈现绿色，这样方便我们预览到拉伸区域的变化。
    • image
  • Show bad patches
    • 编辑完成后，我们可以开启 Show bad patches，它会把非正常拉伸区域用红色框圈起来，我们可以根据提示进行调整，消除非正常拉伸区域。

    • 错误例子：
      image

    • 修正以后：
      image
• 控制栏功能说明
  • Zoom
    • 调整绘图区域中图形的缩放级别
  • Patch scale
    • 调整预览区域中图像的比例
  • Show lock
    • 在鼠标悬停时可视化图形的不可绘制区域
  • Show content
    • 突出显示预览图像中的内容区域（紫色是允许内容的区域）。
  • Show patches
    • 在绘图区域中预览可伸展的修补程序（粉红色是可伸缩的修补程序）
  • Show bad patches
    • 在补丁区域周围添加红色边框，在拉伸时可能会在图形中产生伪影。如果消除所有不良补丁，将保持拉伸图像的视觉一致性。

遇到的问题

• 问题 1

  •   Android resource compilation failed
      error: too many padding sections on right border.
      
      Android资源编译失败
      错误：右边框上的填充部分太多。
    

    • 原因： 没区分拉伸区域和内容区域，简单来说就是图片矩形区域的右边或下边出现了多个或不连续的拉伸区域造成的。
• 问题 2

  •   [drawable/img] ...\app\src\main\res\drawable\img.png    
      [drawable/img] ...\app\src\main\res\drawable\img.9.png: 
      Error: Duplicate resources
    

    • 原因：创建.9图片时，和源文件命名冲突，修改其中一个的名称就可以了。
• 问题 3
  • 设置背景后，内容无法居中
    • 原因：当我们编辑内容区域时，该区域与原图片已经不会重合了，因此产生了内边距，当然我们可以通过在代码中设置内边距为0，这样一来就解决了无法居中问题。
• 问题 4
  • 拉伸区域为图片矩形的左边和上边，但如果我们需要拉伸的区域在图片的右边或者下边时，我们应该怎么处理？
    • 处理方法：前面我们说过，可拉伸区域是允许存在多段拉伸区域的，那么我们也就可以设置多个拉伸区域，让其中一个区域对准对边需要拉伸的位置，这样就实现了拉伸效果了。
    • image

参考

• AndroidDocs Draw 9-patch