The original
text is written in oc, the code engineering project of my swift project
Speaking of iOS development, many people’s impression is-get a tableView and throw all the data on it. It sounds rough, but when you think about it carefully, the tableView is the most used to display the data content. At this point, today's male number one-tableViewCell is about to debut.
The topic of this article is the height adaptation of tableViewCell. There are indeed several ways to calculate the height of the cell. When making the cell, I always pull the xib directly for the simpler interface. It is easier to connect the constraints manually, so I will come today. Explore a wave-a simple way to use xib to achieve highly adaptive cell;
As shown in the figure, this is the simplest tableView. There are only two labels and no other controls. Without any processing, we found that the content will be out of bounds (outside the screen running). First of all Step, we have to solve this problem first, at least let the content be displayed on the screen;
-->Exploration: Is it because the height of the tableView is not enough, for example, when the height is only 44, the content can only be displayed like this?
First: change the height of tableViewCell
Second: set the number of content lines_valueLabel.numberOfLines=0;
Doubt: the width of the content label = infinity? So it won't wrap
As shown in the figure, we know that as long as two constraints are set for the label, both the width and height can automatically realize the self-adaptation of the content. However, if the width is not set here (add the right constraint == confirm the width), the width of the label will be infinite, unlimited Go outside the content
As shown in the figure, after adding the constraint on the right, we found that the constraint was incorrect. The reason: the width of the two labels is not set, and they are automatically set according to the content. This will lead to the failure to determine the two frames, and all constraints report errors.
-->Small tips: There are only two labels here, and no width constraint is set (if the vertical method is height constraint), an error will be reported when they are displayed according to the content, if you, for example, the content of the left label is fixed (For example, they are all "names"), it can be solved by directly adding a width constraint, or the left side is not a label, but other spaces that can determine the frame, such as Btn, imageView, will not have the above problems! Because: when we do not set the label frame, the default frame is adaptive according to the content, so the two cannot appear together that need to be adaptive;
-->Not believing in evil: Test under the condition of restraining error:
As shown in the figure, we found that the content does automatically wrap, and all are displayed, which proves that our idea of setting the width constraint is correct.
but! --> The keyLabel is gone, because the two labels we made are adaptive, so we cannot determine their exact location!
Solution: manually calculate the height of valueLabel, but set the height of the parent view (valueView) --> modify it through height constraints!
As shown in the figure, add a View height constraint, we plan to implement: valueLabel is directly displayed on the valueView, and then directly set the valueView's frame
-->Next: Calculate the height of the label-->The content height calculation formula: CGRect rect = [str boundingRectWithSize:CGSizeMake(BottomW,CGFLOAT_MAX)options:optionsattributes:attrDiccontext:nil];
Step 1: Get the width of the current View first!
Step 2: Set the width of valueLabel!
Step 3: Calculate the content height!
Step 4: Set the height of valueView!
Solution --> Calculate the width of keyLabelLabel manually!
Ideas: 1. Set the width constraint of keyLabel;
2. According to the actual content of keyLabel, calculate the specific width and modify the width constraint;
3. The width constraint is not set for the valueLabel on the right, and the constraint on the right = 0 is set, and the width of the valueLabel is calculated;
As shown in the figure, because if the same line, two labels do not set width constraints, because the label will adapt to the content by default, two uncertain constraints --> cause constraints to report an error! So tentatively, set the width constraint on the left, and then modify the width on the left according to the actual content, and the width on the right = screen width-left width!
At this point, we found that since the label on the left is width-constrained, the label on the right will not be reported wrong at this time (add the right constraint = 0)!
Through the content, calculate the width of keyLabel, set it to the width constraint of keyLabel, and update the constraint;
Subsequently, due to the self-adaptation of valueView, its width will automatically = screen width-the width of keyLabel, so we don't need to set it again;
At this point, we found that some of the content is still covered, and the label does not fully display all the content
This happens because the font length calculation has changed slightly after Xcode8.0. We can solve this problem by adding a little when setting the width.
At this point, the constraint conflict between the labels is resolved~
The next step is to set the highly adaptive problem of tableViewCell;
The quick setting method of xib: 1. In xib, after setting the top and bottom constraints;
2. Manually calculate the value of the height constraint
3. Use Xcode to automatically adapt to the height of Cell
As shown in the figure, we find that the width of keyLabel adapts to the content, the width of vauleLabel adapts to the width of keyLabel, the height of valueLabel adapts to the content, and the height of cell adapts to the content~
Small tips-->If you find that the height is still fixed after setting _tableView.rowHeight=UITableViewAutomaticDimension, check if there is a height proxy method for tableView-->(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:( NSIndexPath *)indexPath, comment it out if you have it~
Simple Demo: Demo