iosimagetextuibuttonlabel

Label under image in UIButton


I'm trying to create a button which has some text beneath the icon (sorta like the app buttons) however it seems to be quite difficult to achieve. Any ideas how can I go about get the text to display below the image with a UIButton?


Solution

  • Or you can just use this category:

    ObjC

    @interface UIButton (VerticalLayout)
    
    - (void)centerVerticallyWithPadding:(float)padding;
    - (void)centerVertically;
    
    @end
    
    @implementation UIButton (VerticalLayout)
    
    - (void)centerVerticallyWithPadding:(float)padding {
        CGSize imageSize = self.imageView.frame.size;
        CGSize titleSize = self.titleLabel.frame.size;
        CGFloat totalHeight = (imageSize.height + titleSize.height + padding);
        
        self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight - imageSize.height),
                                                0.0f,
                                                0.0f,
                                                - titleSize.width);
        
        self.titleEdgeInsets = UIEdgeInsetsMake(0.0f,
                                                - imageSize.width,
                                                - (totalHeight - titleSize.height),
                                                0.0f);
        
        self.contentEdgeInsets = UIEdgeInsetsMake(0.0f,
                                                  0.0f,
                                                  titleSize.height,
                                                  0.0f);
    }
    
    - (void)centerVertically {
        const CGFloat kDefaultPadding = 6.0f;
        [self centerVerticallyWithPadding:kDefaultPadding];
    }
    
    @end
    

    Swift extension

    extension UIButton {
        
        func centerVertically(padding: CGFloat = 6.0) {
            guard
                let imageViewSize = self.imageView?.frame.size,
                let titleLabelSize = self.titleLabel?.frame.size else {
                return
            }
            
            let totalHeight = imageViewSize.height + titleLabelSize.height + padding
            
            self.imageEdgeInsets = UIEdgeInsets(
                top: -(totalHeight - imageViewSize.height),
                left: 0.0,
                bottom: 0.0,
                right: -titleLabelSize.width
            )
            
            self.titleEdgeInsets = UIEdgeInsets(
                top: 0.0,
                left: -imageViewSize.width,
                bottom: -(totalHeight - titleLabelSize.height),
                right: 0.0
            )
            
            self.contentEdgeInsets = UIEdgeInsets(
                top: 0.0,
                left: 0.0,
                bottom: titleLabelSize.height,
                right: 0.0
            )
        }
        
    }
    

    Suggestion: If button height is less than totalHeight, then image will draw outside borders.

    imageEdgeInset.top should be:

    max(0, -(totalHeight - imageViewSize.height))