一些开发者知道通过imageEdgeInsets及titleEdgeInsets可以调整imageView及titleLabel的位置,但不知道如何正确计算,基本上都是通过多次调整相应的值达到期望的目标(次数过多可能会失去信心),究其原因就是不能正确理解imageEdgeInsets及titleEdgeInsets.
下面步入主题.
如果button的bounds足够大(宽度至少是imageView宽度与titleLabel宽度之和,高度至少为imageView高度与titleLabel高度中的最大值),那么就可以同时显示imageView及titleLabel,如下图:
如果,想要得到imageView及titleLabel都居中显示,且要达到imageView在上,titleLabel在下的效果(通过设置imageView及titleLabel的frame是无法达到这样的效果的),如下图:
如果,想要得到imageView及titleLabel都居中显示,且要达到imageView在上,titleLabel在下的效果(通过设置imageView及titleLabel的frame是无法达到这样的效果的),如下图:
此时,button的bounds也要足够大(宽度至少是imageView宽度与titleLabel宽度之和,高度至少为imageView高度与titleLabel高度之和),并且,需要修改button的imageEdgeInsets及titleEdgeInsets.可参考下面的代码:
// 这里的图片,必须有Xcode.png及Xcode@2x.png,便于得到正确的以设备点为单位的宽度及高度
UIImage *buttonImage = [UIImage imageNamed:@"Xcode"];
CGFloat buttonImageViewWidth = CGImageGetWidth(buttonImage.CGImage);
CGFloat buttonImageViewHeight = CGImageGetWidth(buttonImage.CGImage);
if ([UIScreen mainScreen].scale == 2.0f) {// iOS 4.0+
buttonImageViewWidth *= 0.5f;
buttonImageViewHeight *= 0.5f;
}
NSString *buttonTitle = @"中华人民共和国";
UIFont *buttonTitleFont = [UIFont systemFontOfSize:17.0f];
CGSize buttonTitleLabelSize = [buttonTitle sizeWithFont:buttonTitleFont];
// button宽度,至少为imageView宽度与titleLabel宽度之和
CGFloat buttonWidth = buttonImageViewWidth + buttonTitleLabelSize.width;
// button高度,至少为imageView高度与titleLabel高度之和
CGFloat buttonHeight = buttonImageViewHeight + buttonTitleLabelSize.height;
UIButton *b = [[UIButton alloc] init];
[b setCenter:CGPointMake(160, 160)];
[b setBounds:CGRectMake(0, 0, buttonWidth, buttonHeight)];
[b.titleLabel setFont:buttonTitleFont];
[b setBackgroundColor:[UIColor redColor]];
[b setImage:buttonImage forState:UIControlStateNormal];
[b.imageView setBackgroundColor:[UIColor greenColor]];
[b setTitle:buttonTitle forState:UIControlStateNormal];
[b setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[b setTitleColor:[UIColor scrollViewTexturedBackgroundColor] forState:UIControlStateHighlighted];
[b.titleLabel setBackgroundColor:[UIColor whiteColor]];
[self.view addSubview:b];
//
CGFloat spacing =6.0;
// lower the text and push it left so it appears centered
// below the image
CGSize imageSize =b.imageView.image.size;
b.titleEdgeInsets = UIEdgeInsetsMake(
0.0, - imageSize.width, - (imageSize.height + spacing),0.0);
// raise the image and push it right so it appears centered
// above the text
CGSize titleSize =b.titleLabel.frame.size;
if (IOS7) {
titleSize = [b.titleLabel.textsizeWithAttributes:@{NSFontAttributeName:b.titleLabel.font}];
}
b.imageEdgeInsets = UIEdgeInsetsMake(
- (titleSize.height + spacing),0.0, 0.0, - titleSize.width);
其他参考资料:《UIButton的titleEdgeInsets属性和imageEdgeInsets属性实现图片文字按要求排列》http://www.jianshu.com/p/350cfa589598