How to make iOS Button give visual feedback when pressed? - ios

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
Put an outline around a regular iOS button?
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:
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
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.

Answer 3

extension UIButton {
func provideVisualFeedback4press()
{
backgroundColor = cyan
alpha = 0
UIView .animate(withDuration: 0.1, animations: { [weak self] in
guard let s = self else {
return
}
s.alpha = 1
}, completion: { [weak self] completed in
if completed {
guard let s = self else {
return
}
s.backgroundColor = UIColor.white
}
})
}}
usage:
#objc func backAction(_ sender:UIButton!)
{
sender.provideVisualFeedback4press()

Answer 4

If you set the text or image properties of a UIButton, it'll automatically give feedback when pressed (the font color and image will go darker). However if you simply placed the button on top of some other controls, then you'll have to wire up to the Touch Down event and manually change the appearance to any control you want.