Design dribble like UIs in your apps
Facet menus was once an enormous deal within the 2010s. Particularly those who used to return out by sliding proper from the facet of the display. How cool have been these?
However occasions change. Design evolves. And that sliding menu doesn’t all the time look so cool with our trendy graphics, proper? I imply, think about a fantastically designed app with only a common sliding menu. Ugh. Outdated.
The unhealthy information is, generally we nonetheless want a menu for our customers’ navigation. So can we make it match our app with out it trying prefer it was revealed a decade in the past? I feel sure! And for those who just like the look of my facet menu, learn on to implement my code along with your app to see the way it seems, and let me know your suggestions!
First off, we might want to set an array of choices that we need to embrace in our facet menu. Every choice ought to have a title that the person will see and a correspondent segue to carry out upon choice:
That is the place they may seem on the finish of the tutorial:
Set the view’s background color to your required color and add a Desk View within it. That is the place our menu choices will seem, due to this fact, you need to align it to the left facet of the display and make its width abound half the scale of the display to ensure it’s utterly seen when the principle view strikes to the fitting.
Add a Desk View Cell inside your Desk View.
Join the Desk View to your view controller and identify it menuTableView.
Create a category named tableViewCell with sort UITableViewCell and add any ingredient chances are you’ll want on your menu. I’ll solely use a label to show the identify of the choice.
Assign the category to your Desk View Cell.
Slightly below the Desk View Cell’s Identifier, there’s a Choice choice. It’s routinely set to ‘default’. Because of this the background of your Cell will flip white upon choice.
I made a decision to not use that and to arrange my very own customized choice animation later, due to this fact, I’ll change the choice from ‘default’ to ‘none’ to keep away from undesirable automated animations.
Subsequent up, in your view controller, add this code within the viewDidLoad() perform:
menuTableView.delegate = self
menuTableView.dataSource = self
menuTableView.backgroundColor = .clear
Now, all we have to do is to arrange the Desk View, which we are able to do by including an extension to our View Controller’s class utilizing the next code:
Construct the venture and ensure your consequence seems much like this:
Now that we now have created our facet menu, it’s time to create our most important view. The very first thing we might want to do is add a view to the storyboard and make it match all the display. Be sure you additionally set its high, backside, main, and trailing constraints to zero.
Customise your view on your app’s function. My view will comprise an Picture View the scale of the background with a plant picture and alpha set to 0,15 and dummy pictures and labels as presentation.
Join your container view to the view controller and identify it containerView.
The following step is so as to add gesture recognisers that we are going to use to recognise when the person is attempting to point out or disguise the facet menu. Open the library and add a Faucet Gesture Recogniser contained in the container view.
Utilizing the identical technique, add a Swipe Gesture Recogniser to your container view as properly.
As soon as your view is all set, you’re prepared for the animation code!
The very first thing we’ll do is ready a boolean worth to find out when our menu is displaying. For now, we’ll set it to false, till the person swipes to point out the facet menu:
var menu = false
We may also set a shortcut to the display’s bounds to make our code slimmer:
let display = UIScreen.most important.bounds
With the intention to memorise the preliminary place of the view, we additionally have to set a property so we are able to simply return to it:
var dwelling = CGAffineTransform()
In viewDidLoad(), dwelling will correspond to the present place of the container view:
dwelling = self.containerView.rework
We at the moment are prepared for the animation. I created two completely different capabilities, one referred to as showMenu() and one other referred to as hideMenu(). I’ll use CGAffineTransform() to scale the view and transfer its x place each by 0.8 in an animation that can final 0.7 seconds, and I’ll use the dwelling property to rapidly transfer the view again to its preliminary place:
Join the Swipe Gesture Recogniser to the View Controller to create an motion. This would be the gesture that can set off the menu to point out.
Second, join additionally the Faucet Gesture Recogniser to the View Controller to create an motion that can shut the facet menu.
Nearly accomplished!
Our final step: our Swipe Gesture Recogniser motion must be triggered each time the person swipes proper whereas the menu property is ready to false, which signifies that the menu just isn’t already displaying. When that occurs, our showMenu() perform will carry out and our menu property might be set to true.
Contrarily, when our person faucets the view when the menu is displaying, our Faucet Gesture Recogniser will set off an motion that can carry out our hideMenu() perform and set our menu property again to false.
And we’re all accomplished! Now construct your venture and try it out:
You may obtain the complete code on GitHub!
Did you take pleasure in this tutorial? Did it work properly along with your venture? Let me know your suggestions within the feedback down beneath!
Wish to Join?Observe me on…
YouTube
Dribbble
Ko-Fi
GitHub
