UICollectionViewCell dynamic height with autolayout - uicollectionview

I am using auto layout with UICollectionViewCell. So the idea is to allow CollectionViewCell to determine it's size based on layouts. All the constraints are set properly but the problem is that I can not calculate it's size for data source method
collectionView:layout:sizeForItemAtIndexPath:
Ideally I would like to calculate Cell's height doing the following:
static MyCell *myCell = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
myCell = [[MyCell alloc] initWithFrame:CGRectZero];
});
cell.model = model;
[cell updateConstraints];
[cell layoutSubviews];
return cell.frame.size;
but it doesn't force constraints to update, so the cell's frame is zero. Can you advice me how can I calculate cell's size based on it's constraints?
Thanks

here is the solution
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
YourCollectionCell * cell = (YourCollectionCell *) [YourCollectionViewObj cellForItemAtIndexPath:indexPath];
if (cell == nil) {
NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:#"YourCollectionCell" owner:self options:nil];
cell = [topLevelObjects objectAtIndex:0];
cell.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 20);
// SET YOUR CONTENT
[cell layoutIfNeeded];
}
CGSize CellSize = [cell systemLayoutSizeFittingSize:UILayoutFittingCompressedSize withHorizontalFittingPriority:UILayoutPriorityDefaultHigh verticalFittingPriority:UILayoutPriorityDefaultLow];
return CellSize;
}

I think you should return this size:
return [cell systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];

For your dynamic height of the UICollectionViewCell in UIcollectionViewcontroller , you need to implement below method: -
(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

Related

Objective-C: Self-Sizing Table View Cells with dynamic image's height after download

I wanna resize imageview'height after download image,but some wrong happened as first cell image when first load tableview;
then if I scroll table to make the cell be in visible again,it go to be normal as second image;
I don't known the size of image,can't get from server,how to fix it?
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
ShopingTableCell* cell = [tableView dequeueReusableCellWithIdentifier:#"shopingCell" forIndexPath:indexPath];
StoreDynamicsModel *model = storeArray[indexPath.row];
cell.contentLabel.text = model.name;
[cell.imageView sd_setImageWithURL:[NSURL URLWithString:model.goods_img_url] placeholderImage:[UIImage imageNamed:#"defaultShort"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
dispatch_async(dispatch_get_main_queue(), ^{
cell.imgViewHeightConstraint.constant = image.size.height * ScreenWidth / image.size.width;
});
}];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
tableView.rowHeight = UITableViewAutomaticDimension;
tableView.estimatedRowHeight = 120.f;
return self.tableView.rowHeight;
}
You can set content mode of UIImageView to Aspect Fit.
cell.imageView.contentMode = UIViewContentModeScaleAspectFit;
For ref:
How to manage UIImageView content mode?

Display centered 200x150 Image in a UITableViewCell

I need to display a centered 200x150 image in a UITableViewCell. I was able to add the image to a standard cell type (it shrunk it to fit - that wasn't working). I then tried redrawing it by setting the bounds and frame for the image (this caused overlap between my image and the other rows).
I have a custom class inheriting from UITableViewCell:
#import "WCPictureViewCell.h"
#implementation WCPictureViewCell
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
self.frame = CGRectMake(5,5,210,160);
self.bounds = CGRectMake(5,5,210,160);
self.imageView.frame = CGRectMake(0,0,200,150);
self.imageView.bounds = CGRectMake(0,0,200,150);
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
#end
This code produces picture overlap with the rest of my table:
Here is my tableView:cellForRowAtIndexPath: method in my controller:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell;
if(cellPropertyMap>0) {
static NSString *CellIdentifier = #"DetailCell";
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if(cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
}
// Configure the cell...
[[cell textLabel] setText: (NSString *)[[self displayLabels]objectAtIndex:cellPropertyMap]];
[[cell detailTextLabel] setText: (NSString *)[[self displayData]objectAtIndex:cellPropertyMap++]];
} else {
static NSString *CellIdentifier = #"PictureCell";
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
//if(cell == nil) {
//}
// Configure the cell...
NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: [cat friendlyURLPath]]];
cell.imageView.image = [UIImage imageWithData: imageData];
cellPropertyMap++;
return cell;
}
return cell;
}
How do I force my table cells to respect eachother's sizes and not overlap? How do I get my image to center?
You need to use
- (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath)
{
// add logic to determine if this indexPath is an image...
if (indexPath.row == 0) // first row in a section is an image?
return (150.0f); // this row is an image
else
return (44.0f); // this is a standard data row
}
to return the correct height of your TableView row.
Second step is to get the image to center, there are various techniques. Try
UIImageView *yourImage = ...;
// set frame and auto-resizing mask
yourImage.frame = CGRectMake(tableView.bounds.size.width / 2) - (yourImage.size.width / 2), 0, yourImage.size.width, yourImage.size.height);
yourImage.autoResizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
// add UIImage to the cell contentView
[cell.contentView addSubview:yourImage];
don't set the cell.imageView property, which defines a left justified image in the cell.
Lastly, and off-topic from your question, you should really consider lazy-loading the images, using initWithContentsOfURL on the UI thread will not yield a good user experience.

Changing height dynamic for Table Rows , CustomCell and Layout

There is a custom cell. In it there is two labels. One of them called nameLabel's height has to change dynamically. It can be 1,2 or 3 lines sometimes. But the rows are on eachother, they cross their own row lines. How can I solve this problem?
The labels and Custom Cell object's Use Autolayout option is disabled.
The label height has to change dynamic, And then the CustomCell's. And then tableRow. My head is confused. And why can't I see CustomCell's background color is changing?
Thanks
Here is my code for :
- (CGFloat)tableView:(UITableView *)tableView
heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
UILabel *label = [[UILabel alloc] init];
label.numberOfLines = 0; // allows label to have as many lines as needed
label.text = [[self.dataList objectAtIndex:indexPath.row] objectForKey:#"NAME"];
CGSize labelSize = [label.text sizeWithFont:label.font constrainedToSize:CGSizeMake(320, 63) lineBreakMode:NSLineBreakByWordWrapping];
CGFloat h = labelSize.height;
NSInteger x=0.0;
if (h==63.0) x=30;
if (h==42.0) x=20;
if (h==21.0) x=10;
return h+30;
}
- (UITableViewCell*)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellID = #"cellid";
CustomCell *cell = (CustomCell*)[tableView dequeueReusableCellWithIdentifier:cellID];
if (cell == nil)
{
cell = (CustomCell*)[[[NSBundle mainBundle]
loadNibNamed:#"CustomCell" owner:nil options:nil]
lastObject];
}
// customization
NSDictionary *d = [self.dataList objectAtIndex:indexPath.row];
cell.nameLabel.text = [d objectForKey:#"NAME"];
cell.cityLabel.text = [d objectForKey:#"CODE"];
cell.indexPath = indexPath;
return cell;
}
At this link there is picture of simulator and xib of the Custom Cell to understand easy the problem:
http://compfreek.wordpress.com/2013/08/14/custom-cell-for-table-row-height-changes-dynamic/
Hear is another way try this change according to ur code it may different, but it may solve your problem.I am putting all views through code only, because it is easy for me check this out.
//in your subclassed class
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// Initialization code
//may be u did same i am adding the label to cell
UILabel *nameLabel = [[UILabel alloc]initWithFrame:CGRectZero];
nameLabel.numberOfLines = 5; //set number of lines
nameLabel.tag = 100;
[self addSubview:nameLabel];
UILabel *otherLabel = [[UILabel alloc] initWithFrame:CGRectZero];
otherLabel.tag = 200;
[self addSubview:otherLabel];
}
return self;
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
// Configure the view for the selected state
//do your customisation when cell is selected
}
-(void)layoutSubviews
{
//in this method i am setting the frames for label
[super layoutSubviews];
UILabel *nameLabel = (UILabel *) [self viewWithTag:100];
nameLabel.text = self.nameString;
CGSize maxSize = CGSizeMake(self.bounds.size.width / 2, MAXFLOAT);//set max height
CGSize nameSize = [self.nameString sizeWithFont:[UIFont systemFontOfSize:17]
constrainedToSize:maxSize
lineBreakMode:NSLineBreakByWordWrapping];
nameLabel.frame = CGRectMake(self.bounds.origin.x +2,self.bounds.origin.y+3, nameSize.width, nameSize.height);
UILabel *otherLabel = (UILabel *) [self viewWithTag:200];
otherLabel.frame = CGRectMake(nameLabel.frame.size.width+15,self.bounds.origin.y+3, 100, 40);
otherLabel.text = self.otherString;
}
//in your main class
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:#"CustomCell"];
if(cell == nil)
{
cell = [[[CustomCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"CustomCell"]autorelease];
}
//change it for ur need
NSString *name = #"hear is your long length name uzamaki naruto from uzamaki clan";
NSString *other = #"other name";
cell.nameString = name;
cell.otherString = other;
return cell;
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *name = #"hear is your long length name uzamaki naruto from uzamaki clan";
//replace it your height logic
float cellWidth = 350; // ur cell width
CGSize maxSize = CGSizeMake( cellWidth / 2, MAXFLOAT);//set max height
CGSize nameSize = [name sizeWithFont:[UIFont systemFontOfSize:17]
constrainedToSize:maxSize
lineBreakMode:NSLineBreakByWordWrapping];
return nameSize.height + 10;// for ur height
}

UITableViewCell width is greater than UITableView width

I encountered a weird problem. I am creating a custom selected view for my tableviews. However, this selection view doesn't fit well. I found out that this is because my selection view is 300px while the cell itself is 320px. The weird part is that the UITableView's width is actually just 300px only. How will I adjust the cell width of my table?
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *tableIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:tableIdentifier];
if (cell == nil)
cell = [[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:tableIdentifier] autorelease];
if (tableView == bandTable)
{
UIImageView *imageBg = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"column1_selected.png"]];
[imageBg setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
[tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
[cell setSelectionStyle:UITableViewCellSelectionStyleGray];
[cell setSelectedBackgroundView:imageBg];
[imageBg release];
NSArray *array = [bandDictionary objectForKey:#"Bands"];
cell.textLabel.text = [array objectAtIndex:indexPath.row];
NSLog(#"CELL: %f", cell.bounds.size.width);
}
return cell;
}
Just set
cell.frame = CGRectMake(0,
0,
self.tableView.frame.size.width,
cell.frame.size.height);
in cellForRowAtIndexPath.
Add this two lines after your cell gets created,
[[cell contentView] setFrame:[cell bounds]];
[[cell contentView] setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
#IvorPrebeg, you shouldn't set the frame for the UITableViewCell inside cellForRowAtIndexPath. The UITableViewCell will automatically be set to the width of the UITableView after the cell did execute layoutSubviews. This will be done automatically after setting a value on the label you inserted in the cell.
Its just important to calculate inside heightForRowAtIndexPath a size based on the font and the text inserted into the cell which is equal to the one inside your cell. In my case it looks like this:
- (CGFloat)tableView:(UITableView *)tableView
heightForRowAtIndexPath:(NSIndexPath *)indexPath{+
ChatMessage *message =
[self.fetchedResultsController objectAtIndexPath:indexPath];
CGSize size = [message.text sizeWithFont:self.messageCell.labelMessage.font
constrainedToSize:CGSizeMake(self.tableView.frame.size.width * 0.8f, HUGE_VAL)
lineBreakMode:NSLineBreakByWordWrapping];
return size.height;
}
And than inside the UITableViewCell:
- (void)layoutSubviews{
[super layoutSubviews];
if( _fInitWidth == 0 ){
self.labelMessage.preferredMaxLayoutWidth =
self.bounds.size.width * 0.8f;
}
[self.contentView setNeedsDisplay];
}
Like you can see, the prefferedMaxLayoutWidth of the UILabel inside my UITableViewCell will be 0.8 of the cells width (320 * 0.8). LayoutSubviews will be excecuted inside cellForRowAtIndex after setting up the cells properties. After that, UITableView will call the heightForRowAtIndexPath and calculate the size for the height. Therefore I calculate the UILabels size by passing a width * 0.8 for constrainedToSize ( tableview width is 320.0 * 0.8 ) the same as in the cell.
The example values are for iPhone devices, they will change on bigger screens of course.
On C#:
public UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath){
UITableViewCell cell = new UITableViewCell();
cell.Frame = new CoreGraphics.CGRect(0, 0,this.selectSchoolTableview.Frame.Width, cell.Frame.Size.Height);
cell.ContentView.AutosizesSubviews = true;
return cell;
}
Another trick:
public UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath){
UITableViewCell cell = new UITableViewCell();
cell.Accessory = UITableViewCellAccessory.None;
cell.ContentView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
cell.ContentView.AutoresizingMask = UIViewAutoresizing.FlexibleHeight;
return cell;
}

How to change the height of table view cell

i m trying to read some RSS data. I have the data that is of different sizes. the data is present in tabke view data object. I used the label to add the data and resize the dat. No success. Please help.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
NSLog(#"in the tabel view cell");
heightOfCell=[self tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath];
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"Default"];
if (cell == nil)
{
//cell = [[[UITableViewCell alloc] initWithFrame:CGRectMake(55.0,42.0,245.0,heightOfCell) reuseIdentifier:#"Default"] autorelease];
UILabel *label = [[UILabel alloc] init];
NSString *cellText = [[TableViewData news] valueForKey:[NSString stringWithFormat:#"%d",[indexPath row]]];
UIFont *cellFont = [UIFont fontWithName:#"Helvetica" size:10.0];
CGSize constraintSize = CGSizeMake(280.0f, MAXFLOAT);
label.text = [[TableViewData news] valueForKey:[NSString stringWithFormat:#"%d",[indexPath row]]];
CGSize labelSize = [[[TableViewData news] valueForKey:[NSString stringWithFormat:#"%d",[indexPath row]]] sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:UILineBreakModeWordWrap];
label.lineBreakMode=UILineBreakModeWordWrap;
[label sizeThatFits:labelSize];
cell = [[[UITableViewCell alloc] initWithFrame:CGRectMake(55.0,42.0,245.0,heightOfCell) reuseIdentifier:#"Default"] autorelease];
//[label sizeToFit];
[cell addSubview:label];
[label release];
}
}
you need to use the following method.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 45;
}
you need to change the height as per your requirements
It should be noted that the default height is 44.
You need to implement the following method:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// some code that compute row's height
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 50;
// This is just Programatic method you can also do that by xib !
}
You can also change it in Interface Builder. Open the *.xib file, select the table, show the Size Inspector, and change the row height. But, please note that the default height is 44 pixels.
There are two methods to set the UITableViewCell's height .:
UITableView has a property named rowHeight, with which you can use to set all the UITableViewCell to the same row height;
If you implement the UITableViewDelegate protocol , and include tableView:heightForRowAtIndexPath: method, it's you responsbility to decide the current UITableViewCell'height. In practice, we always use the delegate method to set the cell's height, only if each cell's height may be dynamic! And the method is preference to the UITableView's rowHeight property!
So, I think you may prefer the second method:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
NSString *cellText = [[TableViewData news] valueForKey:[NSString stringWithFormat:#"%d",[indexPath row]]];
UIFont *cellFont = [UIFont fontWithName:#"Helvetica" size:10.0];
CGSize labelSize = [cellText sizeWithFont:cellFont
constrainedToSize:constraintSize
lineBreakMode:UILineBreakModeWordWrap];
return lableSize ;
}
I saw a lot of solutions but all was wrong or uncomplet. You no need calculate nothing (no font, no size, nothing)...
You can solve all problems with 5 lines in viewDidLoad and autolayout.
This for objetive C:
_tableView.delegate = self;
_tableView.dataSource = self;
self.tableView.estimatedRowHeight = 80;//the estimatedRowHeight but if is more this autoincremented with autolayout
self.tableView.rowHeight = UITableViewAutomaticDimension;
[self.tableView setNeedsLayout];
[self.tableView layoutIfNeeded];
self.tableView.contentInset = UIEdgeInsetsMake(20, 0, 0, 0) ;
For swift 2.0:
self.tableView.estimatedRowHeight = 80
self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.setNeedsLayout()
self.tableView.layoutIfNeeded()
self.tableView.contentInset = UIEdgeInsetsMake(20, 0, 0, 0)
Now create your cell with xib or into tableview in your Storyboard
With this you no need implement nothing more or override. (Don forget number os lines 0) and the bottom label (constrain) downgrade "Content Hugging Priority -- Vertical to 250"
You can donwload the code in the next url:
https://github.com/jposes22/exampleTableCellCustomHeight
References: http://candycode.io/automatically-resizing-uitableviewcells-with-dynamic-text-height-using-auto-layout/
You have to know the heights of all cells before the tableView:cellForRowAtIndexPath: delegate call which may require you to store heights inside your view controller or some other list.
The function to customise the heights of cells is tableView:heightForRowAtIndexPath:. The default height for a table view is 44 pixels, for reference.
You can find the documentation here.