如何在右侧创建一个带有图标的按钮？

Question

我想在按钮标签旁边放一个图标。

问题：Interface Builder 将按钮图像放置在右侧。所以 (x) 旁边还有一些空间。

感谢您的帮助

Answer 1

您可以在 Interface Builder 中通过设置标题和图像插入来做到这一点：

在这种情况下，我将 title 右插图设置为 30，图像左插图设置为 80。您可以通过设置UIButton 的imageEdgeInset 和titleEdgeInset 属性在代码中实现相同的目的。知道 UIButton 的子视图的大小后，您可能可以使用以下方法计算边缘插图：

CGSize labelWidth = myButton.titleLabel.frame.size.width;
CGSize imageWidth = myButton.imageView.frame.size.width;
myButton.titleEdgeInsets = (UIEdgeInsets){0.0, -imageWidth, 0.0, imageWidth};
myButton.imageEdgeInsets = (UIEdgeInsets){0.0, labelWidth, 0.0, -labelWidth};

Answer 2

在 Xcode 8 中，您会在尺寸检查器中找到这些属性：

Answer 3

在窗口上选择图像（如果（x）是图像）或标题（如果（x）是简单的键）并根据您的需要设置左，右偏移

Answer 4

我做到了：

class CustomButton: UIButton {
    
    open var rightIcon: UIImage? {
        didSet {
            rightIconImage = UIImageView(image: rightIcon?.withRenderingMode(.alwaysTemplate))
            rightIconImage?.tintColor = .white
            if let rightIconImage = rightIconImage {
                addSubview(rightIconImage)
            }
            layoutSubviews()
        }
    }
    
    open override func layoutSubviews() {
        super.layoutSubviews()
        setupRightIconIfNeeded()
    }
    
    func setupRightIconIfNeeded() {
        if let rightIconImage = rightIconImage {
            rightIconImage.translatesAutoresizingMaskIntoConstraints = false
            titleLabel?.translatesAutoresizingMaskIntoConstraints = false
            if let titleLabel = titleLabel, titleLabel.frame.width > 0 {
                let paddingLeft = (frame.width - titleLabel.frame.width - spacing - iconSize) / 2
                NSLayoutConstraint.deactivate(constraints)
                NSLayoutConstraint.deactivate(titleLabel.constraints)
                NSLayoutConstraint.activate([
                    //set height constraint for button
                    heightAnchor.constraint(equalToConstant: apolloSize.height),
                    //set constraint for title label
                    titleLabel.widthAnchor.constraint(equalToConstant: titleLabel.frame.width),
                    titleLabel.heightAnchor.constraint(equalToConstant: titleLabel.frame.height),
                    titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
                    titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: paddingLeft),
                    //set constraint for right icon
                    rightIconImage.leadingAnchor.constraint(equalTo: titleLabel.trailingAnchor, constant: spacing),
                    rightIconImage.centerYAnchor.constraint(equalTo: titleLabel.centerYAnchor),
                    rightIconImage.widthAnchor.constraint(equalToConstant: iconSize),
                    rightIconImage.heightAnchor.constraint(equalToConstant: iconSize)
                ])
            }
        }
    }
}