What I aim:
I want to have a table cell, in which every cell is horizontally divided in two halves. The upper half will contain 4 labels, and the lower half will contain 4 values which correspond to these labels.
Of these 4 items in every horizontal half, each of the last 3 items will occuppy 2/7 of total width, and the remaining 1 item will occupy the remaining of the total width, which is 1/7 of total width.
What I tried:
Putting a horizontal stack view in the content view of table cell.
Which will contain two vertical stack views
Where the upper vertical stack view will contain the labels and the lower vertical stack view will contain the values.
In short, I did this:
But I am getting these conflicts:
I really don't understand why I am getting these conflicts. I feel like I have provided enough constraints for auto layout to do the layout correctly.
Could you please tell me what is wrong here?
I'm on Xcode 8 and using iPhone 7 Plus as view, if that would make any difference.
This is a simpler case, and it isn't working as well:
Conflicts:
As you have provided the detail nobody can get understand and help to resolve your auto-layout issues, I suggest you to clear all constraints and try re-apply all the constraints again , give proper leading and trailing with x and y position the constraints will definitely works good,
Once you will try to apply twice or thrice you ll get know the exact problem and it will be get resolved quickly.
For auto-layout more practice needed to understand it briefly.
Hope it will help to you,
Thanks.
Related
I made some custom tableview cells and while everything else with them works, the images are really big and I cant get them any smaller.
I did this and its still flooding: I added height and width constraints and a 10 constraint to the left of the ImageView, and selected these settings
I can suggest a few things you can try to achieve it. I have illustrated 1 & 2 on the attached image:
Suggestion 1 is to make sure there is no ambiguity or constraint collision. It seems you have set two constraints for the width of your image. You might be setting it to be 'greater than' the width you want it to be.
Suggestion 2 is to also provide a constraint between the image view and your label view for the heading in order to prevent an overlap.
Suggestion 3 is to make sure that your imageView has a setting of "Clips to bounds' checked on the inspector.
Suggestion 4 Change your content mode to Aspect Fill instead of Aspect Fit
Suggestion 5 Complete your constraints, make sure everything is blue. I don't see top and leading constraint. This will help remove any ambiguity.
Suggestion 6 Use the view debugger, see what constraint values are being used, and the debugger will also show you hierarchies and view layers, which will give you more idea of what is going on.
Your imageView seems to have no x and y constraints. I suggest you to give top and leading constraints for the beggining. You should never see red lines to have stable layouts.
I have a stack view holding 2 images.
One image's width to be lower or equal to 140 and 1:1 ratio
Stack view top constraint 20 and trailing constraint 5
When I want to set the stack view leading constraint to 5 (looking at the safe area leading) it enlarges the safe area to a width of 1920 and I have no idea why it does that.
It might have something to do with that the total width of the stack view (including the constraints) is smaller than the width of the safe area so it's ignoring the images width constraint and enlarging it to the default size (1920)? Because, when I change the stack view's distribution to fill proportionally instead of fill equally it does obey to the image's width constraint and the safe view's width stays normal.
If I am thinking correctly, how can I find a workaround for this?
Thanks in advance.
EDIT: I was trying to think logically and I found a solution by changing the image's width to GREATER or equal to instead of SMALLER or equal to. I was following a devslopes guide and in that Xcode version (Beta XCode9) it did work, it just gave a warning it wasn't obeying that constraint anymore (I think it was saying that, I just saw the width being red). So it works now, if anyone has this problem following their guide, just do what I said and it will work.
I am trying to get a layout working where I have 9 squares set 3 x 3 and on all device sizes, they are square.
I have tried endless ideas to make it work but can't seem to get it to stay squares on all devices.
I attached below, a picture showing the results and current constraints on the top left corner square.
Any help would be awesome!
The best approach would be use the stackView. The advantage will be you do not have to deal with the much constraints. So select the first rows three view horizontally then click on the Embed in Stack button whose axis should be horizontal inside your storyboard. Follow the same for second and third rows. Also inside stackview you can mention the spacing you want.
So now you have three stackView for all the three rows. After that select all three stackView then click on the Embed in Stack button and whose axis should be vertical and you can mention the spacing you want.
So advantage of doing that is you do not have to worry about the constraints. Finally you only have to apply the constraint on your main stackView which hold all your child stackView
While I totally agree that UIStackView is a great option, you can also add Aspect Ratio constraints (with a Multiplier of 1) to your squares and ensure that they remain squared (as nothing about your current layout demands that your views should be squares).
If you want your 9 squares to remain in the center of the superview, I recommend adding them to an invisible intermediate view and center that within the superview.
I'm trying to build an app that has just a single portrait oriented view. There is a title on top and results label at the bottom of the view, these are locked to top and bottom and center, no problem here.
Now this is the tricky part. I have 9 rows of labels, most single row but couple span out to 2 rows. I want them to spread out evenly between the title and the result-label.
I lock the first label to top-left, lock the leading edges and then set equal vertical distance constraints between the labels. Otherwise ok but the last labels on 3.5 inch display overrun my results -label.
So I adjust either the fontsize or make vertical distance between labels smaller or both. 3.5 inch problem fixed but now there is a big empty gap between the last label and result. On iPhone 6 its really ugly.
I have tried all sorts of methods but can't just get this working.
So basically: how do I reserve 10 % of view height from top and 20 % from bottom and tell Xcode to use the rest 70 % (and all of it) for my 9 rows of label, evenly?
Thanks for help!
Would have posted an image but no rank for such things...
If I understand you right, you need several flexible spaces that will all be the same size. One space in-between each of the labels.
Create UIViews to put between each label, set them all to have equal widths or heights and anchor each one to the views it is supposed to sit between.
I got this idea from another SO question: Springs in Auto Layout: Distribute views evenly, with constraints, in Xcode 5
UICollectionViewFlowLayout has two properties which state the minimum spacing for rows and columns:
minimumLineSpacing
minimumInteritemSpacing
How can I set a constraint where the spacing is equal? Setting both properties the same dose not do the trick since they are minimums.
Part of the issue here, of course, is that you are assuming that all items are the same size. That makes the idea of "evenness" pretty easy. But the flow layout does not make that assumption; it works the way it does because it is prepared to layout items of varying sizes.
You say "even" but you do not specify the conditions of evenness. How is this evenness to be attained? You have to consider what, exactly, you are after.
If you accept that the flow layout is going to space the items out so as to full justify them on both sides of the screen, then obviously the flow layout will use a larger horizontal spacing value than your minimumInteritemSpacing in order to make that happen. Clearly, in that case, you need a larger minimumLineSpace value if you want it to be more like the horizontal spacing that the flow layout is using. Alternatively, increase the sectionInset on both sides to reduce the horizontal spacing throughout.
If you do not accept that the flow layout is going to space the items out to justify them on both sides, then you can set the horizontal spacing exactly, but then clearly the items will need to be left justified (or centered), not full justified. You can do that by subclassing UICollectionViewFlowLayout.