I recently put together a project as a reference for myself, a way of noting down difference techniques for building buttons.
The project uses various techniques, classes and extensions to achieve the above result. Obviously I can’t take credit for all of the code so I will credit where I can.
The project has been uploaded to GitHub, see below for link.
So starting from the top left … here we go.
Sound Toggle Button
This is a simple UIButton which uses two different images. All of the code can be found in SoundToggle.swift. It’s a subclass of UIButton, it’s very standard code, I can certainly credit Sean Allen for showing me the initial subclassing code :)
The images can be found in the standard assets folder.
The buttons state is handled with NSUserDefaults which has the advantage of keeping state even after the app has been restarted.
To set up the initial state(initial button image either on or off)I have added an extension, although this can easily be added to the class button init itself as is the case in other buttons. This is run in viewdidload. Because of this an iBoutlet to the button is required.
The UIButton itself is added to the storyboard and sized and the custom class SoundToggle is selected in the identity inspector. The button type is also set to custom in the attributes inspector. This allows us to use the option
adjustsImageWhenHighlighted = false
Which basically removes the standard effect that you get with all buttons, a kind of fade out between states.
I suspect that this could be performed in code but to be honest I haven’t tried.
Tick Cross looping animated
This very simple to create, the hardest part is finding animated images. I used icons8 for the gif and then used another service to split the frames into seperate png images. There are 27 in all to produce this result.
As before, the button is sized and setup on the Storyboard and we again have an IBoutlet.
For added laziness this function can be found inside the ViewController file
and is called via ViewDidLoad.
Credit goes to StackOverFlow.
Tick Cross animated clickable
A variation on the last button but this time it changes state which each click, to either tick or cross and the change is animated of course.
The code can be found in the file TickCrossToggle.swift, the button again needs to be set as custom and with the class TickCrossToggle.
As each state is an array of images I set up three arrays, an array of all images and then two other arrays for the change from the cross to the tick, and the other from the tick to the cross. I made this logic myself so I don’t claim that it’s perfect :)
Go! Circle Button with shadow
This is the first of the IBdesignable buttons, IB designable means that you can edit the buttons properties directly in StoryBoard and Xcode and as a bonus you get to see the effects directly on the preview view.
I’m not sure if I’m a fan of IBDesignable mainly because it doesn’t seem very stable and quite often the preview doesn’t work and requires an Xcode restart.
As for most of these examples the button is setup via the storyboard, the custom class set to Designable.
The code can be found in Designable+Rounded+Shadow.swift
I love the shadow effect on this one, with the shadow offset height pushing it down to the bottom end of the view.
Circle with animated background highlighting.
This is a favourite of mine (Yes .. I have favourite UIButtons). I like the way the border also has a shadow, this is the case because the buttons background is clear colour. Most of the setup is in code in the class file, UIButton Scan. I say most because I also use the attributes inspector to tweak the text colour change(black to white) when highlighted. Something that may have been better off in code.
The circle-ness comes from the corner radius calculation of half of the views width.
The background animation is very subtle but effective and can be tweaked by changing the hightLightDuration value.
StackOverFlow get’s the credit, a combination of posts.
Animated button press(Size change animated)
A simple animation using CGAffineTransform, for a change this is an extension to UIButton and the code is in this file : UIButton + AnimatePress.swift
All set up in Storyboard and so we have an IBoutlet.
The button is initialised in ViewDidLoad.
Credit goes to : Rory Bain
Play Again button animated background highlighting.
Very similar to the circle version. No clear background though, so the border appears to have no shadow. A corner radius of 15.
Revolut designable button
Revolut is a banking app that has some great buttons (and design overall) which I decided to copy here. The shadow is the same blue as the button which I think looks great. The real Revolut button actually changes colour very slightly (to a different shade of blue) and the text doesn’t change.
Play button with background highlighting on press.
This is a simpler version of the the Play Again button described earlier. Surprisingly Apple haven’t implemented the setBackgroundColor for state option, so this great extension does just that.
File is — UIButton + ColourOnHighlight.swift
Initialisation is in ViewDidLoad
Again we have an IBoutlet.
Credit : StackOverFlow
If you have used Apple Pay you will have seen this button or one very similar. As a developer if you use Apple Pay you must use the Apple provided buttons or your app will probably be rejected.
It doesn’t seem particularly easy to add an Apple Pay button via Storyboard so I have ended up using a combination of code and Storyboard. This is mainly because I am using a ton of stackviews for button alignment in this project.
I’m actually adding the button to a View which is in turn inside a stackview. In retrospect the view may not have been necessary.
Apple don’t let you change the cornerRadius of their buttons but apparently there are work arounds.
All setup is performed in ViewDidLoad.
Lottie Twitter-like Button
Lottie is a great framework brought to us by the design team at Airbnb surprisingly. It uses JSON files for vectorising images and animations. This is my first foray into Lottie but the result is pretty impressive.
Installed using Cocoapods, I won’t go into detail of that here.
You can download a ton of free animations (not just for buttons) here, or you can make your own using Adobe After Effects.
The buttons are actually UIViews which are you then change the class to AnimatedButton(module Lottie).
The Lottie Json file uses markers to tag different stages of the animation, you then assign these “clips” to actions/events on the button.
This button obviously needs some more logic to be able to revert to the original un-liked state. Something I will look into and update here.
Lottie doesn’t handle the action on the button(or view) itself so you have to do that by adding an action to the View and an associated function.
Second Twitter Like Button
This button uses CGAffineTransform to animate the change between the two states, it’s very effective and looks nearly as good as the Lottie button.
I would have liked to make the button bigger for the demo but I could not get the button to behave :) If I were to use this button in production I would certainly move the button tap handler into the class code and out of the ViewController. The code is here : HeartButton.swift and also add some save state functionality.
The images are again in the assets folder.
So that’s it, thanks for reading, hopefully you learn’t something new. Any thoughts don’t hesitate to comment.
The full project can be found here on Github.
Found this article useful? Follow me (Jonathan Tennant) on Medium and check out my most popular articles below! Please 👏 this article to share it!