用 3 个图像构建一个 UIButton

Posted 2023-03-21

【中文标题】用 3 个图像构建一个 UIButton

【英文标题】：Building a UIButton out of 3 images

【发布时间】：2013-05-28 22:39:40

【问题描述】：

我想用 3 张图片（A、B、C）构建一个 UIButton。 A和C是可伸缩组件（取决于按钮文字）中间部分是固定的。

将这些图像相互附加的最佳方式是什么？如何在不指定所有原点和宽度等的情况下灵活实现...是否需要有一个环绕的矩形？

【问题讨论】：

为什么不把这三个都编辑成一个图像并将该图像应用到 UIButton？

我想要一个灵活的Button，取决于不同的文字

【参考方案1】：

您需要在图像编辑器中将图像拼接在一起以创建单个图像。然后您将加载此图像，并使用UIImage resizableImageWithCapInsets:resizingMode: 方法创建一个可调整大小的版本。您将指定 UIEdgeInsets 以反映两个“端盖”图像的原始宽度。

对于按钮本身，您需要将此可调整大小的图像设置为按钮的背景图像。它不能用作前景图像。

   UIImage* bgImage = [[UIImage imageNamed:@"my_bg_image"] resizableImageWithCapInsets: UIEdgeInsetsMake(0, 10, 0, 10)];

   UIButton* b = [UIButton buttonWithType: UIButtonTypeCustom];
    [b setBackgroundImage: bgImage forState: UIControlStateNormal];

【参考方案2】：

我最近不得不实现类似的东西。 我的策略是使用 UIView 对象构建我想要的东西，然后将创建的视图写入 UIImage。

我建议：-创建一个容器视图-为按钮文本创建 UILabel，添加到容器视图-为标签 A 和 C，在获得文本后调整它们的大小，以及然后使用该信息将可拉伸按钮放置在视图中 - 定位子视图后，您可能需要重置容器视图的框架以确保它仍然正确。

一旦您的视图看起来符合您的要求，请使用以下方法将其写入图像：

UIGraphicsBeginImageContextWithOptions(container.frame.size, NO, 0); //or YES if you have no opacity in your images
[container.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

-然后您可以将其设置为 UIButton 的图像

【参考方案3】：

最好的方法是将 3 张图片放在一个文件中，并使用resizableImageWithCapInsets:。见文档here。

Here's a good tutorial 了解如何执行此操作。

// Set the button background image
UIImage * buttonImage = [UIImage imageNamed:@"button_resizable.png"];
UIImage * resizableButtonImage = [buttonImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 12)];
[button setBackgroundImage:resizableButtonImage forState:UIControlStateNormal];