Design a Custom Central Button to your UITabBar in iOS Using Swift 5 | by Margels | Apr, 2022

Create stunning UIs on your UITabBar on iOS — Half 2

That is the ultimate look of our mission! Fairly cute, proper?

Hey stranger! It’s been a minute!

It’s nice to have you ever right here on this second a part of my UITabBar tutorial! Have been you searching for half one? You’ll find it here!

On this second a part of my tutorial, we’ll learn how to make that central button and methods to make it rotate. I hope you’re very motivated as a result of you’ll need to meet up with some maths right here. And no one likes maths. However we like UI design, so we’ve got to make some room for calculations typically. Sigh.

The subsequent step is to create the center button of our tab bar. I’ll try this by including the next code earlier than the viewDidLoad() operate:

var layerHeight = CGFloat()
var middleButton: UIButton =
let b = UIButton()
let c = UIImage.SymbolConfiguration(pointSize: 15, weight: .heavy, scale: .massive)
b.setImage(UIImage(systemName: "plus", withConfiguration: c), for: .regular)
b.imageView?.tintColor = .white
b.backgroundColor = UIColor(named: “iDoxViewColor”)
return b
()

Subsequent up, we might want to do some fundamental formatting. I’ll try this by creating one operate that you’ll find under, however first I’ll clarify all that it does.

It should carry out the next actions:

  • disable the second tab bar merchandise, so the consumer doesn’t by accident hit a button that results in an empty view controller:
DispatchQueue.fundamental.async 
if let gadgets = self.tabBar.gadgets
gadgets[1].isEnabled = false

  • add our middleButton to the tab bar view and provides it a form, a shadow and, most significantly, a place:
// add center button
tabBar.addSubview(middleButton)
let measurement = CGFloat(50)
let fixed: CGFloat = -20 + ( layerHeight / 2 ) - 5
// set constraints
let constraints = [
middleButton.centerXAnchor.constraint(equalTo: tabBar.centerXAnchor),
middleButton.centerYAnchor.constraint(equalTo: tabBar.topAnchor, constant: constant),
middleButton.heightAnchor.constraint(equalToConstant: size),
middleButton.widthAnchor.constraint(equalToConstant: size)
]
for constraint in constraints
constraint.isActive = true

middleButton.layer.cornerRadius = measurement / 2
// shadow
middleButton.layer.shadowColor = tColor?.cgColor
middleButton.layer.shadowOffset = CGSize(width: 0, peak: 8)
middleButton.layer.shadowOpacity = 0.75
middleButton.layer.shadowRadius = 13
// different
middleButton.layer.masksToBounds = false
middleButton.translatesAutoresizingMaskIntoConstraints = false
  • a customized motion each time the button is tapped:
// motion
middleButton.addTarget(self, motion: #selector(buttonHandler(sender:)), for: .touchUpInside)

At this level, the system ought to provide you with an error as a result of the Goal-C operate buttonHandler(sender:) was not but created. We’ll do that quickly and the error ought to go away by itself.

The complete operate ought to appear to be this:

I’ll name the addMiddleButton() operate on the very finish of our setUpTabBar() operate. That is to make it possible for the CAShapeLayer() is already contained in the view and arrange, since I’m utilizing its y and peak values to make our center button.

Run your app and ensure your button’s place is as anticipated.

Time to outline the motion linked to this button and eliminate that annoying error! Create the Goal-C operate buttonHandler(sender:) by copy-pasting the next line in your code:

@objc func buttonHandler(sender: UIButton) 

Inside this operate, we’ll decide which actions might be carried out by this button. Will it open a brand new View Controller? Will it set your iPhone on hearth? Will it name the aliens and begin intergalactic wars? Will it summon Daenerys’ dragons to unleash their wrath upon us? That’s as much as you. I’m not a cautious lady myself so mine will merely rotate and present three extra buttons. Higher than three indignant dragons…

That is when these of you who had been horrible in maths and geometry might be uncovered. I do know, it’s not for everybody. But it surely’s enjoyable and easy so long as it’s effectively defined! So let me attempt to make it easy so it’s not a bore or utterly complicated. For those who already know what I’m speaking about, or don’t actually care to get too deep into the small print, you may simply skip to the code half.

the boring half…

We might be utilizing the tactic CGAffineTransform(rotationAngle:) to rotate our button. The angle shouldn’t be calculated in levels: due to this fact, it’s not so simple as to only utilizing 45 levels, 90 levels or 180 levels. We might want to calculate our angle in radians, that means that we’ll use the radius of a circle to find out the place our form ought to cease rotating.

A circle’s circumference divided by its diameter all the time equals a quantity round 3.14 referred to as pi (π). As a consequence, if we divide a circle’s half circumference by half diameter (radius) we must also get 3.14 (π). Due to this fact, in radians, 180 levels correspond to π.

As lots of you realize, the circumference of a circle divided by its diameter all the time leads to a quantity round 3.14 referred to as pi, abbreviated in math with the next image: π (Greek letter “P”). Which means that, if we’ve got a circle with a diameter of 2cm, its circumference could be round 6.28cm.

By logic, for those who divide a circle’s half circumference, or half circle, by its radius, which is half a diameter, the outcome would even be 3.14: with the instance above, a circle with a 2cm diameter would have a radius of 1cm and due to this fact a circumference of three.14cm.

As a result of we’re calculating our angle utilizing the radius of the circle, we’ll use half circle as a reference. As a result of a half-circle corresponds, in levels, to 180, and likewise to three.14, we will contemplate the next statements true:

  • in angles, π corresponds to 180 levels clockwise;
  • -π corresponds to 180 levels counter clockwise.

As you may see from my presentation gif, I transfer my button by 45 levels to show a plus image, which suggests including one thing, right into a cross image, to counsel closing one thing:

Did you get the fitting formulation? Or do you give up to the ability of maths? Okay, both method, right here’s the answer:

π / 4 = 45 levels

In Swift, it might appear to be this:

CGFloat.pi / 4

…and the cool half!

First off, set a boolean referred to as buttonTapped and set it to false:

var buttonTapped = false

And let’s fill in that x operate! It should work like this:

  • when the boolean x is ready to false, the button will transfer by 45 levels and when the boolean is ready to true, it would transfer again to its unique place;
  • the button’s background will change to white when chosen and switch again to purple when not chosen;
  • the button may have a purple border when chosen and no border when chosen;
  • the button’s picture will flip from white to purple when chosen and again to white when unselected;
  • the button may have a shadow no matter its state.

Our operate will appear to be this:

If you need, you may mess around with the animation length, the colours and the rotation angle to see which animation you want higher.

Run your mission and ensure the button works okay:

Wow! You ought to be happy with your self for making it up right here!

Excited for half 3 but? It’s popping out quickly!

Did you get pleasure from this tutorial? Did it work effectively together with your mission?

Wish to Join?Observe me on…
❤️ YouTube
💖 Dribbble
💜 Instagram
💙 Ko-Fi
🖤 GitHub

More Posts