如何实现UIButton标题左对齐、图片/背景右对齐？

当然没问题！完全可以用单个UIButton实现标题左对齐、图片右对齐的效果，不管是用Storyboard可视化配置还是代码动态设置，都能搞定，还能保持AutoLayout的简洁性。下面分两种方式给你详细说明：

方法一：通过Storyboard可视化配置 #

这种方式适合布局固定、内容不会动态变化的场景：

1. 选中你的UIButton，打开Attributes Inspector（右侧属性面板）：
   • 在「Control」区域，把Title的Alignment设置为「Left」，确保标题左对齐
   • 把按钮的Content Horizontal Alignment设置为「Left」，让整个内容块以左对齐为基准
2. 打开Size Inspector，调整内边距来移动图片到右侧：
   • 找到「Edge Insets」区域，这里有Content、Title、Image三种内边距
   • 先设置Content Insets：比如Left设为16，Right设为16，给按钮内容和边缘留出合适间距（数值根据你的设计需求调整）
   • 调整Title Edge Insets的Right值为负值（比如-40，具体数值看你的图片大小），让标题可以向右延伸，让出图片的位置
   • 调整Image Edge Insets的Left值为正值（比如按钮宽度减去图片宽度减去右边距，或者直接试一个合适的数值），把图片推到按钮右侧
3. （可选）如果需要更精准的配置，还可以用User Defined Runtime Attributes：
   • 打开Identity Inspector，找到「User Defined Runtime Attributes」
   • 添加属性：titleLabel.textAlignment（类型选Number，值设为0，对应左对齐）、contentEdgeInsets（类型选Rect，设置上下左右内边距）等

方法二：通过代码实现（更灵活） #

如果你的按钮内容是动态变化的，或者需要在多个按钮复用这个样式，代码实现会更可靠：

Swift 示例 #

可以给UIButton写一个扩展，方便全局调用：

extension UIButton {
    func setupLeftTitleRightImage(with spacing: CGFloat = 8) {
        // 强制标题左对齐
        titleLabel?.textAlignment = .left
        
        // 先让按钮布局一次，获取准确的标题和图片尺寸
        layoutIfNeeded()
        
        let imageWidth = imageView?.frame.width ?? 0
        let titleWidth = titleLabel?.frame.width ?? 0
        
        // 设置内容内边距，保证左右留白
        contentEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
        
        // 调整标题内边距：右边设为负的图片宽度+间距，让标题可以延伸到图片区域
        titleEdgeInsets = UIEdgeInsets(
            top: 0,
            left: 0,
            bottom: 0,
            right: -(imageWidth + spacing)
        )
        
        // 调整图片内边距：左边设为标题宽度+间距，把图片推到右侧
        imageEdgeInsets = UIEdgeInsets(
            top: 0,
            left: titleWidth + spacing,
            bottom: 0,
            right: 0
        )
    }
}

// 使用方式：在viewDidLoad或按钮内容设置完成后调用
yourButton.setupLeftTitleRightImage()

Objective-C 示例 #

同样可以写一个分类：

#import <UIKit/UIKit.h>

@interface UIButton (LeftTitleRightImage)
- (void)setupLeftTitleRightImageWithSpacing:(CGFloat)spacing;
@end

@implementation UIButton (LeftTitleRightImage)
- (void)setupLeftTitleRightImageWithSpacing:(CGFloat)spacing {
    // 标题左对齐
    self.titleLabel.textAlignment = NSTextAlignmentLeft;
    
    // 先布局获取准确尺寸
    [self layoutIfNeeded];
    
    CGFloat imageWidth = self.imageView.frame.size.width;
    CGFloat titleWidth = self.titleLabel.frame.size.width;
    
    // 内容内边距
    self.contentEdgeInsets = UIEdgeInsetsMake(8, 16, 8, 16);
    
    // 标题内边距
    self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -(imageWidth + spacing));
    
    // 图片内边距
    self.imageEdgeInsets = UIEdgeInsetsMake(0, titleWidth + spacing, 0, 0);
}
@end

// 使用方式：
[self.yourButton setupLeftTitleRightImageWithSpacing:8.0];

注意事项 #

• 如果按钮宽度是自适应的，建议在layoutSubviews里重新调用设置方法，避免旋转屏幕或内容变化时布局错乱
• 内边距的数值可以根据你的设计需求灵活调整，保证标题和图片的间距、按钮整体的留白符合预期

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