Android：制作/显示9patch图像时的对齐错误

Question

NinePatch：

截图：

布局XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ffffff">

    <LinearLayout
        android:id="@+id/edit_tray"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <View
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/trash"/>

    </LinearLayout>

</RelativeLayout>

期望的结果：

“edit_tray”表示可以切换的UI元素。当编辑模式关闭时，“edit_tray”（以及垃圾桶图标）“消失”。当编辑模式打开时，“edit_tray”可见并覆盖在ScrollView内容上。

垃圾桶图标有两个元素：图标本身及其背后的线性渐变。 NinePatch图像包含三个可伸展区域和一个静态区域以容纳这些元素。图形中间的垃圾桶图标是静态的，应直接显示在屏幕的水平中心和底部。渐变应该从屏幕底部延伸到另一侧。

The Bug？

NinePatch图像水平地仅包含图像两侧的可伸展区域的一个像素。其效果应该是垃圾桶图标直接出现在中心（左侧1个像素=右侧1个像素）。但是，正如您在上面的屏幕截图中看到的那样情况并非如此。注意：此截图来自我的测试手机，即T-Mobile G2。在仿真器中可以看到相同的效果。但是，在draw9patch预览和eclipse图形布局视图中，图像是完美分布的。

我尝试了几种不同的方法来尝试找出错误的位置，并尝试修复它或解决它。包括：使用ImageViews代替Views（效果相同），使用android：scaleType =“fitXY”（同一问题），在运行时检查屏幕的宽度和“edit_tray”的宽度是否相同（它们是），使用两个不同的图像作为渐变（如edit_tray背景）和图标（作为ImageView src）（创建另一个问题，其中两个图像没有相互重叠。通过设置两者的绝对高度固定）等。

答案，变通方法和真实问题

我使用一些简单的NinePatch图像进行了一些测试，每侧最多有六个可伸缩区域。我注意到至少有一个测试用例（手机，模拟器，draw9patch，eclipse中的Graphical Layout）显示了一些问题。

我决定尝试水平扩展图像，以便在垃圾桶图标的边缘显示更多的线性渐变。我将图像设为128x64（之前为64x64）。我制作了更多可拉伸部分的边缘部分，以试图控制发生在图像上的任何不良数学（？）。 Draw9patch报告了坏的部分，所以我把它放回到两个像素，两边一个像素。有效！图标直接位于屏幕中央！我不知道为什么，但是如果不改变图像的实际可伸缩部分，只将图像的宽度改为128，它现在可以正常工作。

我尝试将图像重新调整为大约100px宽，以移除一些冗余像素，然后错误又回来了！它不仅会返回，而且图标被放置在与屏幕中心偏移的完全相同的位置。我无法弄清楚为什么会这样发生。

有人有什么想法吗？这是一个错误吗？

鉴于我上面描述的解决方法，我目前正在开展这项工作，但如果有人有任何建议我正在倾听。

Answer 1

使用4 points制作你的9补丁图像，就像我在这里做的那样..它会起作用。

制作9补丁图片的提示。（不是设计师，告诉你我的基础）

• 将点放在左侧和顶部
• 如果你之间有一些文字或图像..然后把点放在左边 和图像的右侧以及该图像或文本的顶部和底部。
• 始终看到剩余空间没有，两侧（左右和上下）的点都没有。
• 在使用2x签入之前，请务必检查预览或右侧 至6x

Answer 2

根据我使用绘图9补丁工具的经验，图像的每一侧都有一个自动1px偏移。如果您只使用这一个像素偏移量来获取此信息，那么您的图像实际上并没有像您想象的那样伸展。

这可以通过以下事实看出：当你使用2px偏移时，它工作得很完美。

此外，9-patch图像有一种倾向，就像你想象的那样出现在日食中......但随后在手机/模拟器上显得不同。

学习9-patch工具非常棒，因为它允许更大的自定义。另一个提示，如果你想做一些像你自己的改动替换任何android 9补丁的东西 - 那么只需复制SDK中存在的9patch并改变它。出于某种原因，SDK中的9patch图像具有奇怪的偏移量。这样做可以保证您不会从9补丁中得到奇怪的回应。这方面的一个例子 - 当给出错误的输入时，我用红色勾勒出一个editText。

SDK图像可以在SDK-＆gt;平台 - ＆gt; [平台 - 你想要] - ＆gt; data-＆gt; res-drawable- [你选择]

中找到

您还可以查看SDK 9-patch图像，以帮助了解9-patch-tool的工作原理。

希望这能提供更多见解。

以下是一些很好的链接： http://developer.android.com/guide/developing/tools/draw9patch.html http://android10.org/index.php/articlesother/279-draw-9-patch-tutorial http://jaanus.com/post/7878186745/how-does-androids-nine-patch-tool-work-from-a

Answer 3

也许这是9补丁绘图中的错误，或者只是因舍入导致的错误。

但是，我不喜欢你绘制这个图标的方法。您尝试使用非为此任务设计的内容来定位屏幕元素。

您应该以其他方式绘制：使用gradiend背景创建一些容器视图（FrameLayout）。然后在那个位置ImageView与垃圾桶的顶部。这两个图像都不需要是9个补丁，渐变会填满整个视图，垃圾可以在没有缩放的情况下绘制。 虽然垃圾视图区域过度抽取，但九个补丁区域的计算不会浪费CPU时间。

您可以使用布局系统精确定位垃圾桶图标。当然，你会得到预期的结果，因为UI布局得到了很好的调整，并且是为了定位屏幕元素而制作的。九个补丁图像用于其他目的（像素移动到这里或那里有点无关紧要）。

Answer 4

正如@jjNford所说 - 以这种方式处理图像是不好的做法。

对于此任务，最佳解决方案是创建＆＃34;垃圾＆＃34;带透明背景的图标，并使用渐变创建shape drawable。因此，您可以删除不必要的LinearLayout并仅使用ImageView：

<ImageView
    android:id="@+id/edit_tray"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:src="@drawable/trash"
    android:background="@drawable/gradient_background"/>

Docs for shape drawable。

修改

只需检查一下您的图像 - 它在SE Xperia 2.3.3

上完好无损