UIButton,送给多数开发者的释疑文章,关于如何正确调整imageView及titleLabel的位置

关注

原创最新推荐文章于 2026-05-01 09:30:45 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

iOS 自定义UIButton UIButton的默认布局是:title在右,image在左; 很多时候我们需要的是title在左边,或者title在下面,这时就需要调整UIButton的TitleLabel和ImageView的位置了,查了很多资料,要么零零散散的介绍,要么就是特别复杂的实现;经过一段时间的学习,在这里总结一下实现的方式; 一种是设置UIButton的以下两个属性:@property(nonatomic) U 阅读详情

一些开发者知道通过imageEdgeInsets及titleEdgeInsets可以调整imageView及titleLabel的位置,但不知道如何正确计算,基本上都是通过多次调整相应的值达到期望的目标(次数过多可能会失去信心),究其原因就是不能正确理解imageEdgeInsets及titleEdgeInsets.

下面步入主题.

如果button的bounds足够大(宽度至少是imageView宽度与titleLabel宽度之和,高度至少为imageView高度与titleLabel高度中的最大值),那么就可以同时显示imageView及titleLabel,如下图:

如果,想要得到imageView及titleLabel都居中显示,且要达到imageView在上,titleLabel在下的效果(通过设置imageView及titleLabel的frame是无法达到这样的效果的),如下图:

此时,button的bounds也要足够大(宽度至少是imageView宽度与titleLabel宽度之和,高度至少为imageView高度与titleLabel高度之和),并且,需要修改button的imageEdgeInsets及titleEdgeInsets.可参考下面的代码:

 1 // 这里的图片,必须有Xcode.png及Xcode@2x.png,便于得到正确的以设备点为单位的宽度及高度
 2 UIImage *buttonImage = [UIImage imageNamed:@"Xcode"];
 3 CGFloat buttonImageViewWidth = CGImageGetWidth(buttonImage.CGImage);
 4 CGFloat buttonImageViewHeight = CGImageGetWidth(buttonImage.CGImage);
 5 if ([UIScreen mainScreen].scale == 2.0f) {// iOS 4.0+
 6     buttonImageViewWidth *= 0.5f;
 7     buttonImageViewHeight *= 0.5f;
 8 }
 9 NSString *buttonTitle = @"中华人民共和国";
10 UIFont *buttonTitleFont = [UIFont systemFontOfSize:17.0f];
11 CGSize buttonTitleLabelSize = [buttonTitle sizeWithFont:buttonTitleFont];
12 // button宽度,至少为imageView宽度与titleLabel宽度之和
13 CGFloat buttonWidth = buttonImageViewWidth + buttonTitleLabelSize.width;
14 // button高度,至少为imageView高度与titleLabel高度之和
15 CGFloat buttonHeight = buttonImageViewHeight + buttonTitleLabelSize.height;
16 
17 UIButton *b = [[UIButton alloc] init];
18 [b setCenter:CGPointMake(160, 160)];
19 [b setBounds:CGRectMake(0, 0, buttonWidth, buttonHeight)];
20 [b.titleLabel setFont:buttonTitleFont];
21 [b setBackgroundColor:[UIColor redColor]];
22 
23 [b setImage:buttonImage forState:UIControlStateNormal];
24 [b.imageView setBackgroundColor:[UIColor greenColor]];
25 
26 [b setTitle:buttonTitle forState:UIControlStateNormal];
27 [b setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
28 [b setTitleColor:[UIColor scrollViewTexturedBackgroundColor] forState:UIControlStateHighlighted];
29 [b.titleLabel setBackgroundColor:[UIColor whiteColor]];
30 
31 [self.view addSubview:b];
32 
33 CGPoint buttonBoundsCenter = CGPointMake(CGRectGetMidX(b.bounds), CGRectGetMidY(b.bounds));
34 // 找出imageView最终的center
35 CGPoint endImageViewCenter = CGPointMake(buttonBoundsCenter.x, CGRectGetMidY(b.imageView.bounds));
36 // 找出titleLabel最终的center
37 CGPoint endTitleLabelCenter = CGPointMake(buttonBoundsCenter.x, CGRectGetHeight(b.bounds)-CGRectGetMidY(b.titleLabel.bounds));
38 // 取得imageView最初的center
39 CGPoint startImageViewCenter = b.imageView.center;
40 // 取得titleLabel最初的center
41 CGPoint startTitleLabelCenter = b.titleLabel.center;
42 // 设置imageEdgeInsets
43 CGFloat imageEdgeInsetsTop = endImageViewCenter.y - startImageViewCenter.y;
44 CGFloat imageEdgeInsetsLeft = endImageViewCenter.x - startImageViewCenter.x;
45 CGFloat imageEdgeInsetsBottom = -imageEdgeInsetsTop;
46 CGFloat imageEdgeInsetsRight = -imageEdgeInsetsLeft;
47 b.imageEdgeInsets = UIEdgeInsetsMake(imageEdgeInsetsTop, imageEdgeInsetsLeft, imageEdgeInsetsBottom, imageEdgeInsetsRight);
48 // 设置titleEdgeInsets
49 CGFloat titleEdgeInsetsTop = endTitleLabelCenter.y-startTitleLabelCenter.y;
50 CGFloat titleEdgeInsetsLeft = endTitleLabelCenter.x - startTitleLabelCenter.x;
51 CGFloat titleEdgeInsetsBottom = -titleEdgeInsetsTop;
52 CGFloat titleEdgeInsetsRight = -titleEdgeInsetsLeft;
53 b.titleEdgeInsets = UIEdgeInsetsMake(titleEdgeInsetsTop, titleEdgeInsetsLeft, titleEdgeInsetsBottom, titleEdgeInsetsRight);
54 
55 [b release];