CODEWITHSUNDEEP
iosautolayoutxcode6nslayoutconstraint
Jaymin Raval
Jaymin Raval

Reputation: 205

Autolayout & Alignment Constraints

I want to make similar ui for all iPhones & i am currently using auto layout for that, but i do not know how to create this `UI` using `NSLayoutConstraint`?

This UI works fine in small screen but i want same ui for bigger iPhone as well(keep certain amount of space between buttons). how can i add constraint in this to get same ui as iPhone 4s.

i took UIButton & below titles are UILabel.

Some one help me out here.

Screenshots.

iPhone 4s

iPhone 6 Plus

Upvotes: 0

Views: 1985

Answers (3)

Derek Lee
Derek Lee

Reputation: 3660

Personally I find that trying to make sense of Auto Layout constraints in code (and using NSLayoutConstraint) to be quite confusing and difficult to understand. VFL (Visual Format Language) is powerful but I would recommend if you are just starting out with Auto Layout then working in Storyboard or a XIB file may be easier (depends on your individual preference).

Since this is quite an involved topic I've put together a sample project for you to reference on GitHub. The benefit of this approach is that there is literally no code - all of the configuration is done in the Storyboard (or can also be done in a XIB file). Highlights of the constraints I created are below however please reference the sample project for specific details:

  • Background View (Purple) - Constraints pin the top, bottom, left and right sides to the edge of the parent view.
  • Icon Container View (White) - Constraints pin the bottom, left and right sides; a height is also set which accommodates all of the icons.
  • All image views have a width constraint and aspect ratio constraint (maintains equal width and height) and all labels are constrained to their appropriate image with the appropriate vertical constraint (top).
  • The outside corner icons are all constrained only to their corner (top-left, top-right, bottom-left, bottom-right). The center corners are constrained to be centered horizontally inside the view.

If you are just getting started with Auto Layout you may find the following presentation I made helpful in learning the basics.

Here are three screenshots from different simulators which show how the layout adjusts automatically depending on the screen size: iPhone 5s, iPhone 6, and iPhone 6 Plus:

iPhone 5s Example

iPhone 6 Example

iPhone 6 Plus Example

Technically, landscape orientation is also supported by these constraints however the result may or may not fit your requirements. (I am unsure what orientations you are planning to support.)

Upvotes: 2

Hodson
Hodson

Reputation: 3556

I don't really want to write the code for your whole view as its not the best way for you to learn and plus I don't have the time right now. Instead, I will tell you the approach I usually take:

Create the view

UIView *myView = [UIView new];

Set translatesAutoresizingMaskIntoConstraints property

myView.translatesAutoresizingMaskIntoConstraints = NO;

Add view as subview

[self.view addSubview:myView];

Add the constraints

NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:myView
                                                              attribute:NSLayoutAttributeTop
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:self.view
                                                              attribute:NSLayoutAttributeTop
                                                             multiplier:1.0
                                                               constant:0.0];

[self.view addConstraint:constraint];

You need to add multiple constraints in order to layout the view exactly as you want in relation to the other views around it. Top, left (leading), right (trailing) and bottom.

I suggest either creating your own category in order to make writing the constraints quicker and easier to understand when reading it back. Here's one for example: PureLayout

You can also use constraints with a visual format but I often find this can be harder to get your head around.

More reading on the whole subject can be done here

Upvotes: 1

Amit
Amit

Reputation: 1043

It depends on your requirement and their may be different ways to achieve. But if you ask in this particular case with three items as fixed then following may help:

  • The buttons at the corners can have constraints with borders.
  • All the labels can have constraints with their respective buttons to be same width and should be aligned horizontally centred with buttons.
  • The buttons in centre and buttons at the borders should not have any dependencies with each other.
  • The buttons in centre can have constraints with top and bottom of the container view.
  • Buttons in centre should have constraints for horizontally centred with the container view.

You might need to add some more constraints, but based on the above suggestions it will work for any screen size.

Upvotes: 0

Related Questions