如何在 UIButton 中将 UIImageView 与它的文本居中？

Posted 2023-03-22

技术标签:

【中文标题】如何在 UIButton 中将 UIImageView 与它的文本居中？【英文标题】：How to center UIImageView within UIButton with its text? 【发布时间】：2016-06-13 07:07:58 【问题描述】：

我有一个UIButton，我正在添加这样的图像：

UIImageView *cardImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Visa.png"]];
cardImage.frame = CGRectMake(15, _cardButton.frame.size.height - 25 - 10, 25, 25);
cardImage.contentMode=UIViewContentModeScaleAspectFit;
[_cardButton addSubview:cardImage];

如何以UIButton 的 titleLable 为中心显示此图像？

【问题讨论】：

【参考方案1】：

// 像这样试试

cardImage.frame = _cardButton.frame;
cardImage.center = _cardButton.center;
cardImage.contentMode=UIViewContentModeCenter;

【讨论】：

【参考方案2】：

试试这个可能对你有帮助

CGFloat flotspacing = 50; // the amount of spacing to appear between image and title
Btn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, flotspacing);
Btn.titleEdgeInsets = UIEdgeInsetsMake(0, flotspacing, 0, 0);

还可以使用 .h 和 .m 文件尝试此代码

UIButton+BtnPosition.h

@interface UIButton(ImageTitleCentering)

 -(void) centerButtonPositionAndImageWithSpacing:(CGFloat)spacing;

@end

UIButton+BtnPosition.m

  @implementation UIButton(ImageTitleCentering)

     -(void) centerButtonPositionAndImageWithSpacing:(CGFloat)spacing 
         self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
         self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);

@结束

现在用下面的方法调用这个函数

  [button centerButtonPositionAndImageWithSpacing:10];

我使用这种编码来设置按钮图像和标题，它可能对你有帮助。

谢谢...

【讨论】：

【参考方案3】：

不要将 imageview 添加为 UIButton 的子视图，而是尝试使用按钮图像属性设置图像。

// the space between the image and text
    CGFloat spacing = 6.0;

    // lower the text and push it left so it appears centered 
    //  below the image
    CGSize imageSize = button.imageView.image.size;
    button.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 = [button.titleLabel.text sizeWithAttributes:@NSFontAttributeName: button.titleLabel.font];
    button.imageEdgeInsets = UIEdgeInsetsMake(
      - (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);

    // increase the content height to avoid clipping
    CGFloat edgeOffset = fabsf(titleSize.height - imageSize.height) / 2.0;
    button.contentEdgeInsets = UIEdgeInsetsMake(edgeOffset, 0.0, edgeOffset, 0.0);

【讨论】：

【参考方案4】：

为什么要将UIImageView 作为子视图添加到UIButton。 UIButton 具有 BackgroundImage 和 Image 属性来将您的图像设置为按钮。将contentMode 属性设置为center 以使图像居中。

_cardButton.contentMode=UIViewContentModeCenter;

如果image 在UIButton 中看起来太大，请缩小image 的大小或让您的设计师提供所需的Padding 的图像。