Android:制作/显示9patch图像的alignment错误

NinePatch:

垃圾桶图标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元素。 当编辑模式closures时,“edit_tray”(因此垃圾桶图标)“消失”。 当编辑模式打开时,“edit_tray”是可见的,并覆盖在ScrollView内容上。

垃圾桶图标有两个元素:图标本身及其后面的线性渐变。 NinePatch图像包含三个可伸缩区域和一个静态区域以容纳这些元素。 graphics中间的垃圾桶图标是静态的,应直接出现在屏幕的水平中心和底部。 渐变应该从屏幕的一端延伸到另一端。

错误?

NinePatch图像在图像的任一侧仅包含一个可伸缩区域的像素。 其效果应该是垃圾桶图标直接出现在中央(左侧1像素==右侧1像素)。 但是,正如你在上面的截图中看到的那样,情况并非如此。 注意:这个截图是从我的T-Mobile G2testing手机中截取的。 仿真器中可以看到相同的效果。 但是,在draw9patch预览和eclipse Graphical Layout视图中,图像是完美分布的。

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

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

我使用一些简单的NinePatch图像进行了一些testing,每面有6个可拉伸区域。 我注意到在至less一个testing用例(电话,模拟器,draw9patch,eclipse中的graphics布局)中显示了一些问题。

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

我试图重新调整图像的大小约100像素宽,以删除一些冗余的像素和错误回来了! 它不仅回来了,而且图标被放置在与屏幕中心完全相同的位置偏移处。 我无法弄清楚为什么会这样。

有人有主意吗? 这是一个错误?

我目前有这个工作给出了我上面描述的解决方法,但如果有人有任何build议,我正在听。

Solutions Collecting From Web of "Android:制作/显示9patch图像的alignment错误"

使用4 points ,让你的9补丁图像,因为我已经在这个..所以它会工作。

在这里输入图像说明

提示创build9补丁图像 (不是一个devise师,告诉你我的基础)

  • 把点数放在左上angular
  • 如果你之间有一些文字或图像,然后把图像的左右两边,图像或文字的顶部和底部。
  • 总是看到剩下的空间,没有任何点(左右和上下)是相等的。
  • 在使用2倍至6倍检查前,请务必检查一次预览或右侧

根据我的绘制9-补丁工具的经验,在图像的每一侧都有一个自动的1px偏移量。 给出这个信息,如果你只使用这一个像素偏移量,你的图像实际上并没有按照你想象的方式拉伸。

这可以看出,当你使用2px的偏移量,它的工作完美。

此外,9补丁的图像有一个在日食中出现的趋势,你会怎么想…但在手机/模拟器上出现不同。

学习9-patch工具是一件好事,因为它允许更大的自定义。 另一个技巧,如果你想做一些像你自己的改动一样的东西来replace任何的android 9补丁 – 那么只需复制SDK中存在的9patch并改变它。 由于某些原因,SDK中的9patch图像具有奇怪的偏移量。 这样做可以保证你不会从你的9个补丁得到奇怪的回应。 这样的一个例子 – 当给出错误的input时,我将红色的editText概述为红色。

SDK图像可以在SDK->平台 – > [plateform-you-want] – > data-> res-drawable- [you-choice]

您也可以查看SDK 9修补程序映像,以帮助了解9修补程序工具的工作原理。

希望这给予更多的见解。

这里有一些很好的链接: 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

也许这是9补丁绘图的错误,或者是由于四舍五入导致的错误。

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

您应该以其他方式绘制它:创build一些具有渐变背景的容器视图(FrameLayout)。 然后在这个位置ImageView垃圾桶的顶部。 这两个图像都不需要是九个补丁,gradiend会填满整个视图,垃圾桶会被绘制而不缩放。 尽pipe在垃圾视图区域有透支,但是在九块区域计算中CPU时间并不浪费。

您可以使用布局系统来精确定位垃圾桶图标。 当然,你会得到预期的结果,因为用户界面布局调整得很好,并为定位屏幕元素的目的。 九贴片图像被用于其他目的(像素在这里或那里移动一点不应该)。

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

对于这个任务,最好的解决scheme是创build透明背景的“垃圾”图标,并创build可绘制渐变的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上就可以很好的完成了