How should I use UIButtons with the iOS 6 style in iOS 7?

Question

I'm making an app designed for iOS 6 and 7, and I want to allow users to choose which style they want: iOS 6 or iOS 7. Or at least just make it have the iOS 6 style completely. The app needs to be acceptable on the App Store.

I'm considering trying to find iOS 6 button images to use, but since I'm new to iOS GUI programming, I'm wondering if there is a cleaner way to do this that I don't know about. Is there a framework I could simply add so that I can use something like "[[UIButton6 alloc] init]" etc to make buttons with the older style? Or could I easily do this myself with rendering settings?

Any other approaches would also be helpful. Also, answers saying that this isn't possible at all are fine, but please no answers telling me that I should just use the iOS 7 GUI. I'm asking "how/can" I do this, not "should" I do this.

I hope you have done a decent amount of user research for this "feature". SCNR. — Matthias Bauch, Mar 15 '14 at 21:44
@MatthiasBauch My "research" is that nobody I know finds the iOS 7 GUI acceptable. I'll probably just have one theme that's like iOS 6 but a little flatter and see what happens… it's a high school project, so not very much is at stake. — sudo, Mar 15 '14 at 23:05

score 1 · Accepted Answer · answered Mar 15 '14 at 21:15

What I do is to add the drawing of an oval shape with a gradient background, myself. For example, here's code from one of my apps:

    CAGradientLayer* grad = [CAGradientLayer new];
    grad.frame = CGRectMake(0,0,15,15);
    grad.colors = @[(id)[UIColor colorWithRed:1 green:1 blue:0 alpha:0.8].CGColor,
                    (id)[UIColor colorWithRed:.7 green:.7 blue:.3 alpha:0.8].CGColor];
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(15,15), NO, 0);
    UIBezierPath* p = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0,0,15,15) cornerRadius:8];
    [p addClip];
    [grad renderInContext:UIGraphicsGetCurrentContext()];
    [[UIColor blackColor] setStroke];
    p.lineWidth = 2;
    [p stroke];
    UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    im = [im resizableImageWithCapInsets:UIEdgeInsetsMake(7,7,7,7) resizingMode:UIImageResizingModeStretch];

Now use im as the background image of the button.

That code is just a "serving suggestion"; try it and then change the gradient colors or get rid of the gradient or whatever you feel like doing.

This is pretty good. I replaced all the "15,15" parts with "button.frame.size.width,button.frame.size.height", then I tweaked the gradient to make it whiter, then I made the stroke smaller. And now I have some nice-looking buttons. — sudo, Mar 15 '14 at 23:02
They're not quite like the iOS 6 buttons, but maybe making them too close to iOS 6 would make Apple reject the app. They look nice anyway. EDIT: Yeah, I'm going to experiment with a small shadow too. — sudo, Mar 15 '14 at 23:06

score 1 · Answer 2 · answered Mar 15 '14 at 22:23

1

RED FLAG: If you want to be accepted on the App Store, then intentionally targeting the iOS 6 look and feel is a serious danger. As of February 1st, Apple is expecting all applications to be "optimized for iOS 7", which doesn't immediately exclude what you're discussing, but I wouldn't risk it personally.

answered Mar 15 '14 at 22:23

calql8edkos

429
4
13

Thanks for the warning. I'm going to test the waters by submitting it with classic-styled buttons, and if they don't like it, I'll make it a bit flatter then resubmit. Borderless buttons, however, aren't an option. – sudo Mar 15 '14 at 22:58
cool, you might wanna check out [this other answer on SO](http://stackoverflow.com/questions/19509250/how-to-get-back-the-uibutton-border-in-ios-7) – calql8edkos Mar 17 '14 at 01:46

sudo · Answer 3 · 2014-03-16T02:54:54.003

Matt's answer is good, but I found a way to do this without rendering an image. Might be faster, and the code is more compact. I also like it a lot better when the gradient has 3 stops:

CAGradientLayer* grad = [CAGradientLayer new]; 
grad.frame = CGRectMake(0,0,button.frame.size.width,button.frame.size.height); 
grad.colors = @[(id)[UIColor colorWithWhite:1 alpha:1].CGColor,(id)[UIColor colorWithWhite:.95 alpha:1].CGColor,(id)[UIColor colorWithWhite:1 alpha:1].CGColor]; 
grad.locations  = @[@(0), @(.5), @(1)]; 
grad.cornerRadius = 10; 
grad.borderColor = [UIColor blackColor].CGColor; 
grad.borderWidth = .2; 
[button.layer insertSublayer: grad atIndex:0]; //button is the UIButton you want to modify

Of course, edit the gradients, border, etc as needed. Here's what it looks like:

Here's what it looks like with the middle color set to 95% white.

P.S. In case anyone "ninja'd" me, I originally said in this post that matt's answer doesn't allow you to set the gradient stops, but I was wrong.

How should I use UIButtons with the iOS 6 style in iOS 7?

3 Answers3