Currently I'm displaying two labels and view on a tableview contentview cell on my app. Without constraints, the labels display correctly on the device. However, when I add constraints to the labels in the storyboard, they always align to the left. I'm currently using top, bottom, leading/trailing (left & right), and have in other attempts also set height and width.
New Constraints storyboard:
However, when I run it on any device, it always looks like this:
Actual view:
I'm wondering why this keeps happening. I want to avoid doing constraints programmatically in this app to show I can use storyboard, but this one problem has stumped me. I've tried reading up as much as I can, but I just can't get it to work. Any idea how to get it to look like the first picture, all the time when, adding constraints?
Related
I was trying to add a UISTackview in a scrollview. I believe the UIScrollview setup is right as the following screen has scrolled. Please note that it does not have any stackview, I have added a button with big top constraint so that I can see whether the scrollview works or not.
Next, I added the stackview and just added the top, left, right constraint but not bottom constraint like the following image. However, since there is no bottom constraint, the scrollview does not work.
When I added the bottom constraint, it shows the error like the following image because none of the textfields has height constraints.
If I change the distribution to "Fill Equally". The textfields are taking too much blank spaces depending on the screen size.
How can I use the stackview inside the scrollview. I want to use it as I want some of the views hidden based on conditions and claim the space. Any suggestion would be helpful. Thanks
Your second image is correct - but you need one more constraint.
Add a constraint from the Bottom of the Stack View to the Bottom of View (its superview), but set it to >= 0
A couple of tips...
rename your UI elements... it gets very confusing to refer to elements by default generic names (you have more than one View, for example).
give your objects contrasting background colors during development... makes it much, much easier to see the frames.
I am using AutoLayout in Storyboard. I have set translateAutoResizingMasksToConstraints to false. I have created a constraint like so:
The superView takes up the whole screen's frame. When I run the App, the bottom bar view doesn't appear. However, if in the picture I change constant to 50, it jumps up to about where it should be expected.
I have had a previous branch where I did not set it to 50 but due to some other constraints it appeared as expected. But it's not exact and I don't know why it's behaving this way all of a sudden. I've used the View Debugger feature and the bottom bar view straight up doesn't appear at all.
How can I set it so that the constraint has a constant of 0 and still appears? What might be a reason for this bug? Thanks!
When you are trying to add constraints to two items, you try an easier way by choosing two of them(even super view) like this:
Then click 'add new constraints' on the right bottom of storyboard/xib,
Then you can choose different types of align constraints as you like.
If you only choose one item to add new constraint, then align will be disabled cause it needs two items.
Try printing the bar's frame in view did appear, if you are not sure whether the bar is just outside the visible field. Have you set constraints to the sides and a height as well? As a rule of thumb you can say that a view needs 4 constraints before iOS knows exactly where you meant for the view to be placed.
I'm working on my first swift app and I found out quickly that I need to use constraints to properly layout my page. So far I'm running into two issue.
The first one is that after adding some constraints, my view is pushed off the screen on the storyboard, but it looks fine(outside of my second issue) in the Assistant editor.
My second issue is that on some phone sizes the constraints are causing the text fields to expand when viewed in the Assistant editor and on an iPhone 6s test device.
I've added some screen shots below. Any help with this issue would be really appreciated.
Each time you add a constraint in storyboard, it is not automatically applied to your working view. You may think it should be applied immediately, but try to think think like this. If you have a view, and you apply height constraint (for example) and if Xcode applied it automatically you would get a view of width 0, since you haven't applied width constraint. That's why you need to tell Xcode to update constraints explicitly.
So when you want to update constraints, select view you want to update and go to Resolve Auto Layout issues, and click on Update Frames. This is located in the bottom right corner of your storyboard. It looks like a small triangle between two lines. Here you can update all views or just selected views.
For the second issue, you need to apply fixed width constraint to your stack view, instead of adding leading and trailing constraints. By doing that stack view will have the same width on each device.
I am learning constraints and spent whole day applying them to the following screen.It is not getting displayed properly in landscape mode.Basically i am not getting how to fix vertical space between ,say, label-Welcome to BBBB and textfield-username so that textfield always appears below the label yet the spacing between them is adjusted according to the screens of different size. If i go for Pin\Vertical space, it automatically fixes the constant value.
Remove the label (or just move it out of the way).
Fill the space that you want to resize with a view.
Constrain this view to the objects above and below and to the sides of the parent view.
Put your label into this view and constrain it to the top of this view and centred to it.
You may need to change the constraints on the objects above and below it to stop them from changing height in an unwanted manner.
This new view should now resize as the device changes orientation but the label should remain at the top of it.
Repeat on other areas of your layout (i.e put things that are not moving around as you want them into sub views and constrain these views to resize accordingly). Experiment with using variable heights, fixed heigh constraints and 'equal heights with' constraints on the views that you add to get them to resize as you need.
Edit: but you have a lot of vertically stacked items in that view - you may never get them all to fit into a horizontal orientation. You may need to remove a few, or add a scroll view or force that view only to layout in portrait mode or... Don't forget to check that it works on all devices you are targeting.
#Ali Beadle was right. Since i had a lot of vertically stacked items, lining them up in landscape mode was not possible. So, i went for scrollview.
I have taken a ScrollView first and then a UIView named ContentView on that ScrollView. I have made the width of ContentView equal to the width of parent UIView and kept its height fixed to 568. In my code i set
_contentViewHeight.constant = self.view.frame.size.height;
Now it scrolls in landscape mode while in potrait mode, it does'nt scroll.
I run into Autolayout problems all the time. But I finally figured out a way to overcome a lot of issues that arise from it.
I simply will use a container-View like ScrollView or even a plain old UIView, place all my controls in it. thats it. this makes things a lot easier for autolayout to figure out the constraints. in your case you could just use a UIView.
-start off by removing all the constraints you have I would start by selecting each control in the XIB and see if it has width/height constraint, select it then press the delete key then at the bottom of the project explorer you'll see all the constraints that auto layout has select each one then delete. that should get rid of any complaints that auto-layout might have.
-Place a UIView object inside your main View then
-move all the controls inside it. Then
-add the necessary constraints for the container view so it'll resize in different orientations and don't worry about any constraints inside the container view (auto layout will figure them out automatically).
that does the trick for me usually.
I am using interface builder to create a masterview details application. However
when I run the app the cell gets misaligned.
Here is how it looks both on the simulator and on interace builder:
Any suggestion on how to fix this?
I have noticed that this happens also in the detail view controller that's why I choose the title of "misplaced view":
The problem in the first screen shot seems to be that you are not supplying a tall enough height for the cell. Thus some of the views on one cell are actually appearing on top of the cell below it. You need to fix your table view's rowHeight.
In the second screen shot, it looks like you are using auto layout but you are not doing auto layout (you have no constraints). You need to position these interface elements with constraints.
Check your constraints in interface builder first and make sure that your UITableViewDelegate is returning the correct heightForRowAtIndexPath:, then report back.
In Interface Builder, if you select one of these views that is not sized correct and then select the "size inspector" tab on the panel on the right (option+command+5), if you have no constraints defined, IB will warn you:
The selected views have no constraints. At build time, explicit left, top, width, and height constraints will be generated for the view.
If you don't see that sort of message, your screen snapshots suggest that you likely have constraints defined for the view which are tantamount to the same thing, left/top/width/height constraints.
The problem is that when you transition to a real device with different width, the layout of the view will not be correct.
If, however, you defined your own constraints (for example, notably using trailing constraint instead of width constraint, using bottom constraint rather than height constraint), you'll find the views will be better adjusted for the device's actual dimensions.
In your first example, iOS 8 will automatically adjust the row height of the cell if you had defined constraints. Something like:
V:|-[nameLabel]-[artistLabel]-[categoryLabel]-[priceLabel]-|
V:|-[imageView]-|
H:|-[imageView(100)]-[nameLabel]-|
H:[imageView]-[artistLabel]-|
H:[imageView]-[categoryLabel]-|
H:[imageView]-[priceLabel]-|
I'm showing it to you in VFL, but you can define it in IB, too. The key point is add constraints so that the vertical height is now unambiguous (i.e. the cell height will be adjusted to fit the labels) and the width is not hard coded, but rather the labels will expand/contract to fill it depending upon the device size.
Conceptually the exact same problem occurs in your second example, that you don't have leading and trailing constraints, but rather IB has defaulted to using leading and width constraints, which will not work as you go from device to device. For example, if you just want the text view, but have it adjust for the size of the device's screen, you might have constraints equivalent to the following VFL.
H:|-[textView]-|
V:|-[textView]-|