如何通过Storyboard和代码创建左侧带可选单选图、右侧带文字的按钮？

没问题！我来给你详细讲讲怎么用Storyboard可视化和编程两种方式创建这种左侧带可选单选图、右侧显示文字的按钮，两种方式都很实用，看你需求选就行～

这种方式适合快速搭建UI，不用写太多代码：

• 1. 打开你的Storyboard，从控件库拖一个UIButton到目标ViewController的视图上，调整好它的大小和位置（比如用Auto Layout约束固定位置）。
• 2. 配置按钮基础样式
  • 选中按钮，在右侧Attributes Inspector面板里，先把Button Type改成Custom（这样能更灵活控制样式，避免系统默认的按钮样式干扰）。
  • 点击Image选项，选择你准备好的未选中状态单选图，记得在Asset库里把这张图的Render As设置为Template Image，这样后续可以通过tintColor轻松修改图片颜色。
  • 在Title输入框里填写你要显示的文字，比如"选择此选项"。
• 3. 调整图片与文字的布局
  • 还是在Attributes Inspector里，找到Edge区域，设置：
    • Image Edge Insets：Top: 0, Left: 0, Bottom: 0, Right: 8（让图片和文字之间保留8pt的间距，看起来更美观）
    • Title Edge Insets：Top: 0, Left: 8, Bottom: 0, Right: 0
  • 把Content Horizontal Alignment设置为Left，让按钮的内容整体靠左对齐，符合你要的左侧图、右侧文字的布局。
• 4. 添加选中状态的图片
  • 在Attributes Inspector的State Config下拉框里切换到Selected状态，然后选择你准备好的选中状态单选图，同样设置为Template模式。
• 5. 绑定点击事件（实现单选状态切换）
  • 按住Control键，从按钮拖到ViewController的代码文件里，创建一个IBAction方法，在方法里切换按钮的isSelected属性：

    @IBAction func optionButtonTapped(_ sender: UIButton) {
        // 点击切换选中/未选中状态
        sender.isSelected.toggle()
    }
    

如果需要动态创建按钮（比如根据数据生成多个选项），编程方式会更灵活，下面分别给出Swift和Objective-C的实现：

Swift版本 #

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 1. 创建自定义按钮实例
        let optionButton = UIButton(type: .custom)
        // 关闭自动布局转换，方便手动设置约束
        optionButton.translatesAutoresizingMaskIntoConstraints = false
        
        // 2. 设置文字相关属性
        optionButton.setTitle("选项1", for: .normal)
        optionButton.setTitleColor(.darkText, for: .normal)
        optionButton.titleLabel?.font = UIFont.systemFont(ofSize: 16)
        
        // 3. 设置单选图片（未选中/选中状态）
        let unselectedRadio = UIImage(named: "unselected_radio")?.withRenderingMode(.alwaysTemplate)
        let selectedRadio = UIImage(named: "selected_radio")?.withRenderingMode(.alwaysTemplate)
        optionButton.setImage(unselectedRadio, for: .normal)
        optionButton.setImage(selectedRadio, for: .selected)
        
        // 4. 调整图片与文字的间距和对齐方式
        optionButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 8)
        optionButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0)
        optionButton.contentHorizontalAlignment = .left
        
        // 5. 添加点击事件
        optionButton.addTarget(self, action: #selector(optionButtonTapped(_:)), for: .touchUpInside)
        
        // 6. 将按钮添加到视图并设置Auto Layout约束
        view.addSubview(optionButton)
        NSLayoutConstraint.activate([
            optionButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            optionButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            optionButton.widthAnchor.constraint(equalToConstant: 220),
            optionButton.heightAnchor.constraint(equalToConstant: 44)
        ])
    }
    
    // 点击事件处理：切换选中状态
    @objc private func optionButtonTapped(_ sender: UIButton) {
        sender.isSelected.toggle()
    }
}

Objective-C版本 #

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 1. 创建自定义按钮
    UIButton *optionButton = [UIButton buttonWithType:UIButtonTypeCustom];
    optionButton.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 2. 设置文字属性
    [optionButton setTitle:@"选项1" forState:UIControlStateNormal];
    [optionButton setTitleColor:[UIColor darkTextColor] forState:UIControlStateNormal];
    optionButton.titleLabel.font = [UIFont systemFontOfSize:16];
    
    // 3. 设置单选图片
    UIImage *unselectedRadio = [[UIImage imageNamed:@"unselected_radio"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    UIImage *selectedRadio = [[UIImage imageNamed:@"selected_radio"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    [optionButton setImage:unselectedRadio forState:UIControlStateNormal];
    [optionButton setImage:selectedRadio forState:UIControlStateSelected];
    
    // 4. 调整布局
    optionButton.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 8);
    optionButton.titleEdgeInsets = UIEdgeInsetsMake(0, 8, 0, 0);
    optionButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
    
    // 5. 添加点击事件
    [optionButton addTarget:self action:@selector(optionButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
    
    // 6. 添加到视图并设置约束
    [self.view addSubview:optionButton];
    [NSLayoutConstraint activateConstraints:@[
        [optionButton.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
        [optionButton.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
        [optionButton.widthAnchor constraintEqualToConstant:220],
        [optionButton.heightAnchor constraintEqualToConstant:44]
    ]];
}

- (void)optionButtonTapped:(UIButton *)sender {
    sender.selected = !sender.selected;
}

@end

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