Creating UIButton with border and hover native iOS

| Comments

The problem

When you are using Interface Builder to create your buttons there is just a few properties that we can change for different UIButton’s state.

So, that brings us some restrictions if we need to change the background color of the highlighted state. I have seen people creating an image of a button relatively simple, but one image for the normal and the other for the highlighted state or some other properties. I confess that it was my approach for a short while, until I had to deal with a bunch of buttons that the only thing that changed was the text, and sometimes an icon embeded in the button.

For that reason I implemented a class to deal with the background of the highlighted state and some border features.

How to use it?

First you have to add Catfish as a dependency to your project, inside of it there is a class CFUIButton. It has methods to:

CFUIButton.h
1
2
3
4
5
6
7
8
9
+ (void)setBorderColor:(UIColor*)color;
- (void)setBorderColor:(UIColor*)color;

- (void)removeBorder;
- (void)setBorderWidth:(CGFloat)borderWidth;
- (void)setCornerRadius:(CGFloat)cornerRadius;

+ (void) setBackgroundColorForHighlightedState:(UIColor*)color;
- (void) setBackgroundColorForHighlightedState:(UIColor*)color;

If you are using Interface Builder, the next step is to set CFUIButton as a custom class for your button.

Cool, and now set your CFUIButton type as custom.

But if you are creating your button programmatically, you just have to extend CFUIButton.

CFUIButton.h
1
2
3
@interface MyButton : CFUIButton

@end

Now that you have everying set, lets play with it.

Setting border color

There are two different ways to change the border color of the CFUIButton. The first one is for all of the CFUIButton in your application and the second is for a specific CFUIButton instance. The default color for all of the CFUIButton is [UIColor colorWithWhite:1.0 alpha:0.4].

Application level:

Open your AppDelegate.m and add the following code in the method didFinishLaunchingWithOptions:

1
[CFUIButton setBorderColor:[UIColor whiteColor]];

You should have something like that:

AppDelegate.m
1
2
3
4
5
6
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [CFUIButton setBorderColor:[UIColor whiteColor]];

    return YES;
}

Instance level:

First you have to create a class for your ViewController, for this example I am using MainViewController, after that you have to reference your CFUIButton with your MainViewController.h and set the instance name customButtonWithBorder.

MainViewController.h
1
2
3
4
5
6
7
#import "CFUIButton.h"

@interface MainViewController : UIViewController

@property (weak, nonatomic) IBOutlet CFUIButton *customButtonWithBorder;

@end

Now, open the class MainViewController.m and add the following line in your - (void)viewDidLoad method:

1
[_customButtonWithBorder setBorderColor:[UIColor yellowColor]];

Corner radius

You also can create button with corner:

Since that you have your instance variable, in the - (void)viewDidLoad method, add the following line:

1
[_customButtonWithBorder setCornerRadius:30.0f];

Removing border

You can also remove the border if you just want to use the benefit of the highlighted state color.

1
[_customButtonWithBorder removeBorder];

Highlighted state

You can change the text color for the highlighted state through the Interface Builder, but to change the background color, it becomes a little bit more complicated, so if you want to have something like that:

You can use:

Application level:

AppDelegate.m
1
2
3
4
5
6
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [CFUIButtonBorder setBackgroundColorForHighlightedState:[UIColor whiteColor]];

  return YES;
}

Instance level:

1
[_customButtonWithDifferentHoverColor setBackgroundColorForHighlightedState:[UIColor whiteColor]];

Download the project sample.

Comments