Golden ratio corner rounded frame rectangle button

Question

How can we make a rounded rectangle frame programatically, as solved with

buyButton.layer.cornerRadius = 2;
buyButton.layer.borderWidth = 1;
buyButton.layer.borderColor = [UIColor blueColor].CGColor;

in iOS 7 round framed button

but resulting in a golden ratio corner such as the one introduced in the iOS 7 icon shape; new icon shape in iOS 7
iOS 6 and 7 icon difference ?

It does in using a curvature radius related to the whole's dimensions in a certain ratio, look; http://www.razorianfly.com/wp-content/uploads/IOS7-Icon-Grid-System.png — Peter V, Nov 18 '13 at 21:19

score 5 · Accepted Answer · answered Nov 18 '13 at 19:52

5

If you want the same shape, just measure the image, eg with Photoshop and set the border radius proportional to the button's width. I did the measurement for you:

buyButton.layer.borderRadius = 0.315 * buyButton.frame.size.width;

I don't think it follows golden ratio thought. If it does, the ratio should be (1 - (sqrt(5) - 1)/2), which is 0.381..., which results in too rounded corners.

answered Nov 18 '13 at 19:52

Khanh Nguyen

11,112
10
52
65

Very smart and simple, thank you! Will check on the original but basically, this is the formula for use with a desired ratio – Peter V Nov 18 '13 at 21:22
I see, it's really golden ratio. – Khanh Nguyen Nov 18 '13 at 21:36

score 1 · Answer 2 · answered Nov 19 '13 at 21:22

1

There's more to the golden ratio in this template. It appears in the relative sizes of the circles in relation to each other and the width of the template. See http://www.phimatrix.com/product-design-golden-ratio/ for details.

answered Nov 19 '13 at 21:22

user3010684

11
1

Golden ratio corner rounded frame rectangle button

2 Answers2