How to design UIButton?

Question

How to design UI button like this in iOS? I not understand how to design this:

have a look at this as this is doing the rounded corners. http://stackoverflow.com/a/37164262/3483812 — Jetpack, Feb 06 '17 at 03:38
literally take that image, and dump it as the image for the button, done — Fonix, Feb 06 '17 at 03:39

score 6 · Accepted Answer · edited May 23 '17 at 12:02

6

This is not very difficult and the the answer here should suffices the requirement with some modification nevertheless, I have created a button like you want. Please check the code from GitHub

Basically you can create an extension for the button and provide the desired properties there like rounded corner and specify the corner radius as per your requirement also which corner you want the radius to be applied i.e in your case top left and right bottom.

extension UIButton{
    func roundedButton(){
        let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                 byRoundingCorners: [.topLeft , .bottomRight],
                                 cornerRadii:CGSize(width:20.0, height:20.0))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = self.bounds
        maskLayer1.path = maskPAth1.cgPath
        self.layer.mask = maskLayer1

    }
}

This would give you a button like -

You can customise the text and colour of text as per your need.

That should be enough irrespective of number of custom buttons you want. Going with image and storyboard customisation would need rework for every button, hence I recommend this approach. Cleaner and better.

edited May 23 '17 at 12:02

Community

1
1

answered Feb 06 '17 at 03:54

Jeet

5,569
8
43
75

It shows extra arguments 'byRounding corners' in call.Why it is shows? – User Feb 06 '17 at 04:45
Where exactly it shows that? – Jeet Feb 06 '17 at 04:49
In this line there is showing error------ let maskPAth1 = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [.top , .bottomRight], cornerRadii:CGSize(width:20.0, height:20.0)) – User Feb 06 '17 at 09:05
Please check the version of xCode you are using because it doesn't show any error at my end. – Jeet Feb 06 '17 at 09:45
Version 6.0.1 (6A317) – User Feb 06 '17 at 09:49
You are using way too old version pal, please upgrade to xCode 8 at least. – Jeet Feb 06 '17 at 09:50
without xcode updating my code is working – User Feb 14 '17 at 04:19

score 3 · Answer 2 · answered Feb 06 '17 at 03:45

3

The easiest thing to do is to create a custom button with an image and just put those colored blobs in as the image for each button. Then add a title and adjust the color and font as needed. You can also create a mask layer as desired in the link provided by @Jetpack, although you may need to update the mask layer in a viewDidLayoutSubviews() method in your view controller.

answered Feb 06 '17 at 03:45

Duncan C

128,072
22
173
272

1

Using images is not the easiest thing to do. It's actually the more difficult way. – rmaddy Feb 06 '17 at 04:24
@rmaddy, why do you say that? I've always found it easy. – Duncan C Feb 06 '17 at 04:36
1

See the other answer. Simple code. Easy to change as needed. With images you need to create each image with the proper color and all of the proper sizes. If you want to tweak it you need to edit all of the images. It's a pain. And it makes your app bigger having more images. – rmaddy Feb 06 '17 at 04:39
Ok, I see your point. In terms of the button code, the image approach is simpler, but you have a point about the pain of creating and maintaining images. I tend to prefer the code approach, but beginning developers might be intimidated by creating custom button classes. – Duncan C Feb 06 '17 at 11:44

How to design UIButton?

2 Answers2