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

Posted 2023-03-11

【中文标题】如何在右侧创建一个带有图标的按钮？

【英文标题】：How to create a button with an icon on the right-hand side?

【发布时间】：2014-07-01 12:46:39

【问题描述】：

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

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

感谢您的帮助

【问题讨论】：

那是一样的东西，但文字在图片下方，您可以根据自己的喜好进行调整：***.com/questions/11717219/uibutton-image-text-ios/…

【参考方案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;

【参考方案2】：

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

【参考方案3】：

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

【参考方案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)
                ])