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

Question

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

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

我像这样子类化了 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 点对齐。我不知道该怎么做。我正在使用自动布局来显示按钮，所以我不能只修改我猜的框架。

Answer 1

像下面的代码一样为按钮设置 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
}()

Answer 2

因为您的 ButtonWithRightImage class 需要修改才能根据您的要求实现输出。

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 值。

如果您对此有任何评论，请告诉我。

谢谢

Answer 3

Swift3及以上解决方案基于。

此外，还添加了为故事板中的图像设置右内边距和为文本设置左内边距的规定。

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

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
    }
}

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

Button with right image aligned x points from the right

uibutton

ios

swift2