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

一些开发者知道通过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及[email protected],便于得到正确的以设备点为单位的宽度及高度

 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