如何在右側創建帶有圖標的按鈕？

Question

我想在按鈕標簽旁邊放一個圖標。

問題：Interface Builder 沒有將按鈕圖像放在右側。 所以在 (x) 旁邊還有一些空間。

謝謝你的幫助

Answer 1

您可以在 Interface Builder 中通過設置標題和圖像插入來執行此操作：

在這種情況下，我將title right inset設置為 30 ，將image left inset 設置為 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)
                ])
            }
        }
    }
}