iPhone UIButton - 图像位置

Question

我有一个UIButton文本"探索应用程序"和UIImage(>)在Interface Builder它看起来像:

[ (>) Explore the app ]

但我需要UIImage在文本之后放置:

[ Explore the app (>) ]

我怎样才能UIImage向右移动？

Answer 1

我对此的解决方案非常简单

[button sizeToFit];
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, button.imageView.frame.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width);

Answer 2

在iOS 9以后,似乎实现这一点的一种简单方法是强制视图的语义.

或者以编程方式,使用:

button.semanticContentAttribute = .ForceRightToLeft

Answer 3

设置imageEdgeInset和titleEdgeInset移动图像中的组件.您还可以使用全尺寸的图形创建按钮,并将其用作按钮的背景图像(然后用于titleEdgeInsets移动标题).

Answer 4

Raymond W的答案最好.使用自定义layoutSubviews子类UIButton.非常简单,这是一个适用于我的layoutSubviews实现:

- (void)layoutSubviews
{
    // Allow default layout, then adjust image and label positions
    [super layoutSubviews];

    UIImageView *imageView = [self imageView];
    UILabel *label = [self titleLabel];

    CGRect imageFrame = imageView.frame;
    CGRect labelFrame = label.frame;

    labelFrame.origin.x = imageFrame.origin.x;
    imageFrame.origin.x = labelFrame.origin.x + CGRectGetWidth(labelFrame);

    imageView.frame = imageFrame;
    label.frame = labelFrame;
}

Answer 5

子类化UIButton和重写layoutSubviews怎么样？

然后后处理self.imageView&的位置self.titleLabel

Answer 6

另一种简单的方法(仅限iOS 9)是将UIButton子类化为覆盖这两种方法

override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
    var rect = super.titleRectForContentRect(contentRect)
    rect.origin.x = 0
    return rect
}

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

contentEdgeInsets 已经考虑过使用super了.

Answer 7

如果您的应用同时支持"从左到右"和"从右到左",则不能强制选择按钮"从右到左".

对我有用的解决方案是一个子类,可以添加到Storyboard中的按钮,并且可以很好地处理约束(在iOS 11中测试):

class ButtonWithImageAtEnd: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        if let imageView = imageView, let titleLabel = titleLabel {
            let padding: CGFloat = 15
            imageEdgeInsets = UIEdgeInsets(top: 5, left: titleLabel.frame.size.width+padding, bottom: 5, right: -titleLabel.frame.size.width-padding)
            titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageView.frame.width, bottom: 0, right: imageView.frame.width)
        }

    }

}

'padding'将是标题和图像之间的空间.

Answer 8

在Swift中：

override func layoutSubviews(){
    super.layoutSubviews()

    let inset: CGFloat = 5

    if var imageFrame = self.imageView?.frame,
       var labelFrame = self.titleLabel?.frame {

       let cumulativeWidth = imageFrame.width + labelFrame.width + inset
       let excessiveWidth = self.bounds.width - cumulativeWidth
       labelFrame.origin.x = excessiveWidth / 2
       imageFrame.origin.x = labelFrame.origin.x + labelFrame.width + inset

       self.imageView?.frame = imageFrame
       self.titleLabel?.frame = labelFrame  
    }
}

Answer 9

这是我自己的做法，（大约10年后）

1. UIButton 的子类（Button，因为我们生活在 Swift 时代）
2. 将图像和标签放入堆栈视图中。

class CustomButton: Button {

    var didLayout: Bool = false // The code must be called only once

    override func layoutSubviews() {
        super.layoutSubviews()
        if !didLayout, let imageView = imageView, let titleLabel = titleLabel {
            didLayout = true
            let stack = UIStackView(arrangedSubviews: [titleLabel, imageView])
            addSubview(stack)
            stack.edgesToSuperview() // I use TinyConstraints library. You could handle the constraints directly
            stack.axis = .horizontal
        }
    }
}