I have multiple UILabels horizontally aligned next to each other. Since they have different lengths of text, when using auto layout (bind left anchor to the right anchor of the previous label etc.) it isn't sure which label to make larger and which one to make smaller so the widths are different and the font sizes are different as well.
To be clear: it's not important if the width of the labels is different, it's just that they should all have the same font size while still displaying everything in 2 lines.
Related
I have five ui labels for one view. All of them have variable text content. To prevent truncating I have to use Autoshrink text size.
My ui labels are aligned in x axis top to bottom.
The problem is; when autoshrinking, all ui labels have different font sizes.
Is there a way to equalize font sizes of all ui labels when autoshrink.
I use interface builder autolayout constraints.
Thank you.
You could loop through your labels, find the smallest text size and then set that text size to all of them. That way, you know they'll all fit and have the same text size. You would have to do this programmatically. Alternatively, you could dynamically change the size of your UILabels based on the number of characters it holds times some constant factor. That way, the autoshrink should set the same size for each the text in each of the labels.
The image shows a 3x3 grid which is a vertical stackview, which contains 3 horizontal stackviews, which contain 3 buttons each. The top horizontal stackview has a correctly sized set of numbers within it(just by setting the font size to 80). The other two do not.
I want the numbers to take up the same amount of space on all devices so every number on each button is the same relative size on every device. This must be done programmatically! Not in IB... I cant find much info on this topic so even a link would be helpful please.
I am trying to create this layout, but I am struggeling so badly that I have no words left for it. I have tried for three days but yet I can't create the layout.
I am trying to have the three imageviews in the middle scale if the height of the view changes, but they are not behaving correct. I have successfully manage to get the ratios correct though, but the images either goes behind the blue button, or the blue button suddenly looses its height or the text disappears.
Isn't it possible to have three image views in the middle that take whatever height is left after the title and text + blue button have been laid out and then properly show them with correct ratios?
You can try multiple approaches here:
Size Classes:
Lay out the views for each possible size (probably the easiest but the least flexible
Use Constraints with different priorities:
You can set a max-height for the image views by adding a constraint for the height and then setting its relationship to equal or less than. This allows the image to scale up until a maximum size is reached.
Then add a second constraint between the bottom box and the images. Set the priority of this constraint to 750. This makes the image grow in height, when the bottom view moves down.
Then add another constraint which sets the aspect ratio of the image. If you use the mode of the view to Aspect Fit, the image will now always be scaled up to fit the image view.
To make all images scale proportionally, add constraints for equal width and equal height between them, then set the factor to match the proportions between these images.
The last step is now to vertically align the images properly as you showed in the pictures. To do that, add constraints between the images, which align them by their vertical centers, bottoms, baselines or tops.
In my app for iOS 8, I have a UISegmentedControl that stretches to fit the width of the device's screen. So on an iPad it's more pixels wide than it is on an iPhone 6+, which is more pixels wide than the iPhone 6, etc.
Centered just beneath each segment of the UISegmentedControl, I have a UILabel. So there are 5 segments and 5 UILabels. Each UILabel has a fixed width (fixed by constraint). However if the display size increases they become uncentered.
How in Interface Builder can I specify a constraint that will force each UILabel to become centered beneath each segment? I would be happy if I could just get the elements to remain proportionally spaced with each other as the display size scales, but I can't figure out how to do that, either.
All I can seemingly do is to center the middle UILabel directly under the middle segment by specifying a Center X Alignment between that and the UISegmentedControl.
I specified a Horizontal Space constraint between all the UILabels, and between the outer UILabels and the edges of the view, and set all these to "greater than or equals". They all have the same priority, but strangely, they don't all scale proportionally to each other.
The resulting problem is that the amount of Horizontal Space between each of the UILabels does not scale smoothly as the width of the device's screen increases. If I align everything to be in the proper positions on the iPhone 5S width of screen, then on the iPad their alignment is all wonky, and only the middle one lines up with its segment. The rest of them are all off center.
It appears that there is no way to specify a percentage of the over-all display width as a constraint -- you can only specify things in terms of pixels. Really?!?!
Clearly I could make the width of the objects to be flexible, but because they are text labels with right-aligned text, that screws everything up.
Surely I'm missing something here... since the point of Auto Layout is to make your interface scale according to the screen size, surely there is a way to specify a constraint as a percentage of any given view or subview... surely!!! But how? I've read the documentation and I cannot, for the life of me, figure it out.
BTW I did see that in the past, people have used crude hacks like spacer views or multiple sets of constraints, but surely those are outdated answers, and I'm just overlooking something extraordinarily obvious... right?
You can do this by making the centerX constraint of your labels equal to the superview.trailing times 0.1, 0.3, 0.5, 0.7, and 0.9 with constants of 0. To make these constraints, add your 5 labels to the view. Give the left most one a vertical spacing constraint to the segmented control. Select all 5 labels and give give them a "vertical centers" alignment constraint. Now control-drag from each label to the right side of the screen, and select the "Trailing space to container margin" constraint. Edit each one of these trailing constraints to look like this (except for the multiplier that needs to be given the values I mentioned above):
You'll have to reverse the first and second item (which you do from the pull down on the first item), change the Label.trailing to Label.Center X, and uncheck the "relative to margin" box, then correct the constant and multiplier values.
This approach will only work if the segmented control stretches all the way across the screen with no padding to the edges. If you want padding to the edges, then you need to use a completely different approach. You would need to create 5 UIViews below your segmented control -- align the left edge of the left-most one to the left edge of the segmented control. Align the right edge of the right-most one to the right edge of the segmented control. Give the 5 views equal width, and 0 length horizontal spacing constraint from each to its neighbor. This will give you 5 views that mimic the segmented control in width, with each view being the same width as one of the segments (assuming all the segments are the same width -- if that's not the case, you're screwed). Then you only need to add your labels as subviews of these 5 views, and give them centerX and centerY constraints.
I have multiple labels in the storyboard using the any X any Resolution as follows:
Now I have added constraints to the best of my knowledge to force the labels to reposition when an iphone simulator is used and the following happens.
What I would like to happen is have the labels remain the same distance apart from each other proportionally and just resize their font size. So If we were to divide the Iphone screen into thirds Days would occupy the first 3rd, months the 2nd, and Years the 3rd. I thought maybe using aspect ratio for constraints would work but I got the same effect of the labels bunching on top of each other. It looks like they maintain the constraint of distance from the edges but they wont resize themselves to keep the ratio.
Thanks
If you want to keep same distance between each of them, one way of achieving it is:
Give all of them equal widths constraint. and set leading and trailing constraint to zero. Align all labels to centre horizontally.
This way, you wont need to change the font size..
But, however, if you still want to change font, go to attributed inspector for label and under auto shrink: change fixed font size to minimum font size and set it to appropriate value, say 14.