Custom button in iOS with rounded rect stroke, icon and label - ios

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

You could try something like this:
#import <QuartzCore/QuartzCore.h>
#implementation CustomButton
- (id)initWithFrame:(CGRect)frame andImageName:(NSString*)filename ofType:(NSString*)type
{
self = [super initWithFrame:frame];
if (self)
{
self = [UIButton buttonWithType:UIButtonTypeCustom];
CALayer *layer = [self layer];
layer.borderColor = [[UIColor blueColor] CGColor];
layer.cornerRadius = 4.0f;
layer.borderWidth = 2.0f;
UIImage* img = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:filename ofType:type]];
UIImageView* imgView = [[UIImageView alloc] initWithImage:img];
[imgView setFrame:CGRectMake(0, 0, img.size.width, img.size.height)];
[self addSubview:imgView];
[self setFrame:frame];
}
return self;
}
- (void)switchColor
{
CALayer *layer = [self layer];
if(buttonIsOn)
layer.borderColor = [[UIColor blueColor] CGColor];
else
layer.borderColor = [[UIColor grayColor] CGColor];
}
#end
And everytime you use this button, just use:
CustomButton* cusButton = [[CustomButton alloc] initWithFrame:someFrame];
In order to alternate the stroke color, just call switchColor in the first line of cusButton's target method and you should be fine.

Answer 2

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