右侧图像的按钮从右侧对齐 x 点答案

【问题标题】：Button with right image aligned x points from the right右侧图像的按钮从右侧对齐 x 点
【发布时间】：2017-01-25 11:45:19
【问题描述】：

我正在尝试创建一个如下所示的按钮：

所以它有一个边框和一个右图像视图。

我这样子类化 UIButton：

class ButtonWithRightImage: UIButton {

    override func imageRectForContentRect(contentRect:CGRect) -> CGRect {
        var imageFrame = super.imageRectForContentRect(contentRect)
        imageFrame.origin.x = CGRectGetMaxX(super.titleRectForContentRect(contentRect)) - CGRectGetWidth(imageFrame)
        return imageFrame
    }

    override func titleRectForContentRect(contentRect:CGRect) -> CGRect {
        var titleFrame = super.titleRectForContentRect(contentRect)
        if (self.currentImage != nil) {
            titleFrame.origin.x = CGRectGetMinX(super.imageRectForContentRect(contentRect))
        }
        return titleFrame
    }
}

我按如下方式创建了我的按钮：

lazy var testButton: ButtonWithRightImage = {
   let button = ButtonWithRightImage(forAutoLayout: ())

    button.setTitle("Privacy", forState: .Normal)
    button.setTitleColor(UIColor.DarkBlue(), forState: .Normal)

    button.layer.borderWidth = 1
    button.layer.borderColor = UIColor.grey().CGColor

    button.setImage(UIImage(named: "arrow"), forState: .Normal)

    button.contentHorizontalAlignment = .Left
    button.contentEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0)

    return button
}()

现在我的按钮看起来像这样：

如您所见，图像未与右侧 20 点对齐。我不知道该怎么做。我正在使用自动布局来显示按钮，所以我不能只修改我猜的框架。

【问题讨论】：

标签： ios uibutton swift2

【解决方案1】：

Swift 3 及更高版本 基于MinuMaster's answer 的解决方案。

此外，还添加了设置来设置图像的右填充和故事板中的文本的左填充。

另外，已经处理了文本长度，因此它不应与图像重叠。

class ButtonWithRightImage: UIButton {

    @IBInspectable var imagePaddingRight: CGFloat = 0.0
    @IBInspectable var textPaddingLeft: CGFloat = 0.0

    override func imageRect(forContentRect contentRect:CGRect) -> CGRect {
        var imageFrame = super.imageRect(forContentRect: contentRect)
        imageFrame.origin.x = contentRect.width - imageFrame.width - imagePaddingRight
        return imageFrame
    }

    override func titleRect(forContentRect contentRect:CGRect) -> CGRect {
        var titleFrame = super.titleRect(forContentRect: contentRect)
        if (self.currentImage != nil) {
            titleFrame.origin.x = super.imageRect(forContentRect: contentRect).minX + textPaddingLeft
            if titleFrame.size.width > frame.size.width - (imageView?.frame.size.width)! - imagePaddingRight {
                titleFrame.size.width = titleFrame.size.width - (imageView?.frame.size.width)! - imagePaddingRight
            }
        }
        return titleFrame
    }
}

【讨论】：

【解决方案2】：

由于您的 ButtonWithRightImage 类需要修改以根据您的要求实现输出。

class ButtonWithRightImage: UIButton {

    override func imageRectForContentRect(contentRect:CGRect) -> CGRect {
        var imageFrame = super.imageRectForContentRect(contentRect)
        imageFrame.origin.x = CGRectGetWidth(contentRect) - CGRectGetWidth(imageFrame)
        return imageFrame
    }

    override func titleRectForContentRect(contentRect:CGRect) -> CGRect {
        var titleFrame = super.titleRectForContentRect(contentRect)
        if (self.currentImage != nil) {
            titleFrame.origin.x = CGRectGetMinX(super.imageRectForContentRect(contentRect))
        }
        return titleFrame
    }
}

问题是您需要从container width 中减去图像宽度。而不是container maxX 值。

如果您对此有任何意见，请告诉我。

谢谢

【讨论】：

【解决方案3】：

为按钮设置 imageEdgeInsets 如下代码：-

lazy var testButton: ButtonWithRightImage = 
{
   let button = ButtonWithRightImage(forAutoLayout: ())

    button.setTitle("Privacy", forState: .Normal)
    button.setTitleColor(UIColor.DarkBlue(), forState: .Normal)

    button.layer.borderWidth = 1
    button.layer.borderColor = UIColor.grey().CGColor

    button.setImage(UIImage(named: "arrow"), forState: .Normal)

    button.contentHorizontalAlignment = .Left
    button.imageEdgeInsets = UIEdgeInsetsMake(0, 280, 0, 0)

    return button
}()

【讨论】：