导航栏UIButton点击后标题与图片位置意外互换排查

点击后图标和文字位置互换，是UIBarButtonItem的自定义视图管理逻辑和UIButton默认布局机制冲突导致的：

• 当按钮在普通态、高亮态之间切换时，UIBarButtonItem会自动重设内部customView的semanticContentAttribute属性，初始设置的.forceRightToLeft会被系统覆写为默认值，直接反转排布顺序。
• 直接给button.imageView添加的宽高约束，会和UIButton内部自动生成的布局约束产生优先级冲突，状态切换时系统内部约束优先级更高，会打破手动添加的约束，加剧布局异常。

预期布局效果：

异常效果：

不要依赖semanticContentAttribute实现图标居右的效果，自定义UIButton子类手动控制布局，从根源规避系统属性重置的问题，代码可直接复用：

import UIKit

class RightIconButton: UIButton {
    /// 图标与标题的间距
    var itemSpacing: CGFloat = 4 {
        didSet { setNeedsLayout() }
    }
    /// 图标固定尺寸
    var iconSize: CGSize = CGSize(width: 8, height: 8) {
        didSet { setNeedsLayout() }
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        guard let titleLabel = titleLabel, let imageView = imageView else { return }
        
        let titleSize = titleLabel.intrinsicContentSize
        // 标题居左排布
        titleLabel.frame = CGRect(
            x: 0,
            y: (bounds.height - titleSize.height) / 2,
            width: titleSize.width,
            height: titleSize.height
        )
        // 图标排布在标题右侧
        imageView.frame = CGRect(
            x: titleSize.width + itemSpacing,
            y: (bounds.height - iconSize.height) / 2,
            width: iconSize.width,
            height: iconSize.height
        )
        imageView.contentMode = .scaleAspectFit
    }
    
    override var intrinsicContentSize: CGSize {
        let titleSize = titleLabel?.intrinsicContentSize ?? .zero
        return CGSize(
            width: titleSize.width + iconSize.width + itemSpacing,
            height: max(titleSize.height, iconSize.height)
        )
    }
}

class ViewController: UIViewController {
    private lazy var leftButton: RightIconButton = {
        let button = RightIconButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(didTap), for: .touchUpInside)
        
        button.setImage(UIImage(systemName: "trash"), for: .normal)
        button.setTitle("Trash", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        // 可按需调整间距、图标尺寸
        button.itemSpacing = 4
        button.iconSize = CGSize(width: 8, height: 8)
        
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.leftBarButtonItem = UIBarButtonItem(customView: leftButton)
    }

    @objc private func didTap() {}
}

如果不想新增按钮子类，可以保留原有semanticContentAttribute写法，在所有可能触发系统重设属性的时机重新赋值，同时移除对imageView的直接约束，改用边距控制布局：

class ViewController: UIViewController {
    private lazy var leftButton: UIButton = {
        let button = UIButton(type: .system)
        button.addTarget(self, action: #selector(didTap), for: .touchUpInside)
        
        button.setImage(UIImage(systemName: "trash"), for: .normal)
        button.setTitle("Trash", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        
        // 控制图标和文字间距
        button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 4, bottom: 0, right: 0)
        button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 4)
        // 给按钮设置明确尺寸，避免系统计算布局偏差
        button.frame = CGRect(x: 0, y: 0, width: 60, height: 30)
        button.contentHorizontalAlignment = .left
        button.semanticContentAttribute = .forceRightToLeft
        
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.leftBarButtonItem = UIBarButtonItem(customView: leftButton)
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // 布局时强制重设语义属性，覆盖系统的默认设置
        leftButton.semanticContentAttribute = .forceRightToLeft
    }

    @objc private func didTap() {
        // 点击触发状态切换后重设语义属性
        leftButton.semanticContentAttribute = .forceRightToLeft
    }
}

该方案属于补丁式修复，若后续iOS版本修改UIBarButtonItem的状态更新逻辑，仍可能出现布局异常，生产环境优先使用自定义子类方案。

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