如何为rightBarButton同时设置标题与图标（标题在前）

嘿，我明白你的需求了——要在rightBarButtonItem上同时显示标题和图标，而且标题得在图标前面。你现在的代码主要有两个问题：一是按钮尺寸太小，放不下文字和图标；二是默认UIButton的布局是图标在左、标题在右，且没有调整间距，导致显示效果不符合预期。

下面是修改后的完整代码，我会一步步拆解关键调整点：

func setupRightBarButton() {
    // 1. 创建自定义按钮，设置足够容纳文字和图标的尺寸
    let settingButton = UIButton(type: .custom)
    // 宽度根据文字长度调整，高度设为44（和导航栏高度匹配，保证点击区域足够）
    settingButton.frame = CGRect(x: 0, y: 0, width: 100, height: 44)
    
    // 2. 设置标题和图标资源
    settingButton.setTitle("Settings", for: .normal)
    settingButton.setImage(UIImage(named: "setting"), for: .normal)
    
    // 3. 调整标题和图标的排列顺序与间距
    // 让按钮内容左对齐，确保标题在前、图标在后的视觉顺序
    settingButton.contentHorizontalAlignment = .left
    // 动态获取标题宽度，避免硬编码偏移量
    let titleWidth = settingButton.titleLabel?.intrinsicContentSize.width ?? 0
    // 给标题左侧留边距，右侧和图标保持间距
    settingButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 5)
    // 图标左侧偏移标题宽度+额外间距，和标题拉开距离
    settingButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: titleWidth + 15, bottom: 0, right: 0)
    
    // 4. 设置标题颜色（根据你的导航栏风格调整）
    settingButton.setTitleColor(.systemBlue, for: .normal)
    settingButton.setTitleColor(.systemGray, for: .highlighted)
    
    // 5. 添加点击事件（别忘了关联你的业务逻辑）
    settingButton.addTarget(self, action: #selector(settingButtonTapped), for: .touchUpInside)
    
    // 6. 包装成BarButtonItem并设置为右侧按钮
    let rightBarButton = UIBarButtonItem(customView: settingButton)
    self.navigationItem.rightBarButtonItem = rightBarButton
}

// 按钮点击的处理方法
@objc func settingButtonTapped() {
    print("Settings button tapped!")
    // 这里添加你的业务逻辑
}

关键调整说明： #

• 按钮尺寸：把宽度设为100（可根据文字长度灵活调整），高度和导航栏保持一致，既保证内容能显示完整，也避免点击区域过小。
• 内容对齐：设置contentHorizontalAlignment = .left，让标题和图标从按钮左侧开始排列，这样在导航栏右侧显示时，自然呈现标题在前、图标在后的效果。
• 间距控制：通过titleEdgeInsets和imageEdgeInsets动态调整元素位置，避免内容重叠，同时保证排版美观。
• 点击事件：一定要给按钮绑定点击事件，否则按钮只会显示但无法响应操作。

你可以根据自己的设计需求调整间距、颜色和按钮宽度，这样就能实现符合预期的右侧导航栏按钮效果啦！

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