15

九补丁:

垃圾桶图标 NinePatch 图像

截屏:

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 图像包含三个可拉伸区域和一个静态区域以容纳这些元素。图形中间的垃圾桶图标是静态的,应该直接出现在水平中心和屏幕底部。渐变应该从屏幕底部从一侧延伸到另一侧。

错误?

NinePatch 图像在水平方向图像的任一侧仅包含一个像素的可拉伸区域。其效果应该是垃圾桶图标直接出现在中心(左侧1像素==右侧1像素)。但是,正如您在上面的屏幕截图中看到的那样,情况并非如此。注意:此屏幕截图取自我的测试手机 T-Mobile G2。在模拟器中可以看到相同的效果。但是,在 draw9patch 预览和 eclipse 图形布局视图中,图像是完美分布的。

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

答案、解决方法和真正的问题

我使用一些简单的 NinePatch 图像进行了一些测试,每边最多六个可拉伸区域。我注意到在至少一个测试用例(电话、模拟器、draw9patch、eclipse 中的图形布局)中显示它们存在一些问题。

我决定尝试水平扩展图像,以便在垃圾桶图标的边缘显示更多的线性渐变。我制作了 128x64 的图像(以前是 64x64)。我制作了更多可拉伸部分的边缘部分,以试图遏制图像上发生的任何糟糕的数学(?)。Draw9patch 报告了坏的部分,所以我把它放回只有两个像素,两边各一个。有效!图标现在直接位于屏幕中央!我不知道为什么,但没有改变图像的实际可拉伸部分,只将图像的宽度更改为 128,它现在可以工作了。

我尝试将图像的大小调整回大约 100px 宽以删除一些冗余像素,然后错误又回来了!它不仅回来了,而且图标被放置在与屏幕中心偏移的完全相同的位置。我不明白为什么会这样。

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

考虑到我上面描述的解决方法,我目前有这个工作,但如果有人有任何建议,我正在听。

4

4 回答 4

5

4 points像我在这个中所做的那样使用你的 9 Patch 图像......它会起作用。

在此处输入图像描述

创建 9 个补丁图像的技巧。(不是设计师,告诉你我的底子)

  • 将点放在左侧和顶部
  • 如果您之间有一些文本或图像..然后将点放在图像的左侧和右侧以及该图像或文本的顶部和底部。
  • 总是看到左边的空间和两边(左右和上下)的点不相等。
  • 在使用检入 2x 到 6x 之前,请务必检查一次预览或右侧
于 2012-04-06T07:21:10.840 回答
1

根据我使用 draw 9-patch 工具的经验,图像的每一侧都有一个自动 1px 的偏移量。鉴于此信息,如果您仅使用这一像素偏移量,您的图像实际上并没有像您想象的那样被拉伸。

这可以从以下事实看出:当您使用 2px 偏移时,它工作得很好。

此外,9-patch 图像倾向于在 eclipse 中完全按照您的想法显示......但随后在手机/模拟器上出现不同。

学习 9-patch 工具无疑是一件好事,因为它允许更大程度的定制。另一个提示,如果你想做一些事情,比如用你自己的更改替换任何 android 9-patch - 然后只需复制 SDK 中存在的 9patch 并更改它。由于某种原因,SDK 中的 9patch 图像有奇怪的偏移量。这样做将保证您不会从 9 补丁中得到奇怪的响应。一个例子——当输入错误时,我用红色勾勒出一个editText。

SDK图片可以在SDK->platforms->[plateform-you-want]->data->res-drawable-[you-choice]中找到

您还可以查看 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

于 2012-03-16T13:27:24.720 回答
1

可能是九个补丁绘图中的错误,或者只是四舍五入导致的错误。

但是,我不喜欢您绘制此图标的方法。您尝试使用不是为此任务设计的东西来定位您的屏幕元素。

您应该以其他方式绘制它:创建一些具有渐变背景的容器视图(FrameLayout)。然后在带有垃圾桶的 ImageView 位置之上。这两个图像都不需要是九个补丁,梯度会填满整个视图,垃圾箱会在没有缩放的情况下绘制。尽管垃圾视图区域存在过度绘制,但 CPU 时间并没有浪费在九个补丁区域计算中。

您将使用布局系统来精确定位垃圾图标。当然你会得到预期的结果,因为 UI 布局经过了很好的调整,并且是为了定位屏幕元素而设计的。九个补丁图像用于其他目的(像素在这里或那里移动一点应该无关紧要)。

于 2012-04-02T06:49:04.873 回答
0

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

对于这个任务,最好的解决方案是创建具有透明背景的“垃圾”图标,并创建shape带有渐变的可绘制对象。因此,您可以删除不必要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"/>

可绘制形状的文档

编辑

只需检查您的图像 - 它在 SE Xperia 2.3.3 上运行良好

于 2012-04-03T07:03:51.210 回答