使用自动布局创建带有文本和图像的 iOS 7 UIButton

Posted 2023-02-27

【中文标题】使用自动布局创建带有文本和图像的 iOS 7 UIButton

【英文标题】：Create iOS 7 UIButton With Text And Image Using Autolayout

【发布时间】：2014-07-06 18:33:56

【问题描述】：

在目标设备为 ios 7 iPhone 的情况下使用 Autolayout 和 Interface Builder，如何创建三个具有图像、分隔线和文本的 UIButton？每个按钮的 3 个图像都具有相同的大小。一个按钮中的线条和文本必须与其他按钮的线条和文本对齐（文本左对齐）。如果手机变成横向，事情就不会变得疯狂。所有按钮的大小都相同。

这些按钮是主屏幕布局的一部分，顶部有一个徽标等。当人们点击其中一个按钮时，应用程序会执行一些操作。

一个想法是创建一个没有文本的按钮，在顶部放置一个标签，在顶部放置一个细线视图，并将 uiimageview 放在顶部。也许甚至不需要明确的布局约束？也许“按钮”内容需要一个包含视图以将“按钮”片段保持在一起？

【问题讨论】：

图片来自以下站点。根据站点说明免费使用：openclipart.org/detail/190333/simple-car-icon-by-klaasdc-190333

【参考方案1】：

仅使用UIButton 即可实现图像+文本，无需添加任何自动布局约束。您使用-setImage:forState 和-setTitle:forState: 设置图像和文本，然后使用*Insets 属性调整按钮插图。要正确设置插图，请使用这个很棒的测试项目：https://github.com/jrturton/ButtonInsets（从文档中不太清楚如何同时使用它们，这个测试应用程序应该会给你这个想法）。

至于分隔符，我建议将其直接添加到您的图像中。

但如果你不想坚持UIButton 及其插图，你可以继承UIView，添加2 个UIImageViews（实际图像和分隔符），一个UILabel，然后抛出在几个限制条件下。要使视图可点击，请将UITapGestureRecognizer 附加到它。

【讨论】：

谢谢！我会试一试。我尝试了“包含 2 个图像、标签和一个按钮解决方案的视图”。这种方法会带来快乐和悲伤的后果。

正如您使用 UIButton 提议的那样，它运行良好。这清除了所有在点击它时表现不佳的问题。以下内容也有助于使按钮文本在点击时发生变化（请参阅“UIImageRenderingModeAlwaysOriginal”）：***.com/questions/18133465/…

经过深思熟虑，最简单的方法就是为整个按钮创建一个图像。前面评论中提到的 UIImageRenderingModeAlwaysOriginal 还是不错的。