51

我最近听说过 9-patch 图像。我知道它有 9 个平铺并且是可拉伸的。我想了解更多。

  • 如何创建 9-patch 图像？

    有什么工具吗？我可以从 AndroidSDK 或代码创建它吗？

  • 9-patch 与常规 png 相比的主要优势？

    （它是否可以根据屏幕动态/自动拉伸？）

4

8 回答 8

45

SDK 和 Android Studio 都附带了一个简单的编辑器“Draw 9-patch”工具（SDK 工具文件夹中的“draw9patch”）。这是一个更好的，也是开源的。它有一个简单但聪明的默认图像。

多年来，官方文档有所改进。总之，九个补丁图像最重要的优势是它们可以指定（非连续）区域进行缩放：

NinePatch 图形是标准的 PNG 图像，包括一个额外的 1 像素边框。它必须以 9.png 扩展名保存在项目的 res/drawable/ 目录中。

使用边框来定义图像的可拉伸和静态区域。您可以通过在边框的左侧和顶部绘制一条（或多条）1 像素宽的黑线来指示可拉伸部分（其他边框像素应完全透明或白色）。您可以拥有任意数量的可拉伸部分。可拉伸部分的相对大小保持不变，因此最大的部分始终保持最大。

您还可以通过在右侧绘制一条线并在底部绘制一条线来定义图像的可选可绘制部分（实际上是填充线）。如果 View 对象将 NinePatch 图形设置为其背景，然后指定视图的文本，它会自行拉伸，以便所有文本仅占据由右行和底线指定的区域（如果包括）。如果不包括填充线，Android 将使用左侧和顶部的线来定义此可绘制区域。

9-patch 图像的边界部分示意图

但是文档缺乏很好的例子。本教程最后有一些很好的例子来回答你的问题的第二部分，解释缩放是如何工作的——不仅仅是按钮——还有框架，它有一个完整的示例项目，你可以下载和使用。

于 2014-03-09T10:09:12.787 回答
24

大多数示例都在讨论创建 9-patch 映像，但实施细节通常保留在较高级别。

上面尼克的帖子-提供了一个工作项目下载文件的优秀 9 补丁教程，拯救了这一天。

以下是对我有用的主要实现细节（一旦你准备好 9 补丁图像）：

  1. 使用名称引用可绘制对象，但不包括 .9.png （eclipse 中的自动完成会处理这个问题）

  2. 确保主 /drawable 文件夹下只有 1 个图像（不是每个 dpi 文件夹的版本）

  3. 必须使用 :background 指定图像，而不是 :src （这让我卡了一段时间）

    android:background="@drawable/splash_logo"

  4. 确保包含它的图像和布局正在使用：

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

于 2014-03-31T18:29:35.470 回答
9

如何创建 9-patch 图像？有什么工具吗？我可以从 AndroidSDK 或代码创建它吗？

当您搜索一个主要的搜索引擎时android 9-patch tool，第一个点击是该工具上的 Android 开发人员文档页面draw9patch。

9-patch 与常规 png 相比的主要优势？（它是否可以根据屏幕动态/自动拉伸？）

Android 开发人员文档包含描述九个补丁 PNG 文件的其他页面。该文档包括以下段落：

NinePatchDrawable 图形是可拉伸的位图图像，Android 将自动调整其大小以适应您将其作为背景放置在其中的 View 的内容。NinePatch 的一个示例使用是标准 Android 按钮使用的背景——按钮必须拉伸以适应各种长度的字符串。

于 2013-06-15T14:40:17.423 回答
6

使用 9-patch 图像，您可以选择可以拉伸图像的哪一部分。它必须是 png 图像并且名称必须以 .9.png (something.9.png) 结尾

http://developer.android.com/tools/help/draw9patch.html

适用于所有密度的简单工具：

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

于 2013-06-16T22:42:55.550 回答
3

1.NinePatch 图像是什么？

NinePatch 图像是标记图像中可以拉伸的部分的 PNG 图像。他们有一个像image_name.9.png.

2.它们存储在android项目的哪里？

res/drawable/image_name.9.png

3.如何为您的安卓应用创建 NinePatch 图像？

Android SDK 在您的 Android SDK文件夹中包含一个 WYSIWIGdraw9patch.jar工具。/tools

在此处输入图像描述

于 2015-07-03T10:05:59.063 回答
1

Step 1，由于还不熟悉，先准备一张xxxhdpi png大图来玩玩。

第 2 步，该图像所需的可扩展字段必须尽可能短（通过删除冗余/重复的颜色部分），因为 9-patch 没有这样的东西“减少”，而是“扩展”图像。

我个人使用 ImageMagick 命令行工具对其进行转换，例如：

convert -trim 'my_image.png' png32:my_image_trim.png #trim extra transparent surrounded image
rm lala*; convert my_image_trim.png -crop 310  +repage  +adjoin  png32:lala%02d.png #cut redundant/repeat center part
convert +append lala02.png lala05.png png32:out_right.png #append left/right images side by side
convert -resize 144x144\! out_right.png png32:my_image.png #resize to the desired dpi

转换时有一个陷阱：我必须以 png32 为前缀，否则会得到黑色的 9-patch 图像，请参阅此线程。

第 3 步，将图像复制到 Android Studio drawable，然后右键单击并选择菜单项“创建 9-Patch 文件...”。将生成具有相同图像名称的 .9.png 新图像。现在可以只删除原始图像。使用重构重命名备份时要小心，因为它也会重命名 XML 图像 id，并且让您想知道为什么 9-patch 图像不起作用，因为 XML 仍然引用非 9-patch 图像。

第四步，左、上2条黑线形成一个可扩展的矩形区域，而右、下2条黑线形成一个文本矩形区域。

随着文本的增长，您声明的可扩展区域的图像大小将增长。而文本区域意味着文本只允许在该区域中。

您不必为了简单的使用从头开始绘制黑点/线，如果您的 9-Patch 图像由 Android Studio 生成，则该图像的顶部、左侧、底部、右侧已经存在 4 条黑线。如果您看不到拖动那条线，请“放大”到更大。

2条黑线的原始位置，垂直和水平，都声明了一个可扩展区域：

  • 左垂直线的原始位置在左上角到左下角之间
  • 顶部水平线的原始位置在左上角到右上角之间。

2条黑线的原始位置，垂直和水平，都声明一个文本区域：

  • 右垂直线的原始位置在右上到右下之间。
  • 底部水平线的原始位置在左下角到右下角之间。

上面是黑线的原始位置，在您开始拖动以缩小长度之前，以调整该线的开始位置和结束位置。

可扩展区域和文本区域都可以根据您的需要而有所不同。但通常可扩展区域应该等于或小于文本区域，一个典型的例子是聊天气泡图像：

在此处输入图像描述

上图的顶部和底部黑色线条宽度相等，但右侧黑色线条高于左侧线条，这也意味着无论是最小尺寸还是扩展尺寸，文本始终保持在底部曲线的一半。它只在文本区域的正文中扩展。

现在你就知道9-Patch的两个好处了：底线和右线共同形成一个文本区域，完美保证文本不会溢出到图像曲线之外！并且还定义了文本区域的哪一部分负责随着文本的增长而扩大图像，同时保持曲线不缩放。

悬停该线将能够以像素为单位查看 x、y 位置，这有助于测量两条线的位置是否相等或更少。

拖动时要记住线的位置，因为左边的线可以拖到右边，右边的线可以拖到左边，你可能会迷失哪一行是可扩展行，哪一行是文本行。

您应该勾选两个重要的复选框，即“显示补丁”和“显示坏补丁”复选框。

在“显示坏补丁”复选框中，如果您绘制可扩展区域但覆盖图像的曲线而不是直线，那么它将将该区域标记为红色以警告您。您可以缩小范围以忽略该红色警告，或者忽略它。请记住，红色警告可能会产生误导，这实际上可能是由对面线引起的，在这种情况下，您需要缩小对面线以消除该红色警告。

第 5 步，在 xml 中，您可以将该图像称为 TextView 背景，如下所示，用于wrap_content使其可扩展：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/your_9_patch_image_name_excluded_.9"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <2nd TextView />
</LinearLayout>

第一次使用它时，确保在 textview 或花哨的父布局上没有填充，否则您可能想知道为什么不能按预期工作。

按钮背景示例：

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:background="@drawable/your_9_patch_image_name_excluded_.9"
        android:layout_gravity="center"
        />
于 2018-07-16T12:02:20.130 回答
1

这是一个很好的工具： 点击这里。

9 补丁图像是缩小到最小尺寸的可拉伸、可重复的图像。最简单的例子是，如果你将一个圆形的 div 切成 9 个正方形，就像你将一个井字棋盘一样。四个角根本不会改变大小，但会是静态的，而其他 5 个角会被拉伸或重复，以使整个图像能够适当地缩放。

有了这种解释和 CSS3 的出现，您可能会认为没有理由使用 9 个补丁图像，但名称“9 补丁”是用词不当。图像可以切成更小的块。

9 补丁图像通过向图像添加 1px 边框来包含哪个片段的索引。边框中的颜色决定了一块是静态的（不缩放），它是伸展的，还是重复的。

谷歌幻灯片：https ://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg

另请参阅有关 9 补丁图像的 Android 开发人员信息：http: //developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

于 2017-11-17T11:24:09.963 回答
1

9-patch 相对于常规 png 的主要优点

实际上9 Patch图像是可拉伸的、可重复的图像，缩小到最小尺寸。图像在不同的屏幕尺寸下不会拉伸和松散比例。另一个最大的优势是内存。

相同的小尺寸内存可以重复用于不同屏幕尺寸的设备。精心设计的 9-patch 图像不易出错且具有很高的可重用性。

https://developer.android.com/studio/write/draw9patch.html

于 2015-09-15T12:23:37.203 回答