iOS Auto Layout, Size Classes, and Constraints in Xcode

[ajbudis]

New to iOS programming! I've tried reading numerous guides on how to do this, but clearly am missing something. I'm essentially trying to understand the concept of Auto Layout, Size Classes, and Constraints.

So far the code works great for my simple tipping app, however, the alignment to the center is off. On all versions of the iPhone, it is too far to the right. I've tried adjusting constraints for each label/segment controller, but still receive no better result... usually it gets worse. I've tried looking online for numerous guides, but it does not seem to help Just looking for some thoughts.

Attached is an image of my problem. Left is the desired look, right is the outcome if I were to run the program.

Thanks,
Andrew

 

[PhoneyDeveloper]

I recommend the tutorials on the ray wenderlich site. There are two or three on constraints. Do them in order. Unfortunately constraints are complicated.

Let's focus on one view in your scene. The text at the bottom I assume is a UILabel and you want it to be at a certain vertical position in the scene and centered horizontally. To implement this you add a Center X in superview constraint to that view and another constraint that sets the vertical position, which will either be relative to the top layout guide or one of the views above it. If you do that this view will be centered on all devices.

 

[ajbudis]

Phoney,

Thanks for the response! I really do appreciate your help.

I read Wenderlich's webpage, and it definitely helped me to understand concepts. I'm still struggling though. At one point he says that more intricate projects are going to be more messy to deal with... I may have the messy project with labels and such. His project with squares/ and few labels seemed to auto configure itself.

I've attached another screenshot of where I am at. Any more thoughts? I was a bit confused by your advice.

Thank you again, hope you have a good Superbowl sunday

 

[PhoneyDeveloper]

Do you see any errors in the console when running this. If there are constraints that are conflicting you get some error messages. Also in the design view in Xcode you'll see yellow or red dots if there's an error.

The bottom label doesn't seem like it has a center X constraint. I think the center X constraints are the ones that go top to bottom. Below is what I get for a simple label with center X constraint and a fixed vertical constraint. Notice it has no leading or trailing constraint.

What you're getting I think are views that are fixed to the left side. I think you need to set them so the leading and trailing adjust or the views are simply centered. Are your blue views with the numbers images or standard views?

 

[ajbudis]

Phoney,

I've got to sincerely thank you for your help. I finally with your expertise have gotten closer.

I do have one more concern. I have ambiguities currently (orange lines). The views show up and appear to be working close to what I desire.

My biggest concern...

- Segmented controller is not showing up in the preview to the right. It does appear during Building.
-Ambiguities a concern?

Thanks again for all your guidance. I've started the teamtreehouse.org training for Swift. I've been taking breaks to continue attempting to build this application for fun/knowledge.

Cheers
Andrew

 

[PhoneyDeveloper]

Glad you're getting there.

Yes, you need to fix the warnings. Usually you can understand them. The fix frame, or sometimes fix constraints, menu items usually fix these things. Sometimes you have extra constraints that need to be removed. Anyway, they need to be fixed.