I have a problem to implement the text vertical alignment inside a table cell.
What I want to do is based on the length of the text I want to display a message top aligned in side one UILabel inside a cell.
For example if the message is only one line
The text should align top:
And if there are two rows then it should look like this:
At the beginning what I can see is like this
So I have searched the web and what I found is to
use the
[label1 sizeToFit];
But the problem with that is within the table view cell it is not always necessarily called especially when I switched to and from another tab view.
Then I tried to generate the label on the fly by code, but the problem is that let alone the complicated process of setting up the font format I want. I have to manage whether the label has been inserted or not then reuse it every time cellForRowAtIndexpath is called.
And more weirdly, once I select the row. The alignment is switched from the one you see in the first picture to the third one. It also happens when I switched to a different tab view and switch back to the view.
I was wondering if anybody has encountered such issue and have a solution to the problem.
Thank you for your reply in advance.
Edit:
#βḧäṙℊặṿῗ, what you said I have tried. It successfully align the label text if there is only one line. My situation is that, since I have multiple tab views. Once I switch back and forth between tabs view. The alignment just restored to centre-vertical alignment again. It also happens when I selected the row. Any idea?
Try this
// label will use the number of lines as per content
[myLabel setNumberOfLines:0]; // VERY IMP
[myLabel sizeToFit];
EDIT:
As you have one extra condition that maximumly display two lines then you need to set setNumberOfLines: to 2
[myLabel setNumberOfLines:2];
Create UILabel+Extras and add following methods to this class.
- (void)alignTop{
CGSize fontSize = [self.text sizeWithAttributes:#{NSFontAttributeName:self.font}];
double finalHeight = fontSize.height * self.numberOfLines;
double finalWidth = self.frame.size.width; //expected width of label
CGRect rect = [self.text boundingRectWithSize:CGSizeMake(finalWidth, finalHeight) options:NSStringDrawingTruncatesLastVisibleLine attributes:#{NSFontAttributeName:self.font} context:nil];
CGSize theStringSize = rect.size;
int newLinesToPad = (finalHeight - theStringSize.height) / fontSize.height;
for(int i=0; i< newLinesToPad; i++)
self.text = [self.text stringByAppendingString:#" \n"];
}
Call this method like this..
[YOUR_LABEL alignTop];
Either You set no of Lines to be 0 like
[yourLabelObject setNumberOfLines:0];
[yourLabelObject sizeToFit];
Or
You can find the height of label at run time depending upon textString length.
Following method will return you the size(height & width) of label for length of text string.
here width is fixed and only height will change :
- (CGSize) calculateLabelHeightWith:(CGFloat)width text:(NSString*)textString andFont:(UIFont *)txtFont
{
CGSize maximumSize = CGSizeMake(width, 9999);
CGSize size = [textString sizeWithFont:txtFont
constrainedToSize:maximumSize
lineBreakMode:UILineBreakModeWordWrap];
return size;
}
Yo need to calculate frame of label each time when u r doing to set text and set frame of label
I hope this will helps you.
Might sound a bit silly but this is my approach: For any field that needs to be top aligned I fill the text up with multiple "\n"s. This causes the text to be automatically top aligned. Pretty much the same as Mehul's method above.
http://i.stack.imgur.com/8u5q4.png
Related
I have a scenario , where I want to calculate , How many characters can be placed within Non scrollable UITextView.
I have tried the following ,
Get the height of the Text that needs to be placed within UITextView
by the following code ,
CGRect rect = [labelStr boundingRectWithSize:CGSizeMake(label.frame.size.width, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:attributes
context:nil];
labelHeight = rect.size.height;
and also computed the height of my UITextView.
But still with these two height values , I cant figure out the way to find out the character count within my UITextView.
Any Ideas will be greatly appreciated....
Thanks in advance.
Though not very glamorous, you could just type characters to fill the UITextView in the simulator and add a button that would count them for you, a simple method like this perhaps:
- (NSUInteger)numberOfCharactersInString:(NSString *)textToCheck // uitextview.text
{
NSUInteger *numOfChars = [textToCheck length];
return numOfChars;
}
Then you'll know how many characters can fill the UITextView. But, this wouldn't be a very useful method if you're using preferred fonts that change when the user changes the Text Size in Settings.
I have a textView and I added an image to this textView. When i write text and go to next line I want to shift this image down by size of one line.. Similar like in twitter app when you create a tweet with picture. In this code I can shift picture by line, but my problem is it shifts to late (only on second symbol of next line).. I tried to use different values in CGSizeMake but line was shifted too early or too late.. Any recommendations?
- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range
replacementText:(NSString *)text
{
CGSize constrainedSize = CGSizeMake(self.textView.contentSize.width, self.textView.contentSize.height);
UIFont *fontText = [UIFont systemFontOfSize:17];
CGRect textRect = [textView.text boundingRectWithSize:constrainedSize
options:NSStringDrawingUsesLineFragmentOrigin
attributes:#{NSFontAttributeName:fontText}
context:nil];
size = textRect.size;
CGFloat height = ceilf(size.height);
CGFloat width = ceilf(size.width);
CGRect frame = CGRectMake(0.0f, height+50, 100.0f, 100);
_imageView.frame=frame;
return YES;
}
You are hardcoding your font size. Maybe the text field has a different font. Use textField.font instead.
Also, you should simplify your code and eliminate the unused variables, such as width.
Finally, you should set a breakpoint where you calculate the size and keep checking if it is correct. Based on that it should be easy to debug.
Also, please note that textField.text does not yet contain the text that is going to be added. Before checking the size, you would have to first construct the new resulting string yourself.
NSString *newText = [textField.text
stringByReplacingCharactersInRange:range withString:text];
I think you should add your Image as subview to superview of your textView.
In shouldChangeTextInRange: fit frame of textView to content of textView.
Then just use KVO for catch moments, when frame of textView was changed. So, now you can keep top border of image on bottom border of textview, even animated!
I wont write code instead you, but it sound very easily and interesting, right?
I'm creating a questionnaire app. In the view controller, I have a question displayed as a label and then I have three answers below displayed as labels too. The problem is that if the question has multiple lines, it's being displayed in one line anyway, and if I stretch out the label, it overlaps with the answers.
What is the right way to display the question so that the answers appear just under the question, no matter how long the question is?
Try setting the property numberOfLines to 0 for your question label, it will allow an unlimited number of lines to be displayed. Then calculate the text size using iOS 7 method boundingRectWithSize:options:context::
CGRect questionFrame = self.questionLabel.frame
CGFloat maxWidth = questionFrame.size.width;
NSString *questionText = [NSString stringWithString:#"lorem ipsum"]; // your text
UIFont *font = self.questionLabel.font; // your label font
// Temporary attributed string
NSAttributedString *attributedText = [[NSAttributedString alloc] initWithString:questionText attributes:#{ NSFontAttributeName: font }];
CGRect rect = [attributedText boundingRectWithSize:(CGSize){ maxWidth, CGFLOAT_MAX }
options:NSStringDrawingUsesLineFragmentOrigin
context:nil];
// Assign the new height
questionFrame.size.height = rect.size.height;
self.questionLabel.frame = questionFrame;
Then move your answers label one by one under the question label:
CGRect answerFrame = self.answerLabel1.frame;
answerFrame.origin.y = questionFrame.origin.y + questionFrame.size.height;
self.answerLabel1.frame = answerFrame;
answerFrame.origin.y = answerFrame.origin.y + answerFrame.size.height;
self.answerLabel2.frame = answerFrame;
answerFrame.origin.y = answerFrame.origin.y + answerFrame.size.height;
self.answerLabel3.frame = answerFrame;
If you want to use UILabel you must first of all set its "numberOfLines" property to 0. The value "0" means "no limit", so the text will be broken in the right number of lines. Then you have the problem of determining the right size of the label, as the height changes depending on the length of the question. In such case you can use the function - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options context:(NSStringDrawingContext *)context (available with iOS7 and that replaces the - (CGSize)sizeWithFont:(UIFont *)font constrainedToSize:(CGSize)size lineBreakMode:(NSLineBreakMode)lineBreakMode available before iOS7).
Once you determine the height of the label you change its frame accordingly. Obviously you must change the origin of the answers labels to avoid that they conflict with the question label.
Note that if both questions and answers are too long, you may end up with an overall labels height taller than the screen height. In such case you should put all these labels inside a scrollview or as cells of a table view, to allow scrolling.
I have an addition to NSString which automatically resizes a UILabel depending on the text that's being read into it (I have a simple app showing quotations, so some are a few words, some a couple sentences). Below that quote label, I also have an author label, which (oddly enough) has the author of the quote in it.
I'm trying to position that author label directly beneath the quote label (as in, its y coordinate would be the quote label's y coordinate plus the quote label's height. What I'm seeing is some space being placed between the two labels, that depending on the length of the quote, changes size. Smaller quotes have more space, while longer quotes have less space. Here's a quick diagram of what I'm seeing:
Note the gap between the red and blue boxes (which I've set up using layer.borderColor/borderWidth so I can see them in the app), is larger the shorter the quote is.
If anyone can sift through the code below and help point me towards exactly what's causing the discrepancy, I'd be really grateful. From what I can see, the author label should always be 35 pixels beneath the quote label's y + height value.
Just to confirm: everything is hooked up correctly in Interface Builder, etc. The content of the quote's getting in there fine, everything else works, so it's hooked up, that isn't the issue.
To clarify, my question is: Why is the gap between the labels changing dependant on the quote's length, and how can I get a stable, settable gap of 35 pixels correctly?
Here's the code I'm using to position the labels:
// Fill and format Quote Details
_quoteLabel.text = [NSString stringWithFormat:#"\"%#\"", _selectedQuote.quote];
_authorLabel.text = _selectedQuote.author;
[_quoteLabel setFont: [UIFont fontWithName: kScriptFont size: 28.0f]];
[_authorLabel setFont: [UIFont fontWithName: kScriptFontAuthor size: 30.0f]];
// Automatically resize the label, then center it again.
[_quoteLabel sizeToFitMultipleLines];
[_quoteLabel setFrame: CGRectMake(11, 11, 298, _quoteLabel.frame.size.height)];
// Position the author label below the quote label, however high it is.
[_authorLabel setFrame: CGRectMake(11, 11 + _quoteLabel.frame.size.height + 35, _authorLabel.frame.size.width, _authorLabel.frame.size.height)];
Here's my custom method for sizeToFitMultipleLines:
- (void) sizeToFitMultipleLines
{
if (self.adjustsFontSizeToFitWidth) {
CGFloat adjustedFontSize = [self.text fontSizeWithFont: self.font constrainedToSize: self.frame.size minimumFontSize: self.minimumScaleFactor];
self.font = [self.font fontWithSize: adjustedFontSize];
}
[self sizeToFit];
}
And here's my fontSizeWithFont:constrainedToSize:minimumFontSize: method:
- (CGFloat) fontSizeWithFont: (UIFont *) font constrainedToSize: (CGSize) size minimumFontSize: (CGFloat) minimumFontSize
{
CGFloat fontSize = [font pointSize];
CGFloat height = [self sizeWithFont: font constrainedToSize: CGSizeMake(size.width, FLT_MAX) lineBreakMode: NSLineBreakByWordWrapping].height;
UIFont *newFont = font;
// Reduce font size while too large, break if no height (empty string)
while (height > size.height && height != 0 && fontSize > minimumFontSize) {
fontSize--;
newFont = [UIFont fontWithName: font.fontName size: fontSize];
height = [self sizeWithFont: newFont constrainedToSize: CGSizeMake(size.width, FLT_MAX) lineBreakMode: NSLineBreakByWordWrapping].height;
};
// Loop through words in string and resize to fit
for (NSString *word in [self componentsSeparatedByCharactersInSet: [NSCharacterSet whitespaceAndNewlineCharacterSet]]) {
CGFloat width = [word sizeWithFont: newFont].width;
while (width > size.width && width != 0 && fontSize > minimumFontSize) {
fontSize--;
newFont = [UIFont fontWithName: font.fontName size: fontSize];
width = [word sizeWithFont: newFont].width;
}
}
return fontSize;
}
After you called size to fit on both labels, calculate the distance between their frames and change them accordingly:
[quoteLabel sizeToFit];
[authorLabel sizeToFit];
float distance = authorLabel.frame.origin.y - quoteLabel.frame.size.height;
float difference = distance - 35;
authorLabel.frame = CGRectMake(authorLabel.frame.origin.x,(authorLabel.frame.origin.y - difference),authorLabel.frame.size.width,authorLabel.frame.size.height);
The reason the gap changes is that the quote label frame changes its height dependent on its content when you call sizeToFit.
UPDATE
Given the recent developments in the comments, I think you have 3 possibilities:
resize the whitespace instead of only the words, so that the string
actually fits in the frame correctly
somehow access the CTFramesetter of UILabel to see what the actual
frame, when all is said and done, amounts to
make your own UIView subclass that handles Core Text drawing in its
draw rect method (should be easy in your case), since after all you
are trying to give to UILabel a behavior that it's not meant for
It probably is moving where you want it, but then an auto-layout constraint or a spring/strut is moving it afterwards.
EDIT:
My first thought (which I ruled out because you said that the box around the words was the label frame. In later comments, you say that this is not an actual screen shot, but just a representation of it, so it could still be correct) was that you are doing this wrong:
[_quoteLabel sizeToFitMultipleLines];
[_quoteLabel setFrame: CGRectMake(11, 11, 298, _quoteLabel.frame.size.height)];
In the first line, you are sizing the text to fit in whatever the current width of the label might be, and then you turn around in the second line and change the width of the label. So most likely, what is happening is that you are sizing the label for some smaller width, which makes it tall. You then make the label wider than it was before and the text expands to fit the wider label, leaving a blank area beneath the actual text, although the frame has not changed. This makes the space betwee the labels exactly 35 as you want, however the top label's text does not go all of the way to the bottom of its frame so the white space is more than you want. Basically, you have this:
*************
* text text *
* text text *
* *
* *
* *
*************
*************
* text text *
*************
If this is the case, then you would fix it by setting the width first, like this:
// You could put anything for the 200 height since you will be changing it in the next line anyway.
[_quoteLabel setFrame: CGRectMake(11, 11, 298, 200];
[_quoteLabel sizeToFitMultipleLines];
I ended up solving the problem by using a single UILabel, and CoreText with an NSAttributedString. Kind of a cop-out, but it works.
I just ran into to strange problem, I have a custom tableview cell with a dynamic height.
While testing this all seemed to work fine, but now that I'm loading real content into it there seem to be some problems.
It appears that some text doesn't trigger a new line in a UILabel
Correct: http://dl.dropbox.com/u/274185/Screen%20Shot%202012-05-09%20at%201.15.21%20PM.png
Wrong: http://dl.dropbox.com/u/274185/Screen%20Shot%202012-05-09%20at%201.15.30%20PM.png
As you can see in the wrong example, the text is pushed to the second line, but the height of the label still only counts one line.
item.project = #"Another Test Project With Longer Title (Admin / Project Management)";
item.project = #"Test Project (Admin / Project Management)";
The way I calculate the height is like this:
// when creating the cell
cell.projectLabel.lineBreakMode = UILineBreakModeWordWrap;
cell.projectLabel.numberOfLines = 0;
[cell.projectLabel sizeToFit];
// in heightForRowAtIndexPath()
CGSize projectHeight = [item.project sizeWithFont:[UIFont boldSystemFontOfSize:13.0f] constrainedToSize:CGSizeMake(320.0f, CGFLOAT_MAX) lineBreakMode: UILineBreakModeWordWrap];
I tried changing the lineBreakMode, but this doesn't seem to help much
EDIT:
It appeared to be a problem when calculation the height of the text, I used a fixed 320 points, which isn't correct, after using the actual width the height was calculated correctly.
CGSize projectHeight = [item.project sizeWithFont:[UIFont boldSystemFontOfSize:13.0f] constrainedToSize:CGSizeMake(cell.projectLabel.bounds.size.width, CGFLOAT_MAX) lineBreakMode: UILineBreakModeWordWrap];
I believe that sizeToFit only sizes the view down.
You should set the frame of your label to be high enough for two lines and then call sizeToFit. That will shrink the label when the text is only one line but keep its height when the text is two lines.