10

I've been fiddling with this issue for several days now, and I cannot seem to get it right.

I am trying to construct a UITableView that should look similar to the following mockup:

iOS Design Issue

  • Outer layout: UITableViewCell
  • Red layout: A stand-alone .xib UIView with a single UIView
  • Blue layout: The inner layout. Several of these should be able to exist inside a single Red layout, on top of each other, as described in the second Cell.

This is, as far as I can tell, the most optimal way to lay this out on the UI. However I cannot seem to get the height of the cell (For the GetHeightForRow method), no matter what I try.

Loading and adding the views isn't the problem, the problem is after they're loaded, to fill the different UI elements with data, and get the size of them.

I have tried using SizeToFit, but the only elements it seems to have effect on, is UILabels. Even when the UILabel's frame changes to something like 300 height and I call SizeToFit on the UI containing the label, it (the UIView) still remains at 320x100. Which means when it's rendered, it's looking all wrong.

The way I'm trying to calculate the height is very similar to Point 4 on the accepted answer at https://stackoverflow.com/a/18746930/2520789 . That is, creating a single cell in memory, and filling it with data for each row, and then getting the Height on that cell.

Community
  • 1
  • 1
Falgantil
  • 1,290
  • 12
  • 27
  • Couple of questions: First do you need to support iOS 8 and Below or Do you need to support iOS 8 and above? Second, are you doing XIB/Storboard based View Contollers or all code? Third, are you using Autolayout in your Views definitions? – SharpMobileCode Jun 23 '15 at 03:57
  • First: It would be nice with support for below iOS8, but not needed. Second: I am using Storyboards for making View Controllers. For all other separate views, I'm making separate xibs. Third: As far as I understand, Autolayout is basically attaching view constraints, and letting the view "resolve" its own Frame and Bounds. In that case, yes. – Falgantil Jun 23 '15 at 06:22
  • First thing to watch is that prototype cells don't have a size class, so they tend to layout wrong if you have size class specific fonts etc. You can work around this by adding the contentView of the cell to the table, doing the sizing and removing it. Second for UILabel you need to set the `preferredMaxLayoutWidth` so it wraps at the right width: no size class can end up with this being 600 by default. Third, make sure UILabel max rows is 0 and I always add a height constraint of the form height >= (minimum height) so that it knows it can grow vertically in its containing view. – Rory McKinnel Jun 24 '15 at 12:12

3 Answers3

0

use this

-(CGFloat) heightForText:(NSString *)text withWidth:(CGFloat) textWidth{

    CGSize constraint = CGSizeMake(textWidth, 20000.0f);
    CGRect rect = [text boundingRectWithSize:constraint
                       options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading)
                    attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14]}
                       context:nil];
    CGFloat height = rect.size.height;

    height = ceilf(height);
//    NSLog(@"height %f", height);
    return height;
}
Ankit Sachan
  • 7,690
  • 16
  • 63
  • 98
  • This only solves the part about resizing the label. I also need to resize the UIView containing the label, after the label has been resized, so the view will accommodate the label. – Falgantil Jun 19 '15 at 10:40
  • @BjarkeSøgaard just calculate the heights, then height of view = height of labels + padding – Ankit Sachan Jun 19 '15 at 10:55
  • I'm not sure I get what you mean... When I get the height of the view, it will be incorrect, because the label will continue beyond the bottom of the view. What I want to be able to do is, after I resize the label, to also resize the View containing the label, to accommodate the labels new Frame. – Falgantil Jun 19 '15 at 11:25
  • @BjarkeSøgaard: Yes that exactly will happen first calculate height of all the labels, and if its in a table view then you'll require to implement heightForRowAtIndexPath: – Ankit Sachan Jun 19 '15 at 11:32
  • Currently if I perform a "SizeToFit" on the View containing the Label, the View will remain the same size (320x100), even if the label changed into something like 320x328. When I actually need it to change into something like 320x428 or something. Whatever will contain the label and other controls, including whatever constraints they may have. – Falgantil Jun 19 '15 at 11:48
  • did you try grouping data by date and show them grouped on uitableview – Burak Ogutken Jun 24 '15 at 11:09
0

Well . you can achieve desired layout by following method

  1. Add one ContentHOlderview to each cell and ping all side of ContentHolderView to cell ContentView by using VFL (Visual Format language) programmatic.

  2. now you can stack all inside one above other programmatic by VFL.

3.In heightForRowIndex delegate method, if height of each xib element is fix then return value (which will be sum all xib height and it has be to calculate while configuring each cell)

  1. if height of each xib is dynamic then calculate

height of each item by following method while configuring cell .

GSize constraint = CGSizeMake(200, 20000.0f); CGRect rect = [Celltext boundingRectWithSize:constraint options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading) attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14]} context:nil]; CGFloat height = rect.size.height;

You need to find total height of each cell by applying same logic for each subview.

prakash hadapad
  • 31
  • 4
0

As I read in your comment you not needed to support below iOS 8.0 you don't need to specify row height manually. You can just do it like this and when you using AutoLayout it will make your layout height automatically.

this.TableView.EstimatedRowHeight = 600;
this.TableView.RowHeight = UITableView.AutomaticDimension;

And is the blue layout inside the red xib? I am never use xib before but for using Auto Layout you need to define bottom and top margin in cell

albilaga
  • 419
  • 1
  • 10
  • 26