Creazione UIButton (UIButtonTypeCustom) con un'immagine in alto e etichetta in basso con AutoLayout

Question

Sto provando a visualizzare Pulsante con un testo (singola/multi linea) nella parte inferiore dell'immagine & (deve sembrare circolare) sul superiore; il testo dell'immagine & deve essere evidenziato al clic. Come questo:

Ecco il codice in 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]; 

Il problema è che il testo non viene visualizzato a tutti (in entrambi i normali & stati evidenziati). Guarda le immagini collegate qui sotto. Come utilizzare UIEdgeInset per creare spazio per il testo? Ho anche provato a creare una categoria UIButton ma l'effetto è più o meno lo stesso.

Answer 1

per impostare l'inserto Si prega di utilizzare il codice qui sotto,

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

Spero che questo aiuti ..

Answer 2

ho incontrato questa situazione così tante volte, che ho deciso di scrivere un personalizzato UIButton che supporta l'allineamento flessibile in poche righe di codice.
E 'disponibile qui: https://github.com/namanhams/FlexibleAlignButton

Esempio:
self.btn.alignment = kButtonAlignmentLabelBottom; self.btn.gap = 5; // vertical gap between image and text

Answer 3

Qui è la mia soluzione al problema. Creato una sottoclasse UIButton e sovrascrivere 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) 
    } 
}