IOS - question about cell sizes

I ran into a problem with automatic cell sizes using auto-layout. My goal is to create a table that will look something like this:

| Title_label (time) $price | | | |Some long description. More | |description. | | | 

When the title is long, it should look like this:

 | This title is (time) $price | | really long | | | |Some long description. More | |description. | | | 

Thus, when the title gets larger, it pushes the timestamp to the right, as long as there are 8 points in space, time and price. If it is even larger, it should be carried over to the next line.

I did in front of a table view with self-calibration cells, but where there is only one expandable label, not two.

I performed the automatic line height:

 self.tableView.rowHeight = UITableViewAutomaticDimension self.tableView.estimatedRowHeight = 100 

Here are my limitations:

 | 8px |8px title 8px time >=8px price| | 8px | |8px description 8px| | 8px | 

There is also an upper alignment between price time and name.

I set the number of title and description lines to 0. I set the time and price compression resistance to 1000 (because the title overlapped them).

However, the title label does not wrap to the next line. It ends up being ... Besides, it's too little. When I look at the table, the descriptive height is fixed.

I tried adding cell.layoutIfNeeded () before returning the cell. Then the cell layout is messed up (the header is cropped), but when I scroll through tV, everything is fine.

Any ideas?

Edit: Is this because the name label is next to other labels, and she does not know when it should fall?

I tried

 override func layoutSubviews() { self.nameLabel.preferredMaxLayoutWidth -= (durationLabel.frame.width + priceLabel.frame.width + 16) super.layoutSubviews() } 

to indicate the title label, what is its maximum width, but that will ruin everything.

+6
source share
4 answers

Like you, I set the title and description lines to 0, and I created my cell as follows:

 | 8px |8px title 8px time >=8px price| | 8px | |8px description 8px| | 8px | 

Then I set the compression and hug properties:

Title:

  • Hug: H: 251, V: 252
  • Compression: H: 999, V: 1000

Time:

  • Hug: H: 253, V: 251
  • Compression: H: 1000, V: 750

Price:

  • Hug: H: 252, V: 251
  • Compression: H: 1000, V: 750

Description:

  • Hug: H: 251, V: 251
  • Compression: H: 750, V: 999

Everything works as expected.

+2
source

enter image description here You can add a limit first for the price as lead, top, vertical, width. then time stamped as top, end, height, width. For the title label as leading, ending, upper, lower. To describe the labels leading, ending, upper, lower. and write the code below. heightForRowAtIndexPath will give you the correct height for your cell.

 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { static YOUR_TABLEVIEW_CELL *sizingCell = nil; static NSString * CellIdentifier=@ "YOUR_TABLEVIEW_CELL_IDENTIFIER"; sizingCell =[tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (sizingCell==nil) { sizingCell=[[YOUR_TABLEVIEW_CELL alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; } [self configureFareIssueCell:sizingCell atIndexPath:indexPath]; return [self calculateHeightForConfiguredSizingCell:sizingCell]; } //assign all the labels here - (void)configureFareIssueCell:(YOUR_TABLEVIEW_CELL* )cell atIndexPath:(NSIndexPath *)indexPath { //eg cell.lbl.text=@ "YOUR_TEXT"; cell.imageView.image=[UIImage imageNamed:@"NAME_OF_YOUR_IMAGE"]; } - (CGFloat)calculateHeightForConfiguredSizingCell:(YOUR_TABLEVIEW_CELL *)sizingCell { CGSize size = [sizingCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize]; return size.height + 1.0f; // Add 1.0f for the cell separator height } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString * CellIdentifier=@ "YOUR_TABLEVIEW_CELL_IDENTIFIER"; YOUR_TABLEVIEW_CELL *cell =[tableView dequeueReusableCellWithIdentifier:@"YOUR_TABLEVIEW_CELL_IDENTIFIER"]; if (cell==nil) { cell=[[YOUR_TABLEVIEW_CELL alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; } [self configureFareIssueCell:cell atIndexPath:indexPath]; return cell; } 
+2
source

Try to add

 [cell layoutIfNeeded] 

before returning the configured cell.

+2
source
  • add minimum width to time and price lable

  • set deception priorities

title label:

Hug: H: 1000, V: 1000

Compression: H: 1000, V: 1000

description label:

Hug: H: 1000, V: 999

Compression: H: 1000, V: 999

  1. add this row to the end of the forRowAtIndexPath cell and delete layoutSubviews

    cells? .layoutIfNeeded ()

  2. add this function

    func tableView (tableView: UITableView evaluated by HeightForRowAtIndexPath indexPath: NSIndexPath) → CGFloat {return UITableViewAutomaticDimension}

func tableView (tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) → CGFloat {return UITableViewAutomaticDimension}

5 Build and Run

0
source

All Articles