blocks|key|1078801|text|我对此的解决方案非常简单|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1078802|[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);|code-block|syntax|javascript|1078803|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My solution to this is quite simple

<pre><code>[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);
</code></pre>

blocks|key|1078553|text|设置imageEdgeInset和titleEdgeInset以在映像中移动组件。您还可以使用这些全尺寸的图形创建一个按钮，并将其用作按钮的背景图像(然后使用titleEdgeInsets移动标题)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1078554|entityMap^0|2|E|H|E|27|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

Set the <code>imageEdgeInset</code> and <code>titleEdgeInset</code> to move the components around within your image. You could also create a button using those graphics that is full size, and use that as the background image for the button (then use <code>titleEdgeInsets</code> to move the title around).

blocks|key|1078661|text|Raymond+W的答案在这里最好。具有自定义layoutSubviews的子类UIButton。非常简单，下面是一个为我工作的layoutSubviews实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1078662|-+(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+%2B+CGRectGetWidth(labelFrame);

++++imageView.frame+=+imageFrame;
++++label.frame+=+labelFrame;
}|code-block|syntax|javascript|1078663|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Raymond W's answer is best here. Subclass UIButton with custom layoutSubviews. Extremely simple to do, here's a layoutSubviews implementation that worked for me:

<pre><code>- (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;
}
</code></pre>

blocks|key|1293544|text|如何实现UIButton的子类化和重写layoutSubviews|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1293545|然后对self.imageView和self.titleLabel的位置进行后处理|1293546|entityMap^0|4|8|J|E|0|3|E|I|F|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

What about subclassing <code>UIButton</code> and overriding <code>layoutSubviews</code>?

Then post-processing the locations of <code>self.imageView</code> &amp; <code>self.titleLabel</code>

blocks|key|1293853|text|另一种简单的方法(不仅仅是iOS+9)是通过子类UIButton来覆盖这两个方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1293854|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
}|code-block|syntax|javascript|1293855|通过使用super，已经考虑到了contentEdgeInsets。|offset|length|style|CODE|1293856|entityMap^0|0|0|G|H|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Another simple way (that is NOT iOS 9 only) is to subclass UIButton to override these two methods

<pre><code>override func titleRectForContentRect(contentRect: CGRect) -&gt; CGRect {
 var rect = super.titleRectForContentRect(contentRect)
 rect.origin.x = 0
 return rect
}

override func imageRectForContentRect(contentRect: CGRect) -&gt; CGRect {
 var rect = super.imageRectForContentRect(contentRect)
 rect.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(rect)
 return rect
}
</code></pre>

<code>contentEdgeInsets</code> is already taken into account by using super.

blocks|key|1079105|text|如果你的应用程序同时支持“从左到右”和“从右到左”，那么强制按钮“从右到左”是不可取的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079106|对我有效的解决方案是一个子类，它可以添加到故事板中的按钮上，并且可以很好地与约束一起工作(在iOS+11中经过测试)：|1079107|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%2Bpadding,+bottom:+5,+right:+-titleLabel.frame.size.width-padding)
++++++++++++titleEdgeInsets+=+UIEdgeInsets(top:+0,+left:+-imageView.frame.width,+bottom:+0,+right:+imageView.frame.width)
++++++++}

++++}

}|code-block|syntax|javascript|1079108|其中“填充”是标题和图像之间的空格。|1079109|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Forcing 'right-to-left' for the button is not an option if your app supports both 'left-to-right' and 'right-to-left'.

The solution that worked for me is a subclass that can be added to the button in the Storyboard and works well with constraints (tested in iOS 11):

<pre><code>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)
 }

 }

}
</code></pre>

Where 'padding' would be the space between the title and the image.

blocks|key|1078845|text|在Swift中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1078846|override+func+layoutSubviews(){
++++super.layoutSubviews()

++++let+inset:+CGFloat+=+5

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

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

+++++++self.imageView?.frame+=+imageFrame
+++++++self.titleLabel?.frame+=+labelFrame++
++++}
}|code-block|syntax|javascript|1078847|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In Swift:

<pre><code>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 
 }
}
</code></pre>

blocks|key|1078828|text|通过@split构建答案...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1078829|答案是奇妙的，但它忽略了一个事实，即按钮可能具有预先设置的自定义图像和标题边缘插入(例如，在故事板中)。|1078830|例如，您可能希望图像从容器的顶部和底部有一些填充，但仍然将图像移动到按钮的右侧。|1078831|我用这个方法扩展了这个概念：|1078832|-+(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+%2B+self.titleEdgeInsets.left,
++++++++++++++++++++++++++++++++++++++++++++self.titleEdgeInsets.bottom,
++++++++++++++++++++++++++++++++++++++++++++imageWidth+-+self.titleEdgeInsets.right);

++++self.imageEdgeInsets+=+UIEdgeInsetsMake(self.imageEdgeInsets.top,
++++++++++++++++++++++++++++++++++++++++++++titleWidth+%2B+self.imageEdgeInsets.left+%2B+gapWidth,
++++++++++++++++++++++++++++++++++++++++++++self.imageEdgeInsets.bottom,
++++++++++++++++++++++++++++++++++++++++++++-titleWidth+%2B+self.imageEdgeInsets.right+-+gapWidth);
}|code-block|syntax|javascript|1078833|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Building off the answer by @split...

The answer is fantastic, but it ignores the fact that the button may have custom image and title edge insets that are set beforehand (e.g. in storyboard). 

For instance, you may want the image have some padding from the top and bottom of the container, but still move the image to the right side of the button.

I extended the concept with this method:- 

<pre><code>- (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);
}
</code></pre>

blocks|key|1078761|text|//+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+%2B2+adds+a+little+space+
self.button.imageEdgeInsets+=+UIEdgeInsetsMake(0,+0,+0,+-(buttonLabelSize.width%2B2));
self.button.titleEdgeInsets+=+UIEdgeInsetsMake(0,+0,+0,+buttonImageSize.width%2B2);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1078762|这将创建一个右对齐的按钮，如下所示：|unstyled|1078763|[+++++++++++button+label+(>)]|1078764|该按钮不会根据上下文调整其宽度，因此标签左侧将出现空格。您可以通过根据buttonLabelSize.width和buttonImageSize.width计算按钮的框架宽度来解决此问题。|1078765|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>// 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);
</code></pre>

This creates a right-aligned button, like so:

<pre><code>[ button label (&gt;)]
</code></pre>

The button doesn't adjust it's width according to the context, so space will appear on the left of the label. You could solve this by calculating the button's frame width from the buttonLabelSize.width and the buttonImageSize.width.

blocks|key|1293790|text|button.semanticContentAttribute+=+UISemanticContentAttributeForceRightToLeft;
button.contentHorizontalAlignment+=+UIControlContentHorizontalAlignmentRight;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1293791|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>button.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
</code></pre>

blocks|key|1079033|text|基于之前的答案。如果您希望在图标和按钮标题之间留出边距，代码必须稍作更改，以防止标签和图标浮动在固有大小的按钮的边界之上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079034|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)|code-block|syntax|javascript|1079035|最后一行代码对于自动布局的固有内容大小计算非常重要。|1079036|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Building on previous answers. If you want to have a margin between the icon and the title of the button, the code has to change a little to prevent floating of the label and icon above the bounds of intrinsically sized buttons.

<pre><code>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)
</code></pre>

The last code line is important for the intrinsically content size calculation for auto layout.

blocks|key|1078991|text|此解决方案适用于iOS+7及更高版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1078992|只是UIButton的子类|1078993|@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+%2B+kDefaultPadding,+0,+-buttonSize.width);+
}

@end|code-block|syntax|javascript|1078994|用法(在类中的某个位置)：|1078995|[self.myButton+setTitle:@"Any+text"+forState:UIControlStateNormal];
[self.myButton+swapTextWithImage];|1078996|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This solution works iOS 7 and above

Just subclass UIButton

<pre><code>@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
</code></pre>

Usage (Somewhere in your class):

<pre><code>[self.myButton setTitle:@"Any text" forState:UIControlStateNormal];
[self.myButton swapTextWithImage];
</code></pre>

I have a <code>UIButton</code> with text "Explore the app" and <code>UIImage</code> (>)
In <code>Interface Builder</code> it looks like:

<pre><code>[ (&gt;) Explore the app ]
</code></pre>

But I need to place this <code>UIImage</code> AFTER the text:

<pre><code>[ Explore the app (&gt;) ]
</code></pre>

How can I move the <code>UIImage</code> to the right?

iPhone UIButton - image position

容器

Swift

在Interface Builder中，我有一个带有文本"Explore the app“和UIImage (>)的UIButton，它看起来像这样：[ (>) Explore the app ]但我需要将此UIImage放在文本后面：[ Explore the app (>) ]如何将UIImage移到右侧？

问iPhone UIButton -图像位置
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPhone UIButton -图像位置EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPhone UIButton -图像位置
EN