使用顶部和顶部的图像创建UIButton（UIButtonTypeCustom）使用AutoLayout在底部标注

Question

我正在尝试在其底部显示带有文本（单行/多行）的按钮。顶部的图像（必须看起来是圆形的）;图像＆amp;单击时必须突出显示文本。像这样：

这是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);

希望这会有所帮助..

Answer 2

我遇到过这种情况很多次，我决定编写一个自定义的UIButton，只需几行代码即可支持灵活对齐。
它可以在这里找到：https://github.com/namanhams/FlexibleAlignButton

例：
self.btn.alignment = kButtonAlignmentLabelBottom; self.btn.gap = 5; // vertical gap between image and text

Answer 3

这是我解决问题的方法。创建了一个UIButton子类并覆盖layoutSubviews（）

import UIKit

@IBDesignable
class ImageTopButton: UIButton
{
    override func layoutSubviews()
    {
        super.layoutSubviews()

        let size = self.frame.size
        let imageSize = self.imageView!.intrinsicContentSize()
        let labelSize = self.titleLabel!.intrinsicContentSize()

        let totalHeight = imageSize.height + labelSize.height
        let heightDiff = size.height - totalHeight
        let padding = heightDiff / 2

        self.imageView!.center = CGPoint(x: size.width / 2, y: imageSize.height / 2 + padding)
        self.titleLabel!.center = CGPoint(x: size.width / 2, y: imageSize.height + padding + labelSize.height / 1.5)
    }
}