Constraints UIViews… without Constraints

Gijo Ribeiro
Jul 21, 2017 · 4 min read

I like to believe that the best way to create layouts is not only using someone else’s methodology. Have you ever thought that you can create your own?

Every good designer has a urge to be bigger and stood out in every passing work. That’s not different with programming.

You have to ask yourself what’s the best way to create with confidence and security.
Have the interface builder constraints gives you the freedom to make what you want? Is great, but… animating UIViews would be difficult, even more on different device sizes.
Maybe what you need, but not what you want.

So, having the constraints made programmatically should work better. But how much of a difficult task and time consuming is that?
Asking your team what’s easier for them, also works.

The most important thing now, is that you are only thinking of these both methods. That’s limiting your own design piece.

I’m sharing now the method I’ve been using and refining for the last couple of weeks with my head programmer. Once you get the hang of it, you can start to create transitions and on screen animations without the fear to have out of place objects.
Because, as you create elements on screen, you’ll reference the very same coordinates of the element to create another one, it’s also possible to reference screen percentage.

To start, choosing our weapon inside our arsenal is the most very important part now:

"The Order…will protect us"

viewDidLoad are things you have to do only once. viewWillAppear gets called every time the view appears. You should do things that you only have to do once in viewDidLoad.

Creating UIViews is fairly demanding from the hardware, so you should avoid as much as possible doing that on the ViewWillAppear method, because when this gets called, it means that the iPhone is already ready to show the UIView to the user, and anything heavy you do here will impact performance in a very visible manner. Like delays and even spikes on animations.

viewWillLayoutsubviews are not loaded with the screen, is called only when a view’s bounds changes. Rotating screen or even "CGRecting" the bound of the screen size.


I will begin creating a big header for a nice background photo. While the bottom part will only be a button to login. The desire now is to add these two elements, dividing the screen or using screen percentage, to work on any screen.

First View with Screen Percentage

Using viewDidLoad to create the top part, adding any color to identify it right away.

(frame.height * 60 / 100) means 60% of the screen.

let positionOnScreen = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height * 60 / 100)
let headerView = UIView(frame: positionOnScreen)

headerView.backgroundColor = UIColor.purple
self.view.addSubview(headerView)


Do NOT use CGRect to Center

Now, add the button: To find the center, do not use CGrect.

to use CGPoint, you have to call View.Center — not View.Frame
CGPoint gives us the freedom to use "view.center" too. Much easier.

Result

Yes, you have options

as you can see:
(frame.origin.x / 2)
is the same as
(frame.center.x) inside CGPoint.

It's important to know that you have options to manipulate elements to that level.

Just play now:
Add cornerRadius and setTitle
to the button.

Finish with a Challenge

Try to add the label inside the button… but applying our rules, plus, a touch of difficulty: Can you do that without setting the title of the button?

Create a label in the self.view, and center it on the button, like on the screenshot.

But you know we can't use CGPoint without CGRect. How CGRect would be?

Don't forget to align the text center and put in the same size as the button.

That's it!

You can make entire screens without even build the app, because you'll know exactly where the Views will go. That's what I love the most about working this way.

Think about the endless options you can make. Don’t be chained to one, just try and see how fast screens are build up like this.

Thank you for reading. This is just the basic about this method, it's pretty easy and you can guide yourself now.

Pretty much the fastest method I’ve ever used!

Stantmob

We are a SaaS made for construction companies to manage their jobs

)

Gijo Ribeiro

Written by

Stantmob

Stantmob

We are a SaaS made for construction companies to manage their jobs

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade