UIButton如何正确调整imageView及titleLabel的位置

最新推荐文章于 2021-05-27 14:35:24 发布

转载最新推荐文章于 2021-05-27 14:35:24 发布 · 662 阅读

IOS 基础控件、基本数据类型专栏收录该内容

21 篇文章

订阅专栏

本文详细解析了如何通过button的bounds、imageEdgeInsets及titleEdgeInsets正确显示imageView与titleLabel，并提供了实例代码帮助开发者实现居中显示且imageView在上、titleLabel在下的效果。

一些开发者知道通过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.可参考下面的代码:

//这里的图片,必须有Xcode.png及Xcode@2x.png,便于得到正确的以设备点为单位的宽度及高度

UIImage *buttonImage =[UIImage imageNamed:@"Xcode"];

CGFloatbuttonImageViewWidth =CGImageGetWidth(buttonImage.CGImage);

CGFloatbuttonImageViewHeight =CGImageGetWidth(buttonImage.CGImage);

if ([UIScreenmainScreen].scale == 2.0f) {// iOS 4.0+

buttonImageViewWidth *=0.5f;

buttonImageViewHeight *=0.5f;

}

NSString *buttonTitle =@"中华人民共和国";

UIFont *buttonTitleFont =[UIFont systemFontOfSize:17.0f];

CGSizebuttonTitleLabelSize = [buttonTitlesizeWithFont:buttonTitleFont];

//button宽度,至少为imageView宽度与titleLabel宽度之和

CGFloat buttonWidth =buttonImageViewWidth +buttonTitleLabelSize.width;

//button高度,至少为imageView高度与titleLabel高度之和

CGFloat buttonHeight =buttonImageViewHeight +buttonTitleLabelSize.height;

UIButton *b = [[UIButtonalloc] init];

[bsetCenter:CGPointMake(160, 160)];

[bsetBounds:CGRectMake(0, 0, buttonWidth,buttonHeight)];

[b.titleLabelsetFont:buttonTitleFont];

[bsetBackgroundColor:[UIColor redColor]];

[b setImage:buttonImageforState:UIControlStateNormal];

[b.imageViewsetBackgroundColor:[UIColor greenColor]];

[b setTitle:buttonTitleforState:UIControlStateNormal];

[b setTitleColor:[UIColorblackColor] forState:UIControlStateNormal];

[b setTitleColor:[UIColorscrollViewTexturedBackgroundColor]forState:UIControlStateHighlighted];

[b.titleLabelsetBackgroundColor:[UIColor whiteColor]];

[self.viewaddSubview:b];

CGPointbuttonBoundsCenter = CGPointMake(CGRectGetMidX(b.bounds),CGRectGetMidY(b.bounds));

//找出imageView最终的center

CGPointendImageViewCenter = CGPointMake(buttonBoundsCenter.x,CGRectGetMidY(b.imageView.bounds));

//找出titleLabel最终的center

CGPointendTitleLabelCenter = CGPointMake(buttonBoundsCenter.x,CGRectGetHeight(b.bounds)-CGRectGetMidY(b.titleLabel.bounds));

//取得imageView最初的center

CGPointstartImageViewCenter = b.imageView.center;

//取得titleLabel最初的center

CGPointstartTitleLabelCenter = b.titleLabel.center;

//设置imageEdgeInsets

CGFloatimageEdgeInsetsTop = endImageViewCenter.y -startImageViewCenter.y;

CGFloatimageEdgeInsetsLeft = endImageViewCenter.x -startImageViewCenter.x;

CGFloatimageEdgeInsetsBottom = -imageEdgeInsetsTop;

CGFloatimageEdgeInsetsRight = -imageEdgeInsetsLeft;

b.imageEdgeInsets =UIEdgeInsetsMake(imageEdgeInsetsTop, imageEdgeInsetsLeft,imageEdgeInsetsBottom, imageEdgeInsetsRight);

//设置titleEdgeInsets

CGFloattitleEdgeInsetsTop =endTitleLabelCenter.y-startTitleLabelCenter.y;

CGFloattitleEdgeInsetsLeft = endTitleLabelCenter.x -startTitleLabelCenter.x;

CGFloattitleEdgeInsetsBottom = -titleEdgeInsetsTop;

CGFloattitleEdgeInsetsRight = -titleEdgeInsetsLeft;

b.titleEdgeInsets =UIEdgeInsetsMake(titleEdgeInsetsTop, titleEdgeInsetsLeft,titleEdgeInsetsBottom, titleEdgeInsetsRight);

[brelease];