Question

I would like to recreate this button using code so it’s a reusable object, and you can set the minimum width, height, or it stretches to fit the icon and label. Throughout the app, we’ll reuse the button in several areas and it will include a thin rounded rect stroke, a background color, an icon (trans PNG), and a label. We want to make the background color, and stroke color configurable so we can toggle the button on/off.

---

EDIT: Almost working code but the text label block is white and need to resize image to fit in frame and both to be centered.

Custom button code:

#import "CustomButton.h"

@implementation CustomButton

- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border 
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self = [UIButton buttonWithType:UIButtonTypeCustom];
        CALayer *layer = [self layer];

        self.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom;
        self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

        // background
        if (background) {
            layer.backgroundColor = (__bridge CGColorRef)(background);
        } else {
            layer.backgroundColor = [[UIColor darkGrayColor] CGColor];
        }

        // border
        if (border) {
            layer.borderColor = (__bridge CGColorRef) (border);
        } else {
            layer.borderColor = [[UIColor lightGrayColor] CGColor];
        }
        layer.cornerRadius = 2.0f;
        layer.borderWidth = 0.5f;

        // icon
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:image]];
                                  [self addSubview:imageView];

        // text label
        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 25, 55, 15)];
        titleLabel.font = [[UIFont alloc] fontWithSize:7.00];
                                titleLabel.text = title;
                                [self addSubview:titleLabel];

        [self setFrame:frame];
    }
    return self;
}

@end

---

EDIT: Updated code block above and got button to appear using the following code in the respective view in viewController:

CGRect buttonFrame = CGRectMake(125, 3, 52, 37);
CustomButton *btnNearby = [[CustomButton alloc] initWithFrame:buttonFrame image:@"map.png" title:@"NEARBY" background:nil border:nil];
[myCustomView addSubview:btnNearby];

The custom button appears but still not formatted properly.

---

Here is an example icon (white PNG w/ trans) that should appear in center of button.

---

Summary of desired functionality:

1) reusable button
2) can have min width/height or override to match width of label and height of image + label
3) has configurable stroke color
4) matches button icon above with stroke + icon + label + background color
5) can change the border color to toggle on/off

Answer 1

I was able to solve this problem and I’m sure it can be refined further but the button now appears as desired in question. See snap of end result, and working code below hopefully to help others.

Working screenshot:

Working code:

CustomButton.h

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface CustomButton : UIButton
- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border;
@end

CustomButton.m

#import "CustomButton.h"

@implementation CustomButton

- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border 
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self = [UIButton buttonWithType:UIButtonTypeCustom];
        CALayer *layer = [self layer];

        // background
        if (background) {
            layer.backgroundColor = (__bridge CGColorRef)(background);
        } else {
            layer.backgroundColor = [[UIColor darkGrayColor] CGColor];
        }

        // border
        if (border) {
            layer.borderColor = (__bridge CGColorRef)(border);
        } else {
            layer.borderColor = [[UIColor lightGrayColor] CGColor];
        }
        layer.cornerRadius = 2.0f;
        layer.borderWidth = 0.5f;

        // icon
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(14,3,20,19)];
        imageView.image = [UIImage imageNamed:image];
        imageView.contentMode  = UIViewContentModeScaleAspectFit;
        [self addSubview:imageView];

        // text label
        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 50, 14)];
        titleLabel.opaque = NO;
        titleLabel.numberOfLines = 1;
        titleLabel.textAlignment = UITextAlignmentCenter;
        titleLabel.font = [UIFont systemFontOfSize:7.00];
        titleLabel.textColor = [UIColor whiteColor];
        titleLabel.backgroundColor = [UIColor clearColor];
        titleLabel.text = title;
        [self addSubview:titleLabel];

        [self setFrame:frame];
    }
    return self;
}

@end

Instantiated the button on a UIImage layer that had segue to the View Controller:

// Add custom button to image view background layer
CGRect buttonFrame = CGRectMake(125, 3, 50, 35);
CustomButton *btnNearby = [[CustomButton alloc] initWithFrame:buttonFrame image:@"map.png" title:@"NEARBY" background:nil border:nil];
[myCustomView addSubview:btnNearby];