3

I'm using Xamarin Studio for iOS development and I've just started to use the Xcode Interface Builder and it is giving me headaches. My Xcode version is 5.1.1(5B1008) and I'm on Xamarin Studio 5.5 build 227 with Xamarin.iOS 8.2.0.193 on Starter Edition.

I'm not able to understand how to use the Auto-Layout functionality and I've read tutorials, most say the say, drag element into view, click on Pin icon, set constraints and be done with it.

But the elements I add don't end up looking as I want them to be.

For example let's say I want to create a view with a scroll view in it and that will display labels and text fields in it as if it were a form, by dragging-dropping element imagine I end up with something like this:

enter image description here

The layout I desire is for every label and text field to be 11 dps apart from the left and right, no matter the orientation, also each needs to be 11 dps apart from each other, with the initial label to be 50 dps apart from the top of the scroll view.

Every element should be the same height (20 dps) always but their width must change according to the left and right constraints.

That's the end of my layout definition.

Now let's start with defining the left and right constraints along with the height. What I do is to select all of the label and textfields, I pin the left and right and set their height to the same value:

enter image description here

But what I get looks like this:

enter image description here

The resulting layout looks nothing like I wanted, the width for every element is set to the same size and the right values don't make sense, I stated 11 dps but I get values like 187, 173 and 228.

Even if I set the top and bottom constraints, the right constraints keep looking the same:

enter image description here

How do I fix this? I've deleted and started from scratch several times but I can't find to understand what am I doing wrong. Some of the technical language challenges me sometimes (I'm not a native english speaker) so I don't know if I'm interpreting something differently.

Some of the links for the tutorials I've looked into are this, this and this.

Uriel Arvizu
  • 1,876
  • 6
  • 37
  • 97
  • Just FYI, AutoLayout with `UIScrollView`s is a particularly sticky area. In general, it's so frustrating to me that I end up using static `UITableView`s instead. rob's answer below is a GREAT general-purpose answer, but I really find that frequently, scroll view constraint errors are a massive pain. I either lay my views out as I wish and let Xcode set up my constraints for me (suggested constraints) or go with static `UITableView`s. – mbm29414 Oct 10 '14 at 19:35

1 Answers1

4

You need to ask Interface Builder to update the frames of those elements. All those yellow lines/numbers are constraints that are currently not satisfied - the frames of the elements don't match what the constraints require.

However, it's often better to make sure you have all your constraints set up first, before asking IB to update the frames.

Here, I've set up all the constraints you described, but I haven't asked IB to update the frames:

constraints unsolved

Here, I've asked IB to update the frames of all views in the top-level view:

constraints solved

If I select the subviews, I can see that the constraints are now shown in blue, meaning they are satisfied:

solved constraints visible

rob mayoff
  • 375,296
  • 67
  • 796
  • 848
  • I know I have to select update frames in container, I was guiding myself on the final layout with the orange dashes before updating the frames, but still the width of the elements remains small. What I did was: select elements, pin top, left, right and bottom to 11, height to 20 and equal heights. Select update frames in container and I got [this result](http://i.imgur.com/2Ga5VuM.png). As you can see, the right constraints aren't my desired 11 dps. – Uriel Arvizu Oct 10 '14 at 20:49
  • Also I run the simulator I get [this result](http://i.imgur.com/lh0dt4i.png). The blue container is the scroll view with constraints set to 11. – Uriel Arvizu Oct 10 '14 at 20:54
  • There's no point in creating height-20 constaints on all the subviews, and also creating equal-height constraints. You should get rid of one or the other. From your IB screen shot, I deduce that your trailing (right-edge) constraints are **not** set to 11. You need to edit each of those constraints to fix its constant. – rob mayoff Oct 10 '14 at 21:08
  • This what [I'm setting on the selected elements](http://i.imgur.com/v2gTAPe.png). Anytime I set the right to 11, the line that represents the constraint is red colored. After applying it if I check the constraints on the element the right says its value is 245. Is it because of the scroll view? Or am I omitting something? Bear in mind that I'm a novice using the Interface Builder so I might be skipping something developers accustomed to iOS do. – Uriel Arvizu Oct 10 '14 at 21:13
  • You get a red line when you have conflicting constraints. Don't add more constraints. Change the 245 on the existing constraints to 11. – rob mayoff Oct 10 '14 at 21:19
  • I've tried to create a new view but without the scroll view and the auto layout works correctly, then how am I supposed to create forms with input fields? Do I have to cut them down into several views? Then is the scroll view on iOS only used for displaying one element like an image? – Uriel Arvizu Oct 10 '14 at 21:37
  • I didn't saw your previous comment, I noticed all of the constraints are marked as red even when I get the result I want, but there're no other constraints added. – Uriel Arvizu Oct 10 '14 at 21:55