Android / 9-patch PNG:如果我需要像 11-patch PNG 这样的东西怎么办?

发布于 2024-09-19 14:19:48 字数 500 浏览 3 评论 0原文

在 Draw 9-patch 中,一切看起来都很好。 但是,我的 SDK 说 9-patch png 格式错误。因为我有类似 11-patch png 的东西。因为我不希望小抓取区域被缩放。如何让它发挥作用?屏幕截图描述了一切:

alt text

控制台中的错误消息:

ERROR: 9-patch image /res/drawable-hdpi/top_complete.9.png malformed.
        Can't have more than one marked region along edge.
        Found at pixel #10 along bottom edge.
ERROR: Failure processing PNG image /res/drawable-hdpi/top_complete.9.png

In Draw 9-patch, everything looks fine. However, my SDK says the 9-patch png is malformed. Because I have something like an 11-patch png. Because I don't want the little grabbing area to be scaled. How to get it working? The screenshot describes everything:

alt text

Error Meassage in Console:

ERROR: 9-patch image /res/drawable-hdpi/top_complete.9.png malformed.
        Can't have more than one marked region along edge.
        Found at pixel #10 along bottom edge.
ERROR: Failure processing PNG image /res/drawable-hdpi/top_complete.9.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

雅心素梦 2024-09-26 14:22:17

检查所有边框...顶部和左侧各有 2 个(将缩放),右侧和底部各 1 个(不会缩放)。

输入图片此处描述

Review all borders ... Two in top and left (will be scaled) and 1 for right and bottom (will not be scaled).

enter image description here

彩扇题诗 2024-09-26 14:21:59

上面的图片看起来不错,预览显示看起来没问题。

当您尝试使用设备时,设备发出的错误消息是什么?

您确定边缘上的每个像素都是完全白色或黑色吗?
即使是边缘最轻微的透明度也会让 Android 感到不安。


编辑:
啊哈,错误信息揭示了问题所在。
仅限顶部 em> 图像的边缘 决定了哪些区域将被拉伸。

删除底部边缘的黑色像素,假设这只是一个内部没有内容(例如文本)的抓取栏。

否则,只需填充底部边缘的中央间隙,以便文本内容可以显示在紫色区域中。

That image above looks fine, and the preview shows it's seemingly ok.

What's the error message from the device when you try to use it?

Are you sure that every pixel on the edge is either entirely white or black?
Even the slightest of transparency on the edge can upset Android.


Edit:
Ah ha, the error message reveals the problem.
Only the top edge of the image determines which areas will be stretched.

Remove the black pixels on the bottom edge, assuming this is just a grab bar that will have no content (e.g. text) inside it.

Otherwise, just fill in the central gap in the bottom edge, so that text content can be displayed in the purple area.

二智少女猫性小仙女 2024-09-26 14:21:43

将原始图像分成两部分并使用它们。

Split the original image in two and use those.

半边脸i 2024-09-26 14:21:26

由于最初的问题尚未解决:您可以将图像分成两层,一层 NinePatchDrawable 用于可拉伸部分,实心部分(居中)用于静态图像。然后只需使用 LayerDrawable将它们绘制在彼此之上。 这里是一个很好的示例,说明如何使用适当的; 标签。这就是正确的做法。 ;-)

Since the original problem is not solved yet: You may split your image up into two layers, one NinePatchDrawable for the stretchable part and a solid one (centered) for your static image. Then just use a LayerDrawable to draw them on top of each other. Here is a good example of how to use the appropriate <layer-list> tag. That's how to do it the right way. ;-)

两人的回忆 2024-09-26 14:21:11

alt text

不带抓取器的 9-Patch PNG

alt text

按钮的 XML:

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textColor="#FFFFFF"
  android:textStyle="bold"
  android:textSize="11sp"
  android:id="@+id/ButtonTop"
  android:background="@drawable/top_just_bg"
  android:drawableBottom="@drawable/top_dropper"
  android:gravity="center"
  android:paddingLeft="15sp"
  android:paddingRight="15sp"
  android:paddingTop="3sp"
  android:text="There we go! It's working... ;)"></Button>

使用 Padding 和 sp-Values 可以吗?

alt text

9-Patch PNG without the grabber

alt text

XML of the Button:

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textColor="#FFFFFF"
  android:textStyle="bold"
  android:textSize="11sp"
  android:id="@+id/ButtonTop"
  android:background="@drawable/top_just_bg"
  android:drawableBottom="@drawable/top_dropper"
  android:gravity="center"
  android:paddingLeft="15sp"
  android:paddingRight="15sp"
  android:paddingTop="3sp"
  android:text="There we go! It's working... ;)"></Button>

Is the use of Padding and sp-Values alright?

假面具 2024-09-26 14:20:54

我不会将它分成左右两部分,我会删除 9 补丁中的 == 并将其用作具有中心和底部重力的单独图像,以便它始终保持在您想要的中间位置。

只是提示:我总是将“缩放”部分减少到 1 像素宽度/高度以获得最小化图像。

I wouldn't split it into left and right, I would remove the == in the 9-patch and use this as a seperate image with center and bottom gravity so that is will always stay in the middle where you want it.

Just a hint: I always reduce the "scaled" part to 1 pixel width/height to get a minimized image.

雨夜星沙 2024-09-26 14:20:37

我相信您的问题是您将内容区域分成两部分,这是不允许的。该工具对顶部和左侧边框的处理方式与底部和右侧边框不同。顶部和左侧描述可拉伸的内容,底部和右侧定义内容区域(必须是连续的)。

选中复选框以显示内容区域并使用它来了解我在说什么。

替代文字

I believe your issue is that you're splitting the content area into two pieces which is not allowed. The top and left borders are treated differently by the tool than the bottom and right borders. The top and left describe what is stretchable, the bottom and right define content area (which must be contiguous).

Check the checkbox to show content area and play with it to see what I'm talking about.

alt text

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文