title: Creating UIButton (UIButtonTypeCustom) with an image at top & label at the bottom with AutoLayout
body: <p>I am trying to display Button with a text (single/multi line) at the bottom of it &amp; image (has to look circular) at the top; the image &amp; text must be highlighted on click. Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/qvYTU.png" alt="Desired Button with Images"></p>
  
  <p>Here's the code in <code>viewDidLoad</code>:</p>
  
  <pre><code>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];
  </code></pre>
  
  <p>Problem is that the text is not displayed at all (in both normal &amp; highlighted states). See the linked images below.
  How do I use UIEdgeInset to make room for the text? I also have tried creating a <code>UIButton</code> category but the effect is more or less the same.</p>
  
  <p><img src="https://i.stack.imgur.com/0CBT5.png" alt="Normal Button"></p>