iPhone的UIButton - 图像位置

Question

我有文字UIButton“探索应用”和UIImage（>） 在Interface Builder它看起来像：

[ (>) Explore the app ] 

但我需要把这个UIImage后的文字：

[ Explore the app (>) ] 

如何将UIImage移动到右侧？

Answer 1

如果您的应用程序同时支持“从左到右”和“从右到左”，则无法选择按钮的从右到左。

为我工作的解决方案是可以加入到故事板的按钮，一个子类，并用约束（在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) 
     } 

    } 

} 

在哪里“填充”将是空间标题和图像之间。

Answer 2

设置imageEdgeInset和titleEdgeInset以在图像内移动组件。您还可以使用这些全尺寸图形创建一个按钮，并将其用作该按钮的背景图像（然后使用titleEdgeInsets来移动标题）。

Answer 3

那么子类化UIButton和覆盖layoutSubviews呢？

然后后期处理self.imageView & self.titleLabel

Answer 4

雷蒙德·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

// Get the size of the text and image 
CGSize buttonLabelSize = [[self.button titleForState:UIControlStateNormal] sizeWithFont:self.button.titleLabel.font]; 
CGSize buttonImageSize = [[self.button imageForState:UIControlStateNormal] size]; 

// You can do this line in the xib too: 
self.button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight; 

// Adjust Edge Insets according to the above measurement. The +2 adds a little space 
self.button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -(buttonLabelSize.width+2)); 
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, buttonImageSize.width+2); 

这将创建一个右对齐按钮，像这样：

[   button label (>)] 

按钮不会调整它的宽度根据上下文，标签左侧会出现空格。你可以通过buttonLabelSize.width和buttonImageSize.width计算按钮的框架宽度来解决这个问题。

Answer 6

我对这个解决方案很简单

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

号楼关闭的@split答案...

答案是太棒了，但它忽略了一个事实，即该按钮可定制的图像和预先设置的标题边缘插页（例如，在故事板中）。

例如，您可能希望图像从容器的顶部和底部有一些填充，但仍然将图像移动到按钮的右侧。

我扩展了这个方法的理念： -

- (void) moveImageToRightSide { 
    [self sizeToFit]; 

    CGFloat titleWidth = self.titleLabel.frame.size.width; 
    CGFloat imageWidth = self.imageView.frame.size.width; 
    CGFloat gapWidth = self.frame.size.width - titleWidth - imageWidth; 
    self.titleEdgeInsets = UIEdgeInsetsMake(self.titleEdgeInsets.top, 
              -imageWidth + self.titleEdgeInsets.left, 
              self.titleEdgeInsets.bottom, 
              imageWidth - self.titleEdgeInsets.right); 

    self.imageEdgeInsets = UIEdgeInsetsMake(self.imageEdgeInsets.top, 
              titleWidth + self.imageEdgeInsets.left + gapWidth, 
              self.imageEdgeInsets.bottom, 
              -titleWidth + self.imageEdgeInsets.right - gapWidth); 
} 

Answer 8

在SWIFT：

override func layoutSubviews() 
{ 
    super.layoutSubviews() 

    var imageFrame = self.imageView?.frame; 
    var labelFrame = self.titleLabel?.frame; 

    let inset: CGFloat = 5 

    if var imageFrame = imageFrame 
    { 
     if var labelFrame = labelFrame 
     { 
      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

在的iOS 9起，似乎是一个简单的方式实现这一目标是迫使语义的看法。

或者编程，使用：

button.semanticContentAttribute = .ForceRightToLeft 

Answer 10

button.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft; 
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight; 

Answer 11

另一种简单的方法（这不是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已经被超级使用考虑在内。

Answer 12

此方法适用于iOS的7及以上

只要继承的UIButton

@interface UIButton (Image) 

- (void)swapTextWithImage; 

@end 

@implementation UIButton (Image) 

- (void)swapTextWithImage { 
    const CGFloat kDefaultPadding = 6.0f; 
    CGSize buttonSize = [self.titleLabel.text sizeWithAttributes:@{ 
                   NSFontAttributeName:self.titleLabel.font 
                   }]; 

    self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView.frame.size.width, 0, self.imageView.frame.size.width); 
    self.imageEdgeInsets = UIEdgeInsetsMake(0, buttonSize.width + kDefaultPadding, 0, -buttonSize.width); 
} 

@end 

用法（某处在您的类）：

[self.myButton setTitle:@"Any text" forState:UIControlStateNormal]; 
[self.myButton swapTextWithImage]; 

Answer 13

基于以往的答案。如果您想在图标和按钮标题之间留有余量，则代码必须稍作更改才能防止标签和图标浮动到本质尺寸按钮的上方。

let margin = CGFloat(4.0) 
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) 
button.contentEdgeInsets = UIEdgeInsetsMake(0, margin, 0, margin) 

最后的代码行对于自动布局的内在内容大小计算很重要。