定位 UIButton 的内部图像

Question

我在 UIButton 中添加了一个方形图像。目标是在按钮左侧放置方形图像，space 按钮 4 边的边距 = 5.

代码如下：

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

在界面构建中，我尝试在“Control”中左对齐，或者玩 insets 都无济于事。

结果如下：

您可以注意到几个问题：

右边距 > 5（按钮和文本之间）
左边距 > 5
其余部分、宽高比以及上下边距都可以。

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

Answer 1

首先，调整您的按钮图像资源的大小，以更正 x2 或 x3 的比例。然后试试这个 class.

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

Answer 2

你可以试试自定义 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
    }

}

定位 UIButton 的内部图像

Position UIButton's inside image

uibutton

ios

swift