Design Dribbble-like Floating Buttons for Your UITabBar for iOS Using Swift 5 | by Margels | Apr, 2022

Create lovely UIs to your UITabBar on iOS — Half 3

Hey hey hey! It seems like somebody has made it to the final a part of this tutorial! Kudos, you efficiently handed all of the mathematical obstacles and coding challenges!

I hope the earlier maths lesson didn’t kill you, as a result of, guess what? There’s going to be extra maths to this remaining a part of the tutorial! Don’t fear, I received’t get too deep into the small print this time. However it’s nonetheless maths. It sucks. So be prepared regardless, it’s only one final effort!

Did you imply to examine the earlier tutorials first? Click on right here for Part 1 and Part 2!

Let’s begin by defining our buttons names, icons and segue. I’ll use dummy names and icons:

var index = Int()
var optionButtons: [UIButton] = []
var choices = [
option(name: "A", image: UIImage(systemName: "a") ?? UIImage(), segue: "a"),
option(name: "B", image: UIImage(systemName: "a") ?? UIImage(), segue: "b"),
option(name: "C", image: UIImage(systemName: "a") ?? UIImage(), segue: "c")
struct possibility
var title = String()
var picture = UIImage()
var segue = String()

We’ll want a perform that does the next:

  • creates a button with specified look;
  • specifies the button’s constraints;
  • performs animation upon creation.

For this goal, I created the perform createButton(dimension:) and it seems like this:

With CGAffineTransform, I’ll create a small “pop” animation by scaling the button to 1.1 after which shortly again to 1, so it will get larger after which shrinks to unique dimension. I additionally set the tint of the button’s picture view to clear throughout animation to verify the picture is just seen when the button is within the view.

Earlier than we name this perform and really create the buttons, we have to make it possible for as soon as they’re contained in the view, the consumer can solely both disable them or choose one among them. Skipping this step would end result within the buttons sticking round even when the consumer decides to maneuver to completely different view controllers.

To keep away from that, I’ll merely create a transparent colored background button the dimensions of the display screen and place it behind the choices buttons. We’ll later give it an motion that triggers the center button and disables the three possibility buttons. This manner, even when the consumer tries to pick out one thing else whereas the buttons are within the view, the buttons will go away first.

The perform will appear like this:

And now the half: including our three buttons to the view and setting their constraints! Who’s prepared for some extra maths classes?

the boring half…

Right now’s lesson will probably be about trigonometry! For these of you who already know one thing about it, I counsel you simply soar to the following half. If in case you have no thought what I’m speaking about, I’ll attempt to make it easy for you.

Principally, in a right-angled triangle, you possibly can calculate the dimensions of the lacking sides, supplied that at the very least the levels of 1 angle (in our case, yellow) and the dimensions of one of many sides (in our case, blue). This logic might be utilized to an invisible circle round our center button to outline the place of the three buttons (inexperienced) by calculating x and y values with the formulation within the image.

We do have a tough thought of how far the buttons ought to be from our center button; that may be the dimensions of our blue dotted line (h). We additionally know that we would like it to be in order that it varieties an angle of about 45 levels (yellow) with the horizontal heart of our center button. That’s already lots of data, nonetheless, there’s no solution to inform simply that to our Swift perform! To get to our inexperienced dots, we might want to use a components:

  • firstly, we might want to convert levels into radians by multiplying our levels by π /180 like so: 45 * .pi/180
  • secondly, we might want to flip that worth in cos() or sin() and multiply it by our hypotenuse, specifically the space that we set for our buttons from the center button.

Use the formulation within the image as a tenet.

…the cool half!

From concept to code, right here is our components:

Now all you must do earlier than you run your challenge is return to your buttonHandler(sender:) perform and ungrey line 24:

self.setUpButtons(rely: self.choices.rely, heart: self.middleButton, radius: 80)

Hit ‘run’ and witness the magic!

You possibly can set the buttons’ pictures to one thing higher, clearly. Or decide random ones. They may nonetheless look higher than three A’s.

However wait, not so quick! We nonetheless haven’t outlined our components to take away the buttons. How will they ever go away? Should you maintain urgent the button now, all it is going to do is add increasingly more buttons each second time you press it. Fortunate, whereas including our buttons (together with the background button) we added every one among them to an array of buttons so we are able to shortly entry them and take away them:

Run your challenge and… witness the magic!

You ought to be proud for getting this far. You went by way of maths, geometry, trigonometry, all to design this little 2 seconds animation. The consumer won’t ever know what you’ve been by way of however I do. So good work!

Did you take pleasure in this tutorial? Did it work nicely together with your challenge?

Need to Join?Comply with me on…
❤️ YouTube
💖 Dribbble
💜 Instagram
💙 Ko-Fi
🖤 GitHub

More Posts