I'm attempting to create a custom UITableViewCell with its own XIB, of which contains two important, editable components:
UILabel
UIImage with 'end-cap insets' - this image sits behind the label, and resizes with it
When I create my UITableViewCell I can set its label's text easily, but in the same method I also try to change the UIImage's frame to match that of the UILabel's. However, this is not happening until I 'reload' the cell by scrolling the table view to dequeue it and bring it back into view.
I create the custom table view cell in my view controller's .m:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *UITableViewCellIdentifier = #"msgCell";
RMMessageCell *cell = [tableView dequeueReusableCellWithIdentifier:UITableViewCellIdentifier];
if (cell == nil) {
NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:#"MessageCell" owner:self options:nil];
cell = [topLevelObjects objectAtIndex:0];
[cell customInit]; //This sets up the ImageView's image etc
}
[cell setMessageValue:[_messages objectAtIndex:indexPath.row]]; //SEE BELOW
return cell;
}
...And in my custom cell's .m, I deal with setting the text label and resizing the image with this method:
- (void)setMessageValue:(NSString *)message {
_testLabel.text = message;
// Assume the text label's frame has already been set to the message's length
// (will add this in once I figure out how to change the imageView's
// frame correctly)
// Set the image view's frame to the label's
// THIS DOES NOT TAKE EFFECT UNTIL THE TABLE VIEW IS RE-SCROLLED
CGRect frame = _imageView.frame;
frame.size.width = _testLabel.frame.size.width + 8;
_imageView.frame = frame;
}
This is caused because a table view cell is created at one size, and then it is resized when it is displayed after being added to the table. If you log the bounds or frame of your cell, you will see that it is one size (smaller) when you load it from the nib, and another size (bigger) when you "refresh" the cell by scrolling it off of the screen and back on.
The simplest approach would be to make sure that the label and image both have the same auto-sizing rules, so that when the cell is resized, they both grow together.
you can use UITableView delegate method,
– (CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
inside this you can set the height of row dynamically like..
// This is only for Example that you can set your cell height
-(CGFloat)tableView:(UITableView *)aTableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString *text;
text = [_messages objectAtIndex:indexPath.row];
CGSize constraint = CGSizeMake(280, 2000);
CGSize size = [text sizeWithFont:[UIFont boldSystemFontOfSize:12] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];
return size.height + 5;
}
You should be able to control the size of the subviews if you programmatically create them and add them to your tableview cell (i.e.,so that they are not set in storyboard, and thus are not subjected to explicit auto-contraints).
In my implementation, I created a customCell subclass. In the .h:
#property (strong, nonatomic) UILabel *customLabel;
Then in the .m:
- (id)initWithCoder:(NSCoder *)aDecoder {
METHOD;
self = [super initWithCoder:aDecoder];
if (self) {
// Initialization code
self.customLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
[self addSubview:self.customLabel];
}
return self;
}
In your tableViewController's .m file, in the method tableView:cellForRowAtAtIndexPath:
theCell.customLabel.frame = CGRectMake(0, 0, 320, 40);
theCell.customLabel.text = #"Whatever text you want";
This will give you instant and complete control over your custom label right when the tableview and cell loads.
In response to #inafziger, I tried programmatically removing the constraints on the label but it did not resolve this auto-resizing issue.
Update: making a temporary reference to the subview, then removing it from superview, and then adding it back to the subview, this worked just as well, with the slight exception that the in my case where I'm using a label, the height of the label was fit to the height of the text it contained (whereas programmatically creating the label in my example above, the label will have whatever height you assign it.) The advantage being that you don't have to create any custom labels, or even touch the subclass tableviewCell. Just use whatever you created in storyboard. Here's tableView:cellForRowAtIndexPath:
UILabel *theLabel = theCell.theLabel;
[theCell.theLabel removeFromSuperview];
[theCell addSubview:theLabel];
theCell.theLabel.frame = CGRectMake(0, 0, 320, 40);
Related
Hi I'm able to achieve auto-resizing table view cells (based on amount of text) by pinning textLabel's top, bottom, left and right to content view's top, bottom, left and right. I was able to get different cell height for cell with different text length. But I want to achieve same auto-resizing result with button added as subview to cell. I have added exact same contrains to button as I have it with textLabel. Any help is greatly appreciate .
Summary : Here is an hand-made example about this problem.
First, read the answer about autoresizing tableviewcell with UILabel because you will do like that with a little changes.
The difference between UILabel and UIButton is UILabel has Intrinsic Content Size based on Width and Height. So you need to subclass UIButton and override method :
-(CGSize)intrinsicContentSize {
return CGSizeMake(self.frame.size.width, self.titleLabel.frame.size.height);
}
In your CustomCell class, override method
- (void)layoutSubviews{
[super layoutSubviews]; //btnTest is your Button
[self.contentView setNeedsLayout];
self.btnTest.titleLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.btnTest.titleLabel.frame);
}
In your ViewController :
- (void)configureCell:(UITableViewCell *)cell forRowAtIndexPath: (NSIndexPath *)indexPath{
if ([cell isKindOfClass:[TestCell class]]) {
TestCell *testCell = (TestCell *)cell;
[testCell.btnTest setTitle:#"An example autoresizing UITableViewCell height based on UIButton added as subview by Matie.An example autoresizing UITableViewCell height based on UIButton added as subview by Matie.An example autoresizing UITableViewCell height based on UIButton added as subview by Matie." forState:UIControlStateNormal];
#warning You need to have this below line, to calculate height when the first time viewDidLoad.
testCell.btnTest.titleLabel.text = #"An example autoresizing UITableViewCell height based on UIButton added as subview by Matie.An example autoresizing UITableViewCell height based on UIButton added as subview by Matie.An example autoresizing UITableViewCell height based on UIButton added as subview by Matie.";
}
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
[self configureCell:self.prototypeCell forRowAtIndexPath:indexPath];
//
self.prototypeCell.bounds = CGRectMake(0.0f, 0.0f, CGRectGetWidth(self.tableView.bounds), CGRectGetHeight(self.prototypeCell.bounds));
[self.prototypeCell setNeedsLayout];
[self.prototypeCell layoutIfNeeded];
CGSize size = [self.prototypeCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
return size.height +1;
}
Text in the Label of a Custom Cell appears with a block. Is there a better way to accomplish this?
CustomCell.h
#interface CustomCell : UITableViewCell
#property (nonatomic, strong) UILabel *label;
#property (nonatomic, strong) UIView *circle;
#end
CustomCell.m
#implementation CustomCell
- (void)layoutSubviews
{
[super layoutSubviews];
self.circle = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 40.0f, 40.0f)];
[self.circle setBackgroundColor:[UIColor brownColor];
self.label = [[UILabel alloc] initWithFrame:CGRectMake(15, 20, 200.0f, 50.0f)];
self.label.textColor = [UIColor blackColor];
[self.contentView addSubview:self.label];
[self.contentView addSubview:self.circle];
//I have also tried [self addSubview:self.label];
}
tableView.m
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *customCellIdentifier = #"CustomCell";
CustomCell *cell = (CustomCell *)[tableView dequeueReusableCellWithIdentifier:customCellIdentifier];
if (cell == nil) {
cell = [[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:inviteCellIdentifier];
}
dispatch_async(dispatch_get_main_queue(), ^{
[[cell label] setText:#"This is Label"];
[cell setNeedsDisplay];
});
return cell;
}
The only way I can get the UILabel to display text is by using the Block above. If I don't use the block and simply use cell.Label.text = #"This is a Label" followed by [cell setNeedsDisplay];, the text does not appear and I have to scroll the tableview causing the cells to reload, and only then the text in the label finally appears.
Is there better way or am I stuck with having to use the block?
You don't create the UILabel for the label property until the cell's layoutSubviews method is called which is long after you attempt to set the label's text in your table view controller.
Move the creation of the labels to the custom cell's initWithStyle:reuseIdentifier: method. Also put the call to self.contentView addSubview: in the init... method. The only thing that should be in the layoutSubviews method is the setting of the label's frame.
Once you do that you won't need the use of GCD in the cellForRow... method.
Do the same for the circle property too.
BTW - your use of GCD solves the issue because it gives the cell a change for its layoutSubviews method to be called, creating the label.
First off, you should not be allocating and placing views in layoutSubviews. The views should be created and placed when the cell is created and you only alter the frames (if required) in the layoutSubviews method. Otherwise you're going to get a tonne of duplicate views on top of each other.
Next, you should not be using dispatch_async inside of tableView:cellForRowAtIndexPath:. You can just set the text label directly. Nor should you need setNeedsDisplay since the system will do that anyway with the new cell.
In my UITableView, all the cells will be a different height. All of them have a background image, which is a bubble picture. All of the cell's TextLabels need to be different widths as well, so I've subclassed UITableViewCell and have given it two properties:
#property (strong, nonatomic) UILabel* messageTextLabel;
#property (strong, nonatomic) UIImageView* bubbleImageView;
I have my custom UITableViewCell's initWithStyle set up like so:
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
//stretchable bubble image
UIImage *rawBackground = [UIImage imageNamed:#"text_bubble"];
UIImage *background = [rawBackground stretchableImageWithLeftCapWidth:13 topCapHeight:22];
_bubbleImageView = [[UIImageView alloc] initWithImage:background];
//textlabel
_messageTextLabel = [[UILabel alloc] init];
[_messageTextLabel setFont:[UIFont systemFontOfSize:14.0f]];
[_messageTextLabel setNumberOfLines:0];
[_messageTextLabel setBackgroundColor:[UIColor clearColor]];
[_messageTextLabel setTextColor:[UIColor blackColor]];
[self.contentView addSubview:_bubbleImageView];
[self.contentView addSubview:_messageTextLabel];
}
return self;
}
In my TableView's cellForRowAtIndexPath, I've already tried to just alloc a UIImageView there and set it to the cell's frame, and that works, but when I scroll up and down then the screen gets cluttered with UIImageViews being re-alloced over and over. I've tried the if(cell == nil) technique, but that just makes my entire UITableView blank. So, this is what I have right now:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
Cell *cell = (Cell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
//works just fine
[cell.messageTextLabel setFrame:CGRectMake(15, 0, 245, cell.frame.size.height -10)];
//this doesn't work at all
[cell.bubbleImageView setFrame:CGRectMake(10, 0, cell.frame.size.width, cell.frame.size.height)];
[cell.messageTextLabel setText:[self.randomData objectAtIndex:indexPath.item]];
return cell;
}
So my UITableView ends up looking like this when run (cell selected so you can see the frame):
Note that I can set the frame of the bubbleImageView in my UITableViewCell subclass, but I don't know what the cell's height is going to be then. I'm more baffled by the fact that I can set my messageTextLabel's frame and not my bubbleImageViews. I may be doing something that is very elementary wrong, it's a simple problem though for some reason I'm getting tripped up.
Thank you!
I have seen 2 problems here:
I think that you have the auto-layout enabled.
In this case the initial frame and the autoresizingMask are translated to auto-layout constraints automatically.
After this no frame changes will change the view's size and location - only the constraints...
You haven't set the contentMode of the image view to UIViewContentModeScaleToFill (this is the default, but it's better define this kind of properties anyway).
Just add this line: _bubbleImageView.contentMode = UIViewContentModeScaleToFill; right after its initiation.
I think that the solution here is auto-layout - setting constraints properly will solve this issue.
I suggest doing it in the storyboard, with table view controller and dynamic cells...
I have a class PostListTableCell, inheriting UITableViewCell, which is used as my custom cell in a UITableView.
I need to resize some labels in the cell, so I called following method in
- (void)layoutSubviews {
[super layoutSubviews];
[_titleLabel sizeToFit];
}
But the problem is, when the UITableView loaded, the _titleLabel does not resize:
But after I click this cell and select it, the title did resize:
Following is the code to load data:
- (PostListTableCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *PostListTableCellIdentifier = #"PostListTableCell";
PostListTableCell *cell = (PostListTableCell*) [tableView dequeueReusableCellWithIdentifier:PostListTableCellIdentifier];
if (cell == nil) {
cell = [[PostListTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:PostListTableCellIdentifier];
}
Post *post = (Post*)_posts[indexPath.row];
[cell loadPost:post];
return cell;
}
Could anyone help?
The problem is the autolayout that resize again the label for you with the constraints that you had set when you make the label in Interface Build, unfortunately in under autolayout the the hierarchy is Constraints > Frame
First of all, if you use Autolayout in (viewDidLoad) method which is related to UIViewController and its subclasses and (awakeFromNib) which is related to UIView and UITableViewCell etc all Views Frames' have not been rendered yet while those methods called.
So if you want to resize any of outlets you should call it in (ViewDidAppear) for UIViewController. In UIViews and cells you should use:
- (void)layoutSubViews
{
[super layoutSubviews];
}
And don't forget to set interval to your Method of resizing as in this answer.
set frame for your label
-(void)layoutSubviews
{
CGRect frame = CGRectMake(20, 30, 200, 50);
_titleLabel.frame = frame;
}
Hi I have a tableView which I change the width programmatically by his constraint:
self.widthTableLeft.constant = self.view.frame.size.width;
I do this in the viewDidLoad.
In the delegate method:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
I need the contentview frame of each cell to calculate the hight of the cell, but when get it, this is the old size, I mean the size if I wouldn't have done the resize.
When the table is showed the size of the table is right but the hight of the cell is wrong.
I have tried to call:
[cell setNeedsUpdateConstraints];
[cell updateConstraintsIfNeeded];
[cell.contentView setNeedsLayout];
[cell.contentView layoutIfNeeded];
The question is, before to show the view of my view controller, when is the best place to update the width constraint of a UITableView and to get the right contentView in the cells in the method heightForRowAtIndexPath.
Sorry but I'm lost, could you give me any ideas?
Thanksssss
UPDATE
This is the code in heightForRowAtIndexPath
static const NSInteger ROC_TITLE_LABEL_TAG = 2;
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
ROCAgendaItemDetailEntity *agendaItemDetail = [self.listRight objectAtIndex:indexPath.row];
UITableViewCell *cell = [self.tableLeft dequeueReusableCellWithIdentifier:#"cellVideo"];
//I get the label which will make the cell bigger
UILabel *titleLabel = (UILabel *)[cell viewWithTag:ROC_TITLE_LABEL_TAG];
//We init the height title with the min height.
float extraSpaceHeightLabel = 0;
if (agendaItemDetail.agendaItem.title.length > 0) {
//I will use his width to get the hight that I need to write all text
float width = titleLabel.frame.size.width;
CGSize size = CGSizeMake(width, CGFLOAT_MAX);
//we get the size
CGSize sizeTitleLabel = [agendaItemDetail.agendaItem.title sizeWithFont:[ROCTextsInformation imagoMed:15] constrainedToSize:size lineBreakMode:titleLabel.lineBreakMode];
//we substract the current height of the label to know the extra space to write all text
sizeTitleLabel.height -= titleLabel.frame.size.height;
extraSpaceHeightLabel = sizeTitleLabel.height;
}
//The final hight will be the contenViewHeight pluss the extra space needed.
return cell.contentView.frame.size.height + extraSpaceHeightLabel;
}
and this is the cell in the table view
Thanks again
viewDidLoad is too early to try and access the geometries of your views. Instead, access self.view's width in viewDidLayoutSubviews.
#interface CustomViewController ()
#property (nonatomic) BOOL isFirstTimeViewDidLayoutSubviews; // variable name could be re-factored
#end
#implementation CustomViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.isFirstTimeViewDidLayoutSubviews = YES;
}
- (void)viewDidLayoutSubviews
{
// only after layoutSubviews executes for subviews, do constraints and frames agree (WWDC 2012 video "Best Practices for Mastering Auto Layout")
if (self.isFirstTimeViewDidLayoutSubviews) {
// execute geometry-related code...
self.widthTableLeft.constant = self.view.frame.size.width;
}
self.isFirstTimeViewDidLayoutSubviews = NO;
}