How to make iOS Button give visual feedback when pressed?

Question

I am making an iOS 7 app, I know that Apple's new design guidelines call for a bunch of flat design minimalist stuff, but this app is not really targeted at the tech-savvy crowd, so apple's guidelines pose a problem. I have a regular button, with just text in it, and I would like to put an outline around it, and I would also like for the button to react to being pressed, so that people actually know it is a button, and so that they do not freak out when the button takes them to a different app? So how do I

1. Put an outline around a regular iOS button?

2. Make a regular iOS Button give some simple visual feedback to being pressed?

Answer 1

Simplest way: make the UIButton's type be "System", rather than "Custom". A system button's image and/or text will highlight when touched.

You should do this in Interface Builder, by changing button's "Type" to be "System"

However, if you need to do it programmatically, you can do:

 UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];

As for the UIButton's border, you can do:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.button.layer.cornerRadius = 5;
    self.button.layer.borderColor = [UIColor blackColor];
    self.button.layer.borderWidth = 1;
}

Answer 2

If you are using a storyboard (interface builder) for designing your app it's quite easy:

1. Create a subclass of UIButton. Let's call it XYBorderButton.

   In XYBorderButton.m add the methods:

   - (id)initWithCoder:(NSCoder *)aDecoder {
       self = [super initWithCoder:aDecoder];
       if (self) {
           [self makeBorder];
       }
       return self;
   }
   
   - (void)makeBorder {
       self.layer.cornerRadius = 10.0;
       self.layer.borderColor = [UIColor blueColor];
       self.layer.borderWidth = 1.0;
   }
   

   Then in interface builder select the button and change its class to XYBorderButton

2. You can give visual feedback for example by changing the button's background color and/or by changing its font color.

   Setting these attributes is quite easy with Interface Builder: Just select the button, then choose the state "Highlighted" in the state config dropdown menu and set the background color and font color as desired.