定位 UIButton 的内部图像

Question

我在 UIButton 中添加了一个方形图像。目标是在按钮的左侧有方形图像，按钮的 4 边周围有空间边距 = 5。

代码如下：

button.imageView?.contentMode = .scaleAspectFit
button.contentHorizontalAlignment = .left;
button.imageEdgeInsets = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)

在界面构建中，我尝试在“控制”中左对齐，或者使用插图无济于事。

结果如下：

您会注意到几个问题：

1. 右边距大于 5（按钮和文本之间）
2. 左边距> 5
3. 其余、方面、上下边距都很好。

如何让这个按钮在左边，文字在右边？

Answer 1

你可以试试自定义UIButton

在 btn func imageRect(forContentRect contentRect: CGRect) -> CGRect 中设置图像的框架

在 btn func titleRect(forContentRect contentRect: CGRect) -> CGRect 中设置标题的框架

class CustomBtn: UIButton {

    
    
    let imgWidth: CGFloat = 16    // you set
    
    
    init() {
        super.init(frame: .zero)
    }
    
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    
    override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
        
        // contentRect.minX + Left margin + imgWidth + Right margin
        let x = contentRect.minX + 5 + imgWidth + 5
        // contentRect.width - (Left margin + + imgWidth + Right margin) - btnTrailing
        let width = contentRect.width - (5 + imgWidth + 5) - 5
        let y = contentRect.minY + 5
        //  contentRect.height - inset.top - inset.bottom
        let h = contentRect.height - 5 - 5 
        return CGRect(x: x, y: y, width: width, height: h)
    }
    
    
    
    
    override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
        let x: CGFloat = 5
        // make image center Y
        let y = contentRect.minY + (contentRect.height - imgWidth) / 2
        return CGRect(x: x, y: y, width: imgWidth, height: imgWidth)
    }

}

---

用于动态设置imgWidth，

class CustomBtn: UIButton {

    override func titleRect(forContentRect contentRect: CGRect) -> CGRect { 
        //  grab full button's height, contentRect.height
        let imgWidth = imageWidth(for: contentRect.height)

        // as above 
        // contentRect.minX + Left margin + imgWidth + Right margin
        let x = contentRect.minX + 5 + imgWidth + 5
        // contentRect.width - (Left margin + + imgWidth + Right margin) - btnTrailing
        let width = contentRect.width - (5 + imgWidth + 5) - 5
        let y = contentRect.minY + 5
        //  contentRect.height - inset.top - inset.bottom
        let h = contentRect.height - 5 - 5 
        return CGRect(x: x, y: y, width: width, height: h)
    }
    
    
    
    
    override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
        //  grab full button's height, contentRect.height
        let imgWidth = imageWidth(for: contentRect.height)
        
        // as above 
        let x: CGFloat = 5
        // make image center Y
        let y = contentRect.minY + (contentRect.height - imgWidth) / 2
        return CGRect(x: x, y: y, width: imgWidth, height: imgWidth)
    }

    func imageWidth(for btnHeight: CGFloat) -> CGFloat{
         return (btnHeight - CGFloat(5 * 2)) / 2
    }

}

Answer 2

首先，调整按钮图像资源的大小以校正 x2 或 x3 的比例。那就试试这门课吧。

class DefaultButton: UIButton {
    @discardableResult
    func setImage(_ image: UIImage?) -> Self {
        if let image = image {
            self.imageView?.contentMode = .center
            self.setImage(image, for: .normal)
            
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
            self.contentHorizontalAlignment = .left
            self.titleEdgeInsets.left = (frame.width - (imageEdgeInsets.left + imageView!.frame.width) - titleLabel!.frame.width) / 2
        }
        return self
    }
}

let button = DefaultButton(type: .system)
button.frame = CGRect(x: 0, y: 0, width: 110, height: 60)
button.setTitle("FRANCE", for: .normal)
button.setImage(UIImage(named: "france"))

这是我实现此类 UI 的仓库，您可以参考 https://github.com/haphanquang/FigmaKit