标签: nine-patch

我是一名设计师/开发人员，在花了一年的 iOS 开发时间后开始学习 Android。

iOS 中相当于 NinePatch/9patch 的函数称为 ressizedImageWithCapInsets。它允许开发人员采用常规 PNG 并以编程方式指定 9patch 信息，即 Android .9.png 文件周围 1 像素边框中的信息。

但有一个关键的区别。在 Android 上，9patch 中间的位是缩放的，而在 iOS 上它们是平铺的。对于某些类型的图像来说这并不重要；但对于任何具有纹理或图案的东西，缩放都会破坏图像。

以编程方式指定区域还允许设计人员使用http://macrabbit.com/slicy等工具将复杂的主 Photoshop 文件分割为单独的图像资源；据我所知，目前还没有适用于 Android 9 补丁的等效工具。（SDK 附带的 draw9patch 工具不起作用，因为每次从主 Photoshop 文件导出时都必须重复使用它。）

我猜测人们可以创建一个模仿 iOS 行为的 Drawable 子类：你向它传递一个普通的旧 PNG 和一组 9patch 尺寸，它会适当地绘制自己，平铺中间部分。你甚至可以提供一个开关来在平铺和拉伸之间切换（我希望 iOS 这样做）。

作为一个新手，我需要一些时间来弄清楚如何做到这一点。类似的东西是否已经作为开源组件或示例存在？

谢谢！

我很难让我的启动画面在Phonegap for Android中正常工作.注意:我正在使用Phonegap CLI和Eclipse,我没有使用Phonegap Build.

我最初创建了一组用于各种图像密度和对齐的png图像 - port-hdpi等.在某些情况下,我们遇到了图像被拉伸的问题所以我现在正在尝试使用9个补丁图像 - 本身就是一个试验.

我使用draw9patch工具将我的各种png修改为9个补丁图像,并且我将它们全部命名为.9.png扩展名.我修改了我的config.xml以使用这些图像,条目如下:

<splash src="res/screen/android/screen-hdpi-landscape.9.png" density="land-hdpi"/>

当我尝试构建项目时,我得到类似于以下内容的错误:

[aapt] res/drawable-land-hdpi-v4/screen.png:0: error: Resource entry screen is already defined.
[aapt] res/drawable-land-hdpi-v4/screen.9.png:0: Originally defined here.

我检查了我的drawable文件夹,确定有一个screen.png和一个screen.9.png.screen.png似乎是我的9补丁图片的副本.当我删除各种screen.png文件并在Eclipse中构建项目时,它可以工作(有点 - 仍然存在可伸展区域的问题).

这是Phonegap的一个错误,还是我错过了导致它生成screen.png和screen.9.png的东西？

我正在尝试将材质文本选择句柄引入我的应用程序。我从 SDK 中获取了中/右/左手柄（位图）和文本光标（9 块）的可绘制对象，并设置：

<item name="android:textSelectHandleLeft">@drawable/text_select_handle_left_mtrl_alpha</item>
<item name="android:textSelectHandleRight">@drawable/text_select_handle_right_mtrl_alpha</item>
<item name="android:textSelectHandle">@drawable/text_select_handle_middle_mtrl_alpha</item>
<item name="android:textCursorDrawable">@drawable/text_cursor_mtrl_alpha</item>

它按预期工作。但是，在 Lollipop 中，这些可绘制对象使用 XML 中的属性着色为特定颜色android:tint，但我无法在 API<21 上使用该属性。所以我尝试在运行时设置滤色器。

• 文本光标不会着色。我认为这可能是因为它是 9 补丁。如何在运行时过滤 9 补丁可绘制对象？我可能尝试了所有的PorterDuff.Mode。

• 右/左手柄为黑色，中间手柄为白色。

即，它们都不是我想要的绿色。为什么？

正如您在上面看到的，我在ImageView编辑文本下方设置了四个，但它们却被着色了。

   private void setUpTextCursors() {
        Drawable left = getResources().getDrawable(R.drawable.text_select_handle_left_mtrl_alpha);
        Drawable right = getResources().getDrawable(R.drawable.text_select_handle_right_mtrl_alpha);
        Drawable middle = getResources().getDrawable(R.drawable.text_select_handle_middle_mtrl_alpha);
        Drawable cursor = getResources().getDrawable(R.drawable.text_cursor_mtrl_alpha);
        ColorFilter cf = new PorterDuffColorFilter(mGreenColor, PorterDuff.Mode.SRC_IN);

        /**
        * tint my ImageViews, but no effect on edit text handles
        */
        left.setColorFilter(cf); 
        right.setColorFilter(cf);
        middle.setColorFilter(cf);

        /**
        * no effect whatsoever …

使用java设置9-patch时,它会略微垂直拉伸,而通过XML设置则非常完美.

设置代码:

  button.setBackgroundDrawable();

垂直边缘变得拉伸>

在XML中设置:

<Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/btn_normal"
    android:drawableLeft="@drawable/btn_mainmenu"
    android:gravity="center"
    android:paddingLeft="10dp"
    android:paddingRight="20dp"
    android:text="Menu" />

这是预期的>

注意:我知道变通方法,但需要知道是否有任何这种行为的原因.

我得到了一个透明的9patch图像,其中9patch线显示低谷.

这是输出:

显然我不希望水平线可见.

这就是我创建9patch的方式:

这是应用程序中使用的最终图像:

AFAIK 9patch是正确的.为了使水平线消失,我需要更改什么？

怎么样的9补丁图像.
它们可以用来代替吗？

• /res/drawable-hdpi/icon.png ...... .. 72×72

• /res/drawable-mdpi/icon.png .... 48×48

• /res/drawable-ldpi/icon.png ...... 36×36

有什么好处/缺点？

我想创建一些看起来像这样的行图像

但我希望它随着屏幕尺寸和密度而扩展.所以请阅读http://developer.android.com/guide/developing/tools/draw9patch.html和http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch I startet创建一个九补丁图像.

但是当我导入它并在我的android项目中使用它时,它看起来就像那样

如您所见,使用绘图9修补工具绘制的小黑线仍然可见.为什么？

这是9.png图像

我目前正在尝试在我的应用中使用9张补丁图片.

图像非常清晰,并且在SDK提供的图形工具中运行良好:

图片是这样的:

并且该工具似乎工作正常:

不幸的是,有了这么简单的布局,设备上的渲染很糟糕,9补丁根本不起作用:

<TextView
    android:id="@+id/platenumber"
    android:background="@drawable/plate_fr"
    android:layout_width="320dip"
    android:layout_height="wrap_content" />

对我做错了什么的想法？

编辑:

我的照片名为*.9.png

我正在尝试使用Nine Patch作为Libgdx Scene2d UI按钮的背景.这是装载,但它真的很难看.我可以看到"元数据"像素,它被拉伸就好像它只是一个普通的图像(按钮上的文字是"继续"):

我正在通过(libgdx)将.9.png文件直接加载到NinePatchDrawable(libgdx)中,NinePatch如下所示:

this.dialogButtonUp = new NinePatchDrawable(
   new NinePatch(new Texture(Gdx.files.internal("data/button-round.9.png"))));
this.dialogButtonDown  = new NinePatchDrawable(
   new NinePatch(new Texture(Gdx.files.internal("data/button-round-down.9.png"))));

然后我创建一个TextButtonStyle描述按钮,并引用两个NinePatchdrawable:

TextButton.TextButtonStyle buttonStyle = new TextButton.TextButtonStyle();
buttonStyle.font =  aValidFontReally;
buttonStyle.fontColor = Color.BLACK;
buttonStyle.up = this.dialogButtonUp;
buttonStyle.down = this.dialogButtonDown;
buttonStyle.pressedOffsetX = -2;

我通过一个Dialog盒子间接构建按钮:

new Dialog( ... ).button("Continue", null, buttonStyle);

我检查了.9.png文件以确保:

• 资产文件在Eclipse中刷新
• 元数据边界像素要么是完全不可见的,要么是完全可见的黑色
• Android draw9patch工具可以加载图像并验证它们

关于检查或更改内容的任何其他建议？

我正在尝试为我正在处理的Android应用程序中的聊天气泡创建模板.最终结果应如下所示:

我尝试使用Shapes,但我无法正确使用多个图层.我也尝试了一个9补丁图像,但创建9补丁是我得到的.我不知道如何使用它,特别是与头像,邮件标题和内容展示位置.

任何人都可以帮忙吗？

我对形状的了解相当有限,但我想我知道的就是了解你们会说些什么:)