I'm currently learning about auto layout and trying to setup some table cells to show the same across devices
The layout shows correctly across iPhone devices, but on iPads its stretched.
I believe I've narrowed it down to the trailing constraint, when I remove it it displays correctly on both device types but Xcode throws a missing constraint warning.
The constraints are using less than or equal, which works fine on iPhone but doesn't display correctly on iPad. iPad works if I use more than or equal, but this messes iPhone up
These are the constraints
This is how it should appear on both devices.
But this is how it appears on iPads
The reason you are getting a wide text field on iPad is because you're constraining the "Partial Bag" text field to the trailing edge of the cell.
Without looking at your actual Storyboard, not sure why you're getting constraint conflicts.
This is how I set up your cell, and have no issues (other than the known bug with text vertical alignment in IB when laying out rounded-border text fields):
Note that I gave Full Bag a Width of 32, and constrained the width of Partial Bag to be equal to Full Bag. No constraints to the Trailing edge of the cell's content view.
The result, in Portrait and Landscape orientations (which will, of course, layout similarly on an iPad):
You should set up a width constraint on both UITextFields. That way, the first (and second) one won't stretch. Another option would be to make the trailing constraint of the second UITextField be equal or greater.
Related
enter image description here
I have set the constraints from the safe area for every labels and textfields but the problem is still occurring. The app perfectly sets only on iphone 11 and iphone 12 simulators only.
(Have shared the screenshot)
I have set the constraints from the safe area for every labels and textfields
No, you don't. If you did, you would not have this problem. You have not correctly set the trailing constraints for these views. In fact, it looks like none of your views has correct constraints.
Every view must be completely configured through constraints as to its position and its size. It must, in other words, be bounded top, left, bottom, and right. Labels and text fields and buttons have an automatic height so you don't need to fix their bottoms, but all of your views need top, left, and right constraints.
I have an app which I've designed in the width:any height:any universal size template in XCode (Swift). Basically, I have a custom cell, with its own uitableviewcell class too, and two labels inside of it which display array data. Anyway, I am struggling to add the correct restraints etc, so that the labels and text inside them display properly on all iOS devices. Even though I have changed the font to be able to go to 0.2 scale, there's still sometimes overlap or text clipped in the label on smaller iOS screens. It's probably a simple thing to resolve. So can anyone help me make this layout look the same, or the equivalent, on all iOS devices and all orientations too please? Here is my design:
The fact that your labels are overlapping each other is probably that you don't have the proper width constraints.
This is what I will do, taking the left label as an example:
add constraints to the left, top, bottom margin
add a width constraint to the parent view and making it 50% of the parent width
You will need to do the similar for the right label replacing the left margin constraint with a right margin one.
Now both the labels only take 50% of the width, then they will not overlap any more guaranteed.
I have a series of views each containing a scrollview wrapping various subviews i.e. Collection views, Labels, imagview. I am using auto layout for the first time and some views render fine on some devices but not on others, I have attached previews of views on iPhone 4s, 5, and 6.
In particular I am not sure how the alignment of the History views appears off centre in iPhone 5 and 4 but fine in 6, and the collection view in iPhone 6 appears cut sort on the right side but not for iPhone 5,4, and lastly how the blue image with label 'Image Title' on top of the zoomable image on iPhone 4s appears to be cut short. I would of thought a error in autolayout would of been consistent across devices ?
Any input appreciated.
It looks like you're setting absolute widths on some elements. Instead you should be setting distance to the parent UIView's edges. I.e. trailing/leading space to container.
Try to give consistent constraints. Looks like you are just doing leading and top space to superview and maybe you are adding width and height constraints to avoid misplaced views. Try to think like you are doing autoresizing masks before autolayouts. Either try to keep ratio or expand with the container with trailing and bottom space constraints.
For some reason when I add constraints, by clicking "Add Missing Constraints," it actually looks worse than without constraints in the iPhone 4S simulator.
Here is how it looks in Xcode:
Here is how it looks in the simulator:
Notice that even with the auto constraints, the top text is hidden in the simulator. I want it to look exactly like it looks in Xcode, but I cannot figure it out. I have played around with the constraints for hours now to no avail. It looks better and better with the bigger screen size I use in the simulator, but I need it to have a universal look across all devices. What am I doing wrong?
First remove all constraint for the view.
1) Apply pin Width and Height constraint for your all three controls.
2) Apply Top space from Top Layout Guid for all three controls.
3) Apply Align Centre Horizontally in Superview of your all your three controls.
After applying above constraints your controls will appear in centre in any device.
I believe the three controls should be centre aligned with the top view and the vertical space between the three controls is constant.
The controls will automatically adjust their width according to the text given. So all you have to do is to only add the constraints for their positions. So each control will need two constraints, only for Y position, another for X position.
And of course, you can change the multiplier of the constrains to support the Landscape orientation.
I am working on an iOS application and it will be compatible for all devices iPhone 3.5, 4, 4.7, 5.5 inches and iPad also.
I am designing a screen it has 5 subviews, as i view this screen in different screen it does not resize properly.
I am using Auto-layout to manage that screen and I have set the every possible constraint to manage this screen.I have to manage the Subviews height and width as the devices changes.
Following are the steps taken care by me
1)Set the Equal Height Constraint for all subviews
2)Equal Width Constraint for TopView1 and TopView2 set the High priority and set the proper Horizontal spacing, Leading, trailing edges for these two top spaces accordingly.
3)Equal Width Constraint for MiddleView1 , MiddleView2 and MiddleView3 and set the High priority and set the proper Horizontal spacing for these two and vertical spaces from TOpViews accordingly.
4)Set the Width Constraint for bottomView and set the High priority and set the proper Horizontal spacing for these two and vertical spaces from MiddleViews and bottom spaces accordingly.
Prior to this i have not used auto-layout in such complicated way.
Following are the screen shotes depict my problem.
EDIT:
#Ash Furrow please see attached a screen shotes with constraints.
I am laying out the base screen on Any Width Any Height
Please anybody suggest me how should i manage this view
Hmm. Looking at what you've done and the feedback to your question, everything seems correct.
I think I see the problem. The issue doesn't appear to be with your storyboard (here in case anyone is interested), but rather the use of Xcode. Instead of changing the view controller's simulated "Size" metric, use the Assistant Editor to view a preview of whatever device you want. I've tried that, and ran the code, and in both cases they appear to work.
So to recap, use the Preview in the Assistant Editor instead of changing the view controller's properties to resize a view hierarchy.