如何在Xcode中制作带图标与标题的自定义可点击按钮？

嘿，我明白你想要的效果——既能用容器视图精准控制图标和标题的布局，又能保留按钮的点击事件（@IBAction）。咱们分两种方法来实现，你可以根据需求选择：

方法一：自定义UIButton（推荐，符合iOS控件规范） #

这种方法不用额外容器，直接改造UIButton，既能精准控制图标和标题的尺寸，又能直接添加@IBAction，还自带按钮的高亮、禁用等原生状态。

步骤： #

1. 在Storyboard中准备Button

   • 拖一个Button到画布，把它的Type改成Custom（避免系统默认样式干扰）。
   • 给Button设置背景样式（比如圆角、边框，对应你图中右侧的按钮样式）。

2. 创建自定义Button类
   新建一个Swift文件，写入以下代码：

   import UIKit
   
   class IconTitleButton: UIButton {
       override init(frame: CGRect) {
           super.init(frame: frame)
           setupButtonLayout()
       }
       
       required init?(coder: NSCoder) {
           super.init(coder: coder)
           setupButtonLayout()
       }
       
       private func setupButtonLayout() {
           // 1. 固定图标尺寸（44x44）
           imageView?.translatesAutoresizingMaskIntoConstraints = false
           NSLayoutConstraint.activate([
               imageView!.widthAnchor.constraint(equalToConstant: 44),
               imageView!.heightAnchor.constraint(equalToConstant: 44)
           ])
           
           // 2. 设置标题标签样式与尺寸
           titleLabel?.font = UIFont.systemFont(ofSize: 14)
           titleLabel?.lineBreakMode = .byTruncatingTail // 文本过长时自动截断
           titleLabel?.translatesAutoresizingMaskIntoConstraints = false
           NSLayoutConstraint.activate([
               titleLabel!.widthAnchor.constraint(equalToConstant: 66),
               titleLabel!.heightAnchor.constraint(equalToConstant: 20)
           ])
           
           // 3. 调整图标与标题的间距和对齐方式
           let spacing: CGFloat = 8
           imageEdgeInsets = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: spacing)
           titleEdgeInsets = UIEdgeInsets(top: 0, left: spacing, bottom: 0, right: 8)
           contentHorizontalAlignment = .left // 让图标和标题整体左对齐
       }
   }
   

3. 关联自定义类
   回到Storyboard，选中刚才的Button，在Identity Inspector里把Class改成IconTitleButton。

4. 添加@IBAction
   直接从Button拖线到ViewController，创建对应的@IBAction方法就行，和普通Button完全一样。

方法二：容器视图+透明Button（满足你用容器对齐的需求） #

如果你更倾向于用容器视图来管理图标和标题的布局，可以用这种方法，同时通过透明Button来获取点击事件：

步骤： #

1. 搭建容器布局

   • 拖一个UIView作为容器，设置背景、圆角、边框等样式。
   • 在容器内拖UIImageView，设置尺寸44x44，添加图标，用Auto Layout固定位置（比如左对齐，垂直居中）。
   • 在容器内拖UILabel，设置字体14pt系统字体，宽度66，高度20，Line Break选Truncate Tail，用Auto Layout放在图标右侧，保持合适间距。

2. 添加透明Button获取点击事件

   • 拖一个Button到容器上，用Auto Layout约束让它的top、leading、trailing、bottom都和容器对齐（覆盖整个容器）。
   • 把Button的Background设为透明，Type改成Custom，这样点击容器任何区域都会触发Button的事件。

3. 添加@IBAction
   从这个透明Button拖线到ViewController，创建@IBAction方法即可。

为什么你之前用Storyboard设置Button没成功？ #

大概率是没把Button的Type改成Custom——默认的System类型Button有自带的内边距和样式限制，改成Custom后，你才能自由调整内容内边距、图标和标题的位置。

内容的提问来源于stack exchange，提问作者Olek