I'm drawing a bingo card (UIView) with 27 squares: 9 columns x 3 lines. Cards can have 3 different sizes, so they must be resizable. And inside the card, every square with a number is an UIView with a custom class. Inside the view (in the .xib file) there is the UILabel, where the number is set with:
[lblNumber setText: [NSString stringWithFormat:((number < 10) ? #" %i" : #"%i"), number]];
When numbers have two digits (10->90) everything looks great inside the squares, but for numbers from 1 to 9, label displays with a bigger font size than the others because it only has 1 digit.
Ok, I tried to uncheck the "Adjust to fit" setting, but then font size remains small.
Autosizing settings of the label are set to both arrows, so the label has "space" to resize.
¿How can I have single digit numbers to resize the exact proportion than numbers with two digits?
As you can see in the line of code, I also tried to concatenate a space for numbers with one digit.
Thanks in advance.
Related
I love the San Francisco font. And would like to use it if possible. I have a table view that shows a series of labels where each label is 6 hexadecimal digits, e.g.
F0:1A:2B
12:CE:88
The problem is that they don't line up nicely. I can enable the monospaced digits attribute for the font, but that doesn't account for the characters ABCDEF. I've tried the single monospace font (Menlo) and it looks terrible and out of place.
I'm toying with making 8 little labels one for each character (6 hex digits plus the two : separators), which seems like a huge kludge. Is there no other way. I wondered if there was a way to do something with AttributedString to get the hex digits to be same width?
If you want to use a proportionally spaced font, you'll have to draw the characters at the appropriate places. Otherwise, find a monospaced font you like.
For completeness sake, I should post what I ended up doing after accepting what #AaronBratcher confirmed.
First I created 5 separate UILabels for the following elements:
leftTwoDigits-leftSeparator-centerTwoDigits-rightSeparator-rightTwoDigits
I used constrains to constrain all of their baselines, and have 0 horizontal spacing betwixt each. The separator labels were set simply to : and normal color. The xxxTwoDigits labels were given the string AA. A is NOT the widest character, C is. But A is near it. C is too wide, and A is wide enough. The color of these labels was set to clear so it doesn't actually show up.
Then 6 more UILabels are added. Again the the same baselines. The first two are constrained to the leading and trailing sides of leftTwoDigits and constrained to match in width. Repeat for the other 4 cells. Make all centered. And populate them individually with the individual digits.
I have a UILabel (as highlighted in yellow), which has the following conditions applied to it.
Label has variable text length
Font set to 40
Minimum font-size set to 20
Number of lines set to 3
Although this looks like a duplicated question I believe it is not. The issue I am having is that when the text exceeds the available 3 line length after being sized-down to 20 points, the UILabel's bounding box is sized incorrectly (i.e. note the extraneous spacing above and below the text).
The end result should be a UILabel without any spacing. Is there are solution to this, while keeping the number of lines set to 3?
That looks like a bug. If you increase your base font size, you will see the space increase. Also, if you inspect the layout at runtime, you will see the content size to be calculated as too big.
My guess is, UILabel takes your original font size (40) to calculate the content size for 3 lines of text and does not take into account that the font size has already been decreased before truncation.
I fiddled with content hugging/compression priorities but could not make it work either.
The only workaround I found was to manually set the font size down to 20. That will get you the frame you want.
I have a custom UITableViewCell design as
What I want to is that "points" label should come under the last digit in my Numbers label. Lets say I have 1990 value in my Numbers label the "points" labels should come uder the last digit "0" in this case.
How can I do this?
You can add a Horizontal Space between the points label and the number label with a negative value roughly equates the width of 1 character
For instance here:
Here in this example the horizontal space is -30 while the font size of the number label is 61pt. You can see that it is roughly one character width. (Of course you can apply more complicated math if you please to get the exact value you desire or accommodates your design principle)
And with making sure that the number label does not have an explicit width constrain it will automatically expand to fit its contents and therefore pushing the points label appropriately.
like this:
I have a UILabel with multi lines. I'm trying to get the text to auto size, and fit on the line it's in. So instead of:
longe
st
The text size should become smaller so that it can fit on the same line:
longest
Note: I only need it for the first line.
I tried the following:
label.adjustsFontSizeToFitWidth = YES;
label.minimumScaleFactor=3.0;
That didn't work, so I tried label.minimumScaleFactor=3.0 / 9; (9 is the font size.) That also didn't work.
I have a UILabel with multi lines
Well, that's the problem. The automatic size adjustment feature of UILabel works only for 1-line UILabels (i.e. numberOfLines must be 1).
You might be happier with two labels, one being a single-line UILabel for the first line which can shrink its size, the other for the remaining lines.
I have the following cell design where the numeric label shrinks and the "Overall" label is directly underneath.
I have properly set the adjustFontSizeToFitWidth and minimumFontSize properties. The font is resizing correctly. However, anchoring the numeric label to the bottom is challenging. Particularly when the font shrinks the gap between the two labels widens and does not appear vertically centered.
I have tried sizeToFit, sizeThatFits, and using the font's pointSize. All unsuccessfully.
I am aware of sizeWithFont:minFontSize:actualFontSize:forWidth:lineBreakMode:, but don't understand why I would need it in combination with adjustFontSizeToFitWidth.
Ah, so you want to position the UILabels in the middle of the container view (both horizontally and vertically)?
I have rephrased my answer so it will make more sense to future readers.
My code is assuming that you have the 3 IBOutlets set up:
UIView *containerView; //Your nice view containing the two textfields.
UILabel *points; //The label containing the number.
UILabel *overall; //The textfield containing the text 'overall'.
You could simply set the frame of the labels after assigning the text and calling the sizeToFit.
This first line positions the UILabel points, the only change being that the y coordinate is half of containerView subtract half of the height of itself.
points.frame = CGRectMake(points.frame.origin.x, (containerView.frame.size.height / 2) - (points.frame.size.height / 2), points.frame.size.width, points.frame.size.height);
To position the overall accordingly - say there is a distance of say 6 between the number and overall labels:
int space = 6;
overall.frame = CGRectMake(overall.frame.origin.x, points.frame.origin.y + points.frame.size.height + space, overall.frame.size.width, overall.frame.size.height);
Having read your comments, I think you are after this solution. If you want both UILabels to appear in the middle; subtract (overall.frame.size.height / 2) + (space / 2) from the y value of points like so (with the code of number 2 beneath it):
int space = 6;
points.frame = CGRectMake(points.frame.origin.x, ((containerView.frame.size.height / 2) - (points.frame.size.height / 2)) - ((overall.frame.size.height / 2) + (space / 2)), points.frame.size.width, points.frame.size.height);
overall.frame = CGRectMake(overall.frame.origin.x, points.frame.origin.y + points.frame.size.height + space, overall.frame.size.width, overall.frame.size.height);
The final point will produce an output like this image. As you can see the blue line is half of the whole image, and intersects the black rectangle (which is snuggly around the two labels) at its middle point. I hope this is what you were after.
Instead of using two labels, use CATextLayer instead. You will be easily able to make one part BOLD and the other normal. plus position and adjusting size for One layer will be easy relative to placing two labels. shadow setting, line break mode, fonts you will be able to adjust everything beautifully :)