Tạo UIButton (UIButtonTypeCustom) với hình ảnh ở trên cùng và nhãn ở phía dưới cùng với AutoLayout

Question

Tôi đang cố gắng hiển thị Nút có văn bản (một/nhiều dòng) ở dưới cùng của hình ảnh & (phải trông tròn) tại hàng đầu; hình ảnh văn bản & phải được đánh dấu khi nhấp chuột. Như thế này:

Dưới đây là mã trong 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]; 

Vấn đề là văn bản không được hiển thị ở tất cả (trong cả hai & bang nhấn mạnh bình thường). Xem hình ảnh được liên kết bên dưới. Làm cách nào để sử dụng UIEdgeInset để nhường chỗ cho văn bản? Tôi cũng đã cố gắng tạo ra một loại UIButton nhưng hiệu quả là nhiều hơn hoặc ít hơn như nhau.

Answer 1

Vui lòng sử dụng mã dưới đây để thiết lập các hình chữ nhật,

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

Hope this helps ..

Answer 2

tôi đã gặp phải tình trạng này rất nhiều lần, tôi quyết định viết một tùy chỉnh UIButton hỗ trợ liên kết linh hoạt chỉ trong vài dòng mã.
Nó có sẵn ở đây: https://github.com/namanhams/FlexibleAlignButton

Ví dụ:
self.btn.alignment = kButtonAlignmentLabelBottom; self.btn.gap = 5; // vertical gap between image and text

Answer 3

Đây là giải pháp của tôi cho vấn đề. Tạo ra một lớp con UIButton và ghi đè 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) 
    } 
}