storyboard positioning text below image inside a button

Question

I am able to set the image and text for button. But it is aligned horizontally. I want the image and text to be aligned vertically inside the button. i.e., text below the image<

Answer 1

Swift 4.2 compatible code is here , you just need to call this function

  public extension UIButton
  {

    func alignTextUnderImage(spacing: CGFloat = 6.0)
    {
        if let image = self.imageView?.image
        {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsets(top: spacing, left: -imageSize.width, bottom: -(imageSize.height), right: 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedString.Key.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
        }
    }
}

Answer 2

I've written an extension that do the works for you, Swift 4 compatible.

public extension UIButton {

    func alignTextBelow(spacing: CGFloat = 6.0) {
        if let image = self.imageView?.image {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsetsMake(spacing, -imageSize.width, -(imageSize.height), 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width)
        }
    }

}

Where spacing is the distance between image and text.

Answer 3

Yes you can do it from storyboard without writing any logic also.

1) Select button and go to Attribute Inspector in your storyboard.

2) Assign Image to the button. (Don't use background Image)

3) Set Title text to that button.

4) Now you need to set edge and Inset so first select image from edge and set Inset as you need and then select title from edge and set inset as per your need.

Hope this helps.

Answer 4

Thank you @rbiard. Another workaround when you are developing a multilingual mobile app and when using UISemanticContentAttribute (right to left and left to right). This should work:

func alignTextBelow(spacing: CGFloat = 10.0) {

    //when the selected language is English
    if L102Language.currentAppleLanguage() == "en" {
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
    } else {
        //When selecting a right to left language. For example, Arabic
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: 0, bottom: -image.size.height, right: -image.size.width)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -titleSize.width, bottom: 0.0, right: 0)
    }
}

Answer 5

You can easily and visually achieve the alignment using the Edge property of the Button from Property Window(Attribute Inspector) you can change the inset values of Title, and Image as per your need, see image below

Hope it helps.

Cheers.

Answer 6

You cannot change layout directly in UIButton, but you can try to use these properties on UIButton:

UIButton *button = ...
button.titleEdgeInsets = UIEdgeInsetsMake(....);
button.imageEdgeInsets = UIEdgeInsetsMake(....);

If it won't help I'd recommend to subclass from UIResponder and make your own component and do your own layout as you needed it.