ios - 使用 AutoLayout 创建顶部图像和底部标签的 UIButton (UIButtonTypeCustom)

Question

我正在尝试在底部显示带有文本(单行/多行)的按钮，并在顶部显示图像(必须看起来是圆形的)；图片和文字必须在点击时突出显示。像这样:

这是 viewDidLoad 中的代码:

btArtAndPainting = [UIButton buttonWithType:UIButtonTypeCustom];
btArtAndPainting.backgroundColor = [[UIColor cyanColor] colorWithAlphaComponent:1.00f];

btArtAndPainting.translatesAutoresizingMaskIntoConstraints = NO;
self.vwContainer.translatesAutoresizingMaskIntoConstraints = NO;

[self.vwContainer addSubview:btArtAndPainting];

[btArtAndPainting setImage:[UIImage imageNamed:kIMGCategoryArtAndPaintingNormal] forState:UIControlStateNormal];
[btArtAndPainting setImage:[UIImage imageNamed:kIMGCategoryArtAndPaintingHighlighted] forState:UIControlStateHighlighted];

[btArtAndPainting setTitle:@"Art and Painting" forState:UIControlStateNormal];
[btArtAndPainting setTitle:@"Art and Painting" forState:UIControlStateHighlighted];

btArtAndPainting.tintColor = [UIColor redColor];
btArtAndPainting.titleLabel.font = [UIFont systemFontOfSize:10.00f];
btArtAndPainting.titleLabel.textColor = [UIColor whiteColor];
btArtAndPainting.titleLabel.textAlignment = NSTextAlignmentCenter;
btArtAndPainting.titleLabel.lineBreakMode = NSLineBreakByWordWrapping | NSLineBreakByTruncatingTail;
btArtAndPainting.titleLabel.numberOfLines = 0;
btArtAndPainting.imageEdgeInsets = UIEdgeInsetsMake(0.00f, 8.00f, 20.00f, 8.00f);
btArtAndPainting.titleEdgeInsets = UIEdgeInsetsMake(32.00f, 0.00f, 0.00f, 0.00f);

NSArray *constraintsWidth = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[btArtAndPainting(60)]|"
                                                                     options:0
                                                                     metrics:nil
                                                                       views:viewDictionary];

NSArray *constraintsHeight = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[searchBar]-10-[btArtAndPainting(60)]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:viewDictionary];

[self.vwContainer addConstraints:constraintsHeight];
[self.vwContainer addConstraints:constraintsWidth];

[btArtAndPainting layoutIfNeeded];
[btArtAndPainting needsUpdateConstraints];

问题是文本根本不显示(在正常和突出显示状态下)。请参阅下面的链接图片。如何使用 UIEdgeInset 为文本腾出空间？我也曾尝试创建一个 UIButton 类别，但效果或多或少是一样的。

Answer 1

请使用下面的代码设置插图，

CGFloat spacing = 1.0;
CGSize imageSize = btArtAndPainting.imageView.frame.size;
btArtAndPainting.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height + spacing), 0.0);
CGSize titleSize = btArtAndPainting.titleLabel.frame.size;
btArtAndPainting.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);

希望这有帮助..