Auto Layout, as good as it is, driving me crazy with constraints. I have the portrait mode designed in IB but I can't get the desired landscape orientation to work.
Notice that when the orientation changes to landscape, the spacing between the UIImageView blocks decreases and the text alignment of SAMPLE TEXT changes to right aligned.
Currently, I have added a few constraints for it to work. However, I need to keep the space between UIImageView blocks fixed, as a result of which it looks cramped up in portrait and fine in landscape. I need it to be spread out evenly in portrait and compress in landscape (like in image above). Similarly, currently my constraints bring up the text but it doesnot keep it at the center of screen and right aligned.
Is this possible at all with Auto Layout? If so, how? Help greatly appreciated.
There are several ways to approach this. One way is to enclose your 3 image views in a UIView. Give the top and bottom image views constraints to the top and bottom respectively, and give the middle one a centerY constraint. Give this enclosing view a fixed height and width, and a constraint to the top of the controller's view. Make an IBOutlet to the height constraint for this enclosing view, and change it on rotation. In the example below, I gave it a height of 350 in portrait:
-(void)updateViewConstraints {
[super updateViewConstraints];
if (self.view.bounds.size.height < self.view.bounds.size.width) {
self.heightCon.constant = self.view.bounds.size.height;
}else{
self.heightCon.constant = 350;
}
}
As for the label, the easiest way is to remove the constraints you have (bottom and centerX), and add trailing and centerY on rotation.
Yes, it can be done with Auto Layout. If you want the spacing between views to increase and/or decrease depending on orientation, you can use the Less Than or Equal or Greater Than or Equal relation (instead of Equal) for the constraint, which allows a distance to grow or shrink:
Play around with that and you should be able to get what you want.
Yes, it is definitely possible to do this with Auto Layout. Through a series of steps, that I think might be too long to post as an answer, you can retain the spacing between your ImageViews and keep the alignment of the text the same.
Essentially, you will have to pin a corner of each ImageView and remove some constraints so that it doesn't automatically compress the spacing when you change the orientation.
Full explanation on how to do this (pretty much exactly what you are asking for) is explained in this tuorial. You can find it about halfway through the page.
Hope this is what you were looking for.
Related
I don't really understand constraints and have tried many different suggestions found online. All they seem to do is bunch everything up on top of one another or do nothing at all.
I have the following IPad application but I want it to work on any size device, mainly a IPod touch.
The page is simply two buttons that I want to remain the same no matter what screen they're on.
Any help on this appreciated.
It helps to think about points of reference that won't change with different screen sizes. Sometimes you want things on, say the top left corner so you just do constraints to the top and the left.
I'll give you two suggestions
Suggestion One
For your case, it seems like you might want to do constraints off centerY since you want them to be in the middle despite the screen size.
So I would make a constraint to "Center Vertically in Container" and then tap on the constraint and adjust it's value to negative or positive, so that way it's always X pixels above or below the centerY.
Now that's not going to be enough. it knows it's Y position but it doesn't know its height, width, or X position. So you need to add enough constraints to satisfy those.
A few examples:
X/Width: Two constraints to leading and trailing on each button OR Center horizontally and fixed width constraint. (again be careful with fixed width constraints since screen sizes can change, sometimes it's what you want though)
Height: Yeah just give it a height constraint in this case.
Note that this means no matter the screen size they'll always have the same gap between them (and maybe different gaps to the other edges).
Suggestion Two
Use a container view, either a stack view (fill, equal spacing, vertical alignment, a spacing value for gap between) or normal view.
You can make the view a fixed height based off the height and spacing between the buttons you want. Then simply center that container view horizontally and vertically on the super view.
Nonsuggestion
There are certainly other ways (like using buffer views with equal heights constraints. So you'd have an invisible view on top, a view in between and a view on bottom. and you'd give those equal heights constraints and align the buttons to the edges of the invisible views surrounding them. As long as you gave the buttons a fixed height this would work for vertical constraints) but I think these two would probably be the best.
I need my buttons to stay in the same positions for all phones.
I want it to look like this on all iPhones:
But when I switch to a larger size phone it does this, it also looks ugly on smaller phones as well:
That is a VERY broad question, as a lot of iOS UI depends on autolayout. I suggest you work through these tuts at at least AutoLayout. From your screen shots, it looks as if you have set a width constraint on your view with the green background instead of pinning the leading, trailing, top, and bottom to the edges.
Auto layout is, in essence, a system that performs calculations based on constraints. This means that to perform what you want, you need to add constraints to each of your objects so that the compiler knows how you want to resize your UI. But like others have said, that is a very general question. I suggest looking into the topic a bit before asking, so you can narrow down your question and get better answers.
You need to define positions for all your button or views. You need to define atleast 4 constraints for all your view. By adding constraints you tell your views where they should be placed on all screens. You define their positioning with respect to screen by adding constraints.
When you add trailing, from top and width and height constraint you tell that view should be placed in fixed position i.e. x , y and occupy defined space whatever may be screen size.You can opt for fixed width or height. Instead of fixing height and width you can also define leading or trailing constraints for the view. Constraints will adjust views frame according to screen size.
For beginning you can opt for some tutorials available online. You can check Raywanderlich here. Hope it helps.
I am wondering if i can achieve this with Xcode's IB auto layout constraints, as currently i am beating my head against a wall, referring to the image below:
I have three views, and want the upper and lower to be proportional to the screen, and have the middle lock x pixels from each. I am sure i can manually do it, but am also sure that somehow the aspect ratio constraint can allow this to happen.
I am pinning the top/bottom view to sides (0), and respective top/botton (o), laying out the view i want in IB's iPad rendering so the proportions look proper, then setting aspect. Logically this makes sense to me, but it isn't working, so i suspect I am making assumptions about the aspect constraint.
Hopefully this is explained well enough to elicit a saving thought or two. thx.
I'm not sure if I understood what you mean correctly, but is that effect below you would like to achieve?
Take a look at the constraints.
Use equal height or width constraints to the superview and set multiplier to the percentage you want it to take. 50% would be .5. To create these in the document outline drag from the child view to the parent view. You will see the option of equal heights or widths. Choose edit on the constraint and change the multiplier from 1 to the desired number. Cheers. Or see answer How to scale height of views and postion of the views relative to the screen size using AutoLayout
I can't seem to figure out constraints and auto layout.How can I have the spacing between two objects be different on the iPad when in landscape and portrait.
I placed to UIViews side by side. When in portrait I would like the spacing between them to be 40 but when in landscape it can be larger because there is more width.
This is what it looks like in portrait mode. Which I am happy with.
And here it is in landscape. As you can see it doesn't seem to fill the screen as well and there ends up being a lot of empty space.
Any suggestions? Thank you!
you can click the small + icon next to the constraint value and select different values for another size class.
or you can change the constraint value in code depending on your orientation.
or you can add extra constraints with lower priority and then increase the priority once you are in landscape mode.
Instead of giving the spacing constraint a constant value like 40, make it a proportional width constraint that is some small percentage of the width of one of the views it is installed between, or a small percentage of the width of the overall superview. That way, as the width of the screen gets larger (as in landscape orientation), the spacing proportionately gets wider as well.
In addition to #Daniel Hall's answer, I would also like to point out that you could also pin the leading and trailing edges of the two UIView you have to their parent view and each other.
For example:
First UIView: Leading Edge 10 points from parent view, Trailing Edge 40 points from second UIView
Second UIView: Leading Edge 40 points from first UIView, Trailing Edge 10 points from parent view
It should resize itself based on these auto layout constraints once you rotate your device. Of course with this method, you run the risk of having your two UIView stretched beyond accurate proportion, so use it wisely.
I ended up having to pin it to the to the bottom and their respective sides.
View 1:
Leading: 30
Bottom: 25
View 2:
Trailing: 30
Bottom: 25
I used a >= constraint for the space between them (>= 5). If I increased the constant on any of these constraints the views would overlap. It's not the best situation because I still have a lot of empty space in landscape mode but it's the best I could come up with.
The title might seem a bit complicated so I'll just show you what I want in some pictures.
So here is what I want:
[1] - http://i.stack.imgur.com/5Vckr.png
And here is how I tried to accomplish it in xCode 6:
[2] - http://i.stack.imgur.com/ags9s.png
[3] - http://i.stack.imgur.com/UhIuy.png
As you can see I tried to use size classes to snap the ImageView to the left and right in portrait view and to the bottom and top in landscape.
But somehow it is not aligned right in Landscape and if I look at a iPad preview the ImageView does not show up at all.
This probably is pretty simple but I tried for hours and still have no result.
Thank you for your help!
First of all switch mode from w:Compact/h:Any to w:Any/h:Any.
By adding constraints in this mode you will apply them for all devices and orientations.
Here is list of constraints that you need to apply:
Set lower priority (e.g. 750) for the two constraints with the dashed border (Equal Width and Equal Height to superview), and let the others have default priority of 1000.