如何在Photoshop中创建9 patch？什么是9.png编码？

Question

提供的实用工具看起来很糟糕，例如它不允许进行“另存为”操作，也不能使用相似裁剪绘制多个按钮状态。

在Photoshop中是否可以绘制9.png？我注意到生成的png文件只包含外边缘的黑色像素。这是标记切片的内容吗？

如果两个相对的边缘都有黑色像素，会怎么样？

在Android上显示时，外边缘是否被切掉了？

- Suzan Cioc

Answer 1

是的，我所有的九宫格都是在Photoshop中完成的。以下是创建9-patch的基本规则：

1. 外部1像素边距只能包含100％的黑色（RGB 0、0、0）或完全透明。

2. 顶部和左侧边距的黑色像素定义拉伸点，必须是实线、单个点或两个分离点。如果定义了两个点，则会均匀地拉伸两者之间的距离。

3. 底部和右侧边距的黑色像素定义内容区域。这些像素必须是一个连续的线。

4. 保存时，请确保附加.9.png扩展名。

希望这可以帮助你。 :)

编辑：是的，如果正确格式化并保存为.9.png，则在布局中使用时将不显示那些标记。

好的，第一张图片是一个简单的旋转器九宫格。第二张图片中横向和纵向的线显示了哪些像素行/列将被复制。第二张图片中的蓝色矩形显示了Android允许放置内容的区域。因此，例如文本将简单地换行以保持在此矩形内。

- Kevin Coppock

---

拉伸区域和内容区域有什么区别？我想9 patch包含3x3=9个切片，其中中心一个用于内容和拉伸，4个边缘垂直拉伸2个，水平拉伸2个，4个角固定。因此，只需定义中央切片即可，因此只需要两条黑线就足够了。其他两个是用来做什么的？ - Suzan Cioc

拉伸区域决定了哪些行和列将被重复。也就是说，如果您在顶部列中选择一个像素，则如果必须使九宫格变宽，它将简单地扩展该列（复制该像素列）并展开其周围的两侧。行也是如此。内容区域 - 将其视为定义填充的区域。如果您有一部分九宫格不应包含内容（通常是文本），则不应在该区域放置像素。我会尽快上传一个图形示例。 - Kevin Coppock

好的，太棒了！无论如何，我已经为未来的观众添加了一个示例。 :) - Kevin Coppock

可能会有所帮助，一个在线的9-patch图像转换器/生成器：https://romannurik.github.io/AndroidAssetStudio/nine-patches.html - Mathias Conradt