I've been trying to center some buttons in an horizontal UIStackView
But doesn't matter what I do, the only not broken layout that I can get is basically:
I added constraints to fix the button width programmatically, as the amount of buttons is variable, but can't find a way to fix the spacing between them.
These are the stack view settings:
I tried all the distribution options!
The layout in the top image can be achieved as follows:
Add a stack view with default properties (horizontal axis, fill distribution). Add optional spacing as you want.
Constrain the stack view vertically to its superview.
Either don't constrain it horizontally to its superview, or if you want, constrain it using inequality (left >= superview.left, right <= superview.right).
Center your stack view horizontally within its superview.
Add your subviews. Make sure they know how to size themselves (either based on their own contents, or with a fixed width).
The key is the constraints on the UIStackView in 3 & 4. You're horizontally pinning it to its superview, so it needs to figure out how to fill out all the space. Instead, center it horizontally, and allow the stack view only to take up as much space as it needs.
Related
I have a cell in which I place four buttons and four labels. Each button gets assigned a picture with width 50 and height 50. Furthermore, all buttons have a corresponding label describing what they're intended for.
My objective is to have the buttons and labels resize to keep the buttons' and labels' aspect ration intact while the screen dimension changes on different devices. I have been playing with auto layout changing the hugging and compression to achieve this but haven't been successful yet. Any help would be much appreciated...
I think you should take a look at a UIStackView, because this seems exactly as a use case for stack. Just put each pair button/label in a stack, and then all four pairs into a horizontal stack, which you constraint to the cell itself. You should be able to handle all you need just by configuring the stack’s properties (axis, distribution, alignment, spacing).
Embed your button and label into a view. Set the width of this view equal widths to content view and change the multiplier value to 1:4. This will adjust the widths of the views according to superview. Also, set the top and bottom constraint to 0 for this view.
Provide center align y-axis constraint to button after setting the width and height constraint to 50. Set its top constraint to a value you deem fit.
Set labels's leading and trailing constraint to a value like 8. Choose center alignment for text. Also, provide top constraint to buttona nd bottom to its superview.
Copy the view and paste to create the three views and provide them equal widths constraint to the first view. Also, provide their leading, trailing, top and bottom constraints.
Here are a fast tutorial in how to achieve that:
1-
2- completion of the first Gif:
Note you can achieve the same output using a UIStackView
Say I have 2 views (labels or textfields) with varying heights positioned above each other (not on top). I would like the group centred vertically in the superview.
I know I could use a dummy spacer view above and below and set equal height in storyboard. I'm no expert, but this doesn't seem right to me.
Can it be done in storyboard by setting the top constraint for the top view equal to the bottom constraint of the bottom view?
If your subviews' heights will change at runtime (either because you change the number of lines of text in them, or because you support Dynamic Type like a good iOS app should), then no, you cannot do this with just constraints. You either need an extra view or you need to change the constraint constants from code. If you go with an extra view (which I recommend), you can do it with a single extra view.
The simplest solution, if your deployment target is iOS 9 or later, is to put your subviews into a vertical UIStackView and center the UIStackView in the superview. You might not need any constraints directly on the subviews depending on the layout you want.
If you can't use a stack view, you can use a spacer view. First, set up vertical spacing constraints between your subviews to glue them together with whatever padding you want. Then add a spacer view next to the subviews. Set the spacer view to hidden. (Hidden views still participate in layout.) Constrain the spacer's top edge to your top subview's top edge, and constrain the spacer's bottom edge to your bottom subview's bottom edge. Then constrain the spacer to be vertically centered in its container (which should be the superview).
You also need to add horizontal constraints on the spacer to keep Xcode from complaining, but the horizontal size and position don't really matter since the spacer is hidden. So just put it somewhere convenient.
Here's the final set of constraints and layout:
The spacer is the skinny pink view.
You can achieve it easily via center vertically, control and drag the object you want to centre in Storyboard, choose center vertically in container. This way you can centre these subviews in superView individually. If you want to centre these subviews together, you can create another containerView to contain these views(labels, textFields), then centre the containerView in superView.
Hope this help:-)
Control and drag in Storyboard
Center three subView individually.
Center them together with a container view
My problem is slightly different from other's 'Swift UIScrollView' problems when using auto layout:
Problem:
Unlike others, when I run my app, it scrolls. My problem is that the scroll cuts off the bottom 20-30% of the content. I can pull to see the buttons did build and are down there, but when I let it go the scroll snaps back to a false bottom which cuts off my content!!! I've been trying, for days, to fix it to scroll the entire height but it continues to cut off!!
Description of app:
I used auto layout to layout 6 buttons and labels. Each button a rectangular image, with a label directly beneath it. (sorry, the site won't let me post pictures!)
I have my views arranged like this:
MainView > ScrollView > ContentView > Buttons & Labels
I have my contentView pinned to my ScrollView and my ScrollView pinned to my MainView. My buttons and labels all have constraints that are building correctly, to create a list that looks like:
Rectangular button
Label beneath it
Spacing
Rectangular button
Label beneath it
Spacing
Etc.
Can anyone tell me why I can't scroll the full length of the view?
Your description of how your items are constrained is vague, so I'm going to list all of the constraints you need to make this work. Then you can compare what you have to what you need and adjust accordingly.
Your ScrollView should be pinned on all 4 sides to the MainView. (This isn't absolutely necessary. You can constrain your ScrollView however you want, but make sure it can grow as the device and/or orientation changes).
Your ContentView should be pinned on all 4 sides to the ScrollView with offsets of 0.
Since you want your ScrollView to scroll vertically only, constrain the width of the ContentView to the width of the ScrollView using an Equal Widths constraint. To do this, in the Document Outline view, Control-drag from your ContentView to your ScrollView and select Equal Widths from the pop up.
The height of ContentView will be set by the sum total height of everything in it. In order for this to work, your topmost button needs to be pinned to the top of the ContentView, all of your buttons and labels should be pinned to their nearest neighbors, and the bottommost label should be pinned to the bottom of the ContentView. In addition, all of your buttons and labels should have constraints for their widths and heights. I would suggest setting an explicit width constraint and explicit height constraint for your buttons and centering them horizontally in the ContentView. For your labels, set an explicit height constraint and pin the left and right edges to the ContentView.
If you have these constraints and no other ones, your ContentView will be properly sized.
Using contentView, like you said, usually fixes the issue. So chances are you need to take a second look at your contraints. Maybe try this solution in a clean/new project to see that it works. (it does work). My guess would be that some of your constraints conflict each other.
Otherwise I think it would be a good idea to setContentSize of your scrollView in your viewDidLoad.
Another hack would be to place 2 UI objects with their alphas set to zero on the right top corner and left bottom corner. This would hint scrollView to set its contentSize.
I am struggling to align 5 items in a row using auto layout as shown in the storyboard.
I can align the 3 items highlighted below but the 2 inbetween just don't want to align.
I have tried pinning the items to the buttons next to each of the items and setting the size but they refuse to align properly. Have also tried setting the 2 misplaced buttons to the leading and trialing container as shown below but these still do not align properly (or even closely).
Am I doing something wrong?
The way to do this is with spacer views. You need to add a UIView between each of your views and give them each horizontal spacing constraints to the view on either side. You'll need to edit these constraints so they are between the spacer's leading or trailing edge, and the view's centerX (the constant value should be 0). Give the spacers equal widths (but no fixed width), a fixed height, and a clear background color. You views on the left and right sides should have constraints to their closest edge, but the center view shouldn't have a centerX constraint (it's not needed). This will cause the views to be equally spaced in all screen sizes, and in both orientations.
Your best bet might be to create another superview (UIView) within which your button items are located. Then you can align your buttons more fluidly within that superview that encapsulates only those buttons rather than just wrestling with the constraints within the card superview, which it seems you are doing. Just make the background of that UIView clear, place the buttons on it, and it will appear exactly the same and you'll have a better way to anchor your views. This could also come in handy when you're targeting the functionality of just those buttons so you can grab them from the subviews of the button bar superview.
Suppose that I have the following view controller and this is how I want to see it on all iPhone:
If I run it on iPhone 6 it has the following look:
Here you can notice that UITableView not fit the whole screen and UIImageView doesn't placed at the bottom of the screen.
How can I achieve the required behavior via constraints in XCode 6? I thought that I need the following constraints:
Leading space and top space to container margin for UITableView
Bottom space and trailing space to container margin for UIImageView
Vertical Spacing between UITableView and UIImageView
But it doesn't work as expected even after auto-resolve constraints issues:
Thanks in advance.
Ok, a few things here:
Each view needs enough constraints to define it's x and y position, and it's width and height unambiguously. To start with, go back to Interface builder and delete all of your constraints and lay out the view as you would like it to look. You want to have control over every constraint added, don't let IB automatically resolve the issues, as in all likely hood it won't do what you want.
Do you have an image that is the size you want it to be on screen, once you've factored in #2x, #3x etc? If so, then your job will be easier, as the width and height of the image view can be defined by the width and height of the image (ie the image view's intrinsic content size).
In order to use Autolayout effectively, you need to think about your view holistically, and think about how you want your views to behave when the screen size changes, be clear in your head about the behaviour.
To achieve the layout you want, I would do the following:
Constrain the tableview's leading, top and trailing edges to the superview, with a constant value of 0. This means it can get wider and thinner with the device, it will stretch horizontally, but always stick to the top. This has defined the tableview's x and y position, as well as it's width (height still to go, but keep reading...)
Constrain the image view to match the horizontal centre of it's superview (x position defined) and constrain it's bottom edge to the superviews bottom edge (y position defined). If've you've got the right sized asset, then that will take care of the width and height too. If not, you could go ahead give it explicit width and height constraints.
Now we can constrain the tableview's bottom edge to the top of the image view, with a constant of 0 (ie touching). Note we haven't give the table view an explicit height constraint, so as the device screen grows vertically, the table view will stretch vertically.
Autolayout is hard at first. I'd recommended lots of reading to get over the initial hump, really get to know what a constraint is doing, it's limitations, and the way in which the system parses constraints to translate them into frames. This book is really good, and really helped me learn:
http://www.amazon.co.uk/Auto-Layout-Demystified-Mobile-Programming/dp/0321967194
Best of luck
First make sure you have selected the correct size class. The 'Compact Width | Regular Height' size class must be selected in the Interface Builder. Now add the Trailing space,Leading Space, Top space and Bottom space constraints to the table view. For the image view set the view mode to Aspect fit and add the constraints : Align Center Y ,Top space,Bottom space, Leading space, Trailing space and Aspect Ratio .