UITableViewCell nested UITableView best practices

Recently painted an interface, a lot of detours, summed up.
words do not say, we first look at the effect:

UITableViewCell nested UITableView best practices

Zha look, that is, there are a number of section tableView, so easy!
we first look at the data structure:

UITableViewCell nested UITableView best practices
structure level.Png

first, the outermost layer is an array, the array is an object, the object of which contains an array, the array is placed inside an object, then the object which contains two arrays, wound….

A rough sketch of the structure, probably so:

UITableViewCell nested UITableView best practices

Below we build a data model:

UITableViewCell nested UITableView best practices

Let’s analyze:

  • JADataModel as tableView section, that is, how many JADataModel objects, we have how many section
  • Dayjourney as tableView row, that is, how many dayjourney objects, we have a group of how many row
  • Dayjourney inside the journeyrange, picurls array of how to do it?

Maybe we can customize a store multiple images or text controls, but this will be very troublesome, journeyrange, picurls of the two array elements is not fixed, calculate the location of control is very difficult to show hidden etc..

Is there any other way?


If we put a tableView in cell, journeyrange, picurls for receiving the two arrays, also is the son of tableView journeyrange, picurls created two section, each section is created inside number journeyrange row array and picurls array number row

transfer data models to the outermost cell

- (UITableViewCell) tableView: (UITableView * tableView) cellForRowAtIndexPath: (NSIndexPath * indexPath) {JANestCell *cell = [tableView dequeueReusableCellWithIdentifier:JANestCellIdentifier forIndexPath:indexPath]; cell.dayModel = self.dataArr[indexPath.section].dayjourney[indexPath.row]; return cell;}

Cell inside and override the set method

UITableViewCell nested UITableView best practices
receive data model

rewrite set

- (void) setDayModel: (dayjourney * dayModel) {_dayModel = dayModel; self.dotView.hidden = dayModel.lastRow; self.lblTheme.text! = dayModel.theme; self.lblContent.text = dayModel.content; self.icon.image = [UIImage imageNamed:[self fetchNameWithIconType:dayModel.type]]; [self.nestTableView reloadData]; self.tableHeightConstraint.constant = self.nestTableView.contentSize.height;}

Override the set method is nothing more than some of the conventional assignment, but there are two important points:
1.[self.nestTableView reloadData] cell tableView
. Remember to refresh the 2.self.tableHeightConstraint.constant = self.nestTableView.contentSize.height;
this code is to make nestTableView adaptive height cell tableHeightConstraint constraint here, is a fixed height constraint nestTableView remember the scrollEnabled attribute banned nestTableView the

Let’s take a look at Xib

UITableViewCell nested UITableView best practices

there are two one note:
1 because the outer layer of the content inside the cell is adaptive, so we give in time constraints to determine a good vertical constraint, otherwise you can’t figure out the correct height of cell.
2.nestTableView is highly constrained, and if priority is given directly to 1000, it may be bound to conflict, and we can set it to 750

Effect hierarchy

1 large green box is a section tableView the outermost, red color is tableView custom UITableViewHeaderFooterView
2 yellow box is a row
tableView section in a 3 blue box is a nest tableView cell nested inside, which is used to store a string array and an array of pictures

UITableViewCell nested UITableView best practices

remaining problems

Pay attention to several points above, the rest is a normal tableView proxy and data source operation, not elaborate. When the rest of the operation is done, the operation will be found:

In the different size of the screen, the cell line is high, the calculation error!!!

Calculate cell line height method:

- (CGFloat) tableView: (UITableView * tableView) heightForRowAtIndexPath: (NSIndexPath * indexPath) {JADataModel *sectionModel = self.dataArr[indexPath.section]; self.nestCell.dayModel = sectionModel.dayjourney[indexPath.row]; return / self.nestCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height + 1};

The self.nestCell in the above code is an template layout cell specifically designed to calculate height

- (JANestCell *) nestCell {if ((_nestCell)) {_nestCell = [[NSBundle loadNibNamed:JANestCellIdentifier owner:self options:nil].firstObject;} return _nestCell;}

The cause of the problem is:

UILable is not set to the correct preferredMaxLayoutWidth value, as long as the use of UILable, we must set the correct preferredMaxLayoutWidth!!!

Self.lblTheme.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width; self.lblContent.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 83.0f 83.0f;

How did the 83.0f come from?

UITableViewCell nested UITableView best practices
calculation preferredMaxLayoutWidth

Although set the correct preferredMaxLayoutWidth, you can solve the problem of inaccurate calculation of the height of cell, but this is very speculative! If there are multiple
line width uncertain UILable or horizontal direction of one of the controls the width of uncertainty, it is not by way of speculation above calculate the correct preferredMaxLayoutWidth value
in fact, the preferredMaxLayoutWidth value is UILable the width of the rectangular frame, in order to solve this problem, we need to get the correct UILable frame in a custom cell, I use Xib to draw more cell, although in – (void) layoutSubviews which can get the correct UILable frame, but preferredMaxLayoutWidth is not set at this time in effect

If anyone finds a solution please be sure to tell me that my mailbox [email protected], and finally attached to the full JATableCellNestTableDemo