创造＆amp;在Android中使用9补丁图像

Question

我最近听说过9张补丁图片。我知道它的9平铺并且是可拉伸的。我想更多地了解它。

• 如何创建9补丁图像？

  有没有工具？我可以从AndroidSDK或代码创建吗？

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

  （根据屏幕动态/自动伸缩？）

Answer 1

今天我发现了九张补丁图片。官方文档（链接到其他答案）我想是可以的，但它确实缺乏示例。

This little tutorial最后有一些很好的例子可以回答你问题的第二部分，解释缩放的工作原理 - 不仅仅是按钮 - 还有框架，它有一个完整的示例项目，你可以下载和...一起玩。与PNG相比，最重要的优势是九个补丁图像可以指定不连续的区域。

要回答问题的第一部分，SDK（现在是Android Studio）附带“Draw 9-patch”（SDK工具文件夹中的“draw9patch”），这是一个简单的编辑器。 Here is a nicer one这也是开源的。它有一个简单但聪明的默认图像。

Answer 2

大多数示例都讨论了创建9补丁图像，但实现细节通常保持在较高水平。

Nick's post above - 使用提供工作项目下载文件的good 9-patch tutorial，保存了当天。

以下是适用于我的主要实施细节（一旦准备好了9补丁图像）：

1. 使用名称引用drawable但不包括.9.png（eclipse中的自动完成将处理此问题）

2. 确保主/可绘制文件夹下只有1张图片（不是每个dpi文件夹的版本）

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

   android:background="@drawable/splash_logo"

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

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

Answer 3

  

如何创建9补丁图像？有没有工具？我可以从AndroidSDK或代码创建吗？

当您在主要搜索引擎中搜索android 9-patch tool时，第一次点击是the Android developer documentation page on the draw9patch tool。

  

9-patch比普通png的主要优势？ （它是否可根据屏幕动态/自动伸缩？）

Android开发者文档包含describe nine-patch PNG files的其他页面。本文档包括以下段落：

  

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

Answer 4

使用9补丁图像，您可以选择图像的哪个部分可以拉伸。 它必须是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

Answer 5

1. NinePatch图片是什么？

NinePatch图像是PNG图像，用于标记可以拉伸的图像部分。它们的扩展名为image_name.9.png。

2.它们存放在Android项目中的什么位置？

res/drawable/image_name.9.png

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

Android SDK在Android SDK draw9patch.jar文件夹中包含一个WYSIWIG /tools工具。

Answer 6

9-patch的主要优势超过常规png

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

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

  

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

Answer 7

第1步，由于您还不熟悉，因此请准备一个xxxhdpi png大图像以供首先播放。

第2步，该图像所需的可扩展字段必须尽可能短（通过删除冗余/重复的颜色部分），因为9-patch不会“缩小”，而是“扩展”图像。 / p>

我个人使用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补丁图像，请参见this thread。

第3步，将图像复制到Android Studio可绘制对象，然后右键单击并选择菜单项“创建9补丁文件...”。将使用相同的图像名称生成一个.9.png新图像。现在可以只删除原始图像。在处理重构重命名以进行备份时要小心，因为它也会重命名XML映像ID，并且让您想知道为什么9修补程序映像不起作用，因为XML仍引用非9修补程序映像。

第4步，左侧和顶部2条黑色线形成一个可扩展的矩形区域，而右侧和底部2条黑色线形成一个文本的矩形区域。

您的图像尺寸将随着文本的增长而在声明的可扩展区域上增长。文本区域表示文本仅允许在该区域中使用。

您无需从头开始绘制黑点/线即可简单使用，如果您的9-Patch图像是由Android Studio生成的，则该图像的顶部，左侧，底部，右侧后面已经存在4条黑色线。如果看不到拖动线，则将“放大”到更大。

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

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

两条黑线（垂直和水平）的原始位置均声明一个文本区域：

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

以上是黑线的原始位置，然后开始拖动以缩小长度，以调整黑线的开始位置和结束位置。

可扩展区域和文本区域可以不同，具体取决于您的需求。但是通常可扩展的区域应等于或小于文本区域，一个典型的例子是聊天气泡图像：

上面的图像具有相等的顶部和底部黑线宽度，但右侧黑线高于左侧线，这也意味着文本始终以最小尺寸或扩展尺寸停留在底部曲线的一半处。并且仅在文本区域中扩展。

现在您将了解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"
        />

Answer 8

这是一个很好的工具： Click here.

9补丁图像是可伸缩的，可重复的图像缩小到最小尺寸。最简单的例子是，如果你要采用一个圆形div并将其切成9个方格，就像你的tic-tac-toe板一样。四个角落根本不会改变尺寸，但是会是静止的，而其他5个角落会被拉伸或重复，以使整个图像适当缩放。

通过这种解释和CSS3的出现，您可能会认为没有理由使用9个补丁图像，但名称是＆＃9; 9补丁＆＃39;用词不当。图像可以切成更小的部分。

9补丁图像包含通过向图像添加1px边框来确定哪个部分的索引。边框中的颜色决定一件作品是静态的（不缩放），它是拉伸还是重复。

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

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