(IOS) when using auto layout for Complex layout, the related trick of UILabel

(IOS) when using auto layout for Complex layout, the related trick of UILabel

 

Let's talk to the impatient students first.Conclusion(Because I am also an impatient student)

1. For UILabel, SetNumber of linesIt is equivalent to setting a vertical constraint; that is,Setting three constraint in UILabel is enough.

2. For UILabel, set a horizontalConstraint <=To allowUILabel self-adaption width

3. There areTest QuestionOh, if you like the challenge, please read it later.

 

I. Body:

Let's start with a sentiment.

The first project is pure-handed, MRC, and almost no third-party library is used. Computing the layout coordinates on paper is fun all day. All sizes are calculated in real time based on the ratio. The disadvantage is that there are too many layout codes and the logic code is not crowded. The advantage is that I feel super controllable and there are almost no unexpected bugs, the updated version of Apple will not affect app usage. (Note: The latest version uses storyboard for interface switching. Most of the la s are still hand-coded)

The second project is too large. I used Storyboard + auto layout, ARC, and several4-digit Star and active maintenanceThird-party library. The designer's control over the UI is superb. auto layout truly frees me from the interface layout. However, from the beginning of the Mechanical use of "two horizontal constraint + two vertical constraint", until now the main use of "UITableView-FDTemplateLayoutCell" (https://github.com/forkingdog/UITableView-FDTemplateLayoutCell) for tableviewcell layout, there are still some points worth discussing and learning.

 

 

II. Intended audience:

In the following scenarios, we assume that UITableViewCell is used.Layout. UITableViewCell contains several complex la S such as Label, Image, and Button.. In general, the size of the Image and Button remains unchanged or proportional to the Cell, which is easier to handle. The Label may vary depending on the text length and font size, this leads to changes in width and height, causing computing problems.

 

 

3. Setting method (the following two methods have their own application scenarios)
1: Basic

The method of "two horizontal constraint + two vertical constraint" is used to control the position and size of each interface element accurately to the point. For example:

Set the Top, Left, Righ, and heightattributes for the Label to completely control the Label size.

 

However, if the content to be displayed in the Label may occupy multiple rows, you canSet number of lines to 0(Sometimes the title can be set to 2 when at most two rows are displayed .)Constraint as IB OutletCan be modified at any time in the program, such:

 

Because both the text length and cell width affect the Label layout and determine the cell heightHeightForCellAtIndexPath:The return value must be calculated. Therefore, this cell implements two functions:

 

+ (CGFloat)cellHeightWithData:(MDDataType*)data withCellWidth:(CGFloat)cellWidth;- (void)updateWithData:(MDDataType*)data;

 

The former class method is called by heightForCellAtIndexPath to avoid cell instantiation. Call

 

[label.text boundingRectWithSize:CGSizeMake(cellWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:label.font} context:nil].size.height

 

 

To calculate the label height, and then synthesize the entire cell height.

 

The latter instance method is composedCellForRowAtIndexPath:Call, instantiate the control parameters in the cell, and assign the calculation result of the above Code to the IB Outlet of constraint.

 

Advantages: high computing efficiency and precise control.

Disadvantage: the gap, margin, and other values set in IB must be consistent with the hardcode value used in the cellHeightWithData function. A data is maintained by both parties, and it cannot be tolerated. In addition, if the font size of the Label changes, you may need to reset it, which is inconvenient.

 

 

2. Adaptive payment

Use the ratio, multiply, >=, <=, and other settings in constraint to complete the Automatic layout of auto layout.

This setting deletes the constraint of Height in the previous settings. In this case, it can be understood that number of lines acts as the fourth constraint to allow auto layout to layout. Sure, auto layout prompts that the layout is inconsistent with that after running (auto layout is placed in the correct position after running ). This warning tells us that auto layout can correctly handle the label and Update Frame should be used to correctly place the Label.

 

In another case, some labels may not occupy the entire horizontal area, and some other controls may be available later. You can set <= constraint for automatic layout,

Adaptive Layout, coupled with the aforementioned "UITableView-FDTemplateLayoutCell" (https://github.com/forkingdog/UITableView-FDTemplateLayoutCell), all about the layout and other margin, gap and so on, just get it done in IB. There is almost no need to pull the constraint as the outlet to manually set it. In addition, the cell function is only implemented as follows:

 

- (void)updateWithData:(MDDataType*)data;

In heightForRowAtIndexPath: and CellForRowAtIndexPath:You can call this function. [For details, refer to the UITableView-FDTemplateLayoutCell documentation and source code]

 

Advantage: the layout is all in IB, and it is almost unnecessary in the code.

Disadvantages: Because heightForRowAtIndexPath needs to instantiate the cell and perform layout calculation, the efficiency will be slightly lower (of course, there will be some optimization methods)

 

4. Use Cases (the following titles describe the layout difficulty of each cell in uitableview)
A. uniform height

How nice is hardcode?

(Missing graph)

 

B. Easy calculation height

For example, if the ratio of height to width is 16: 9, use the class method for calculation. How nice is it.

 

+ (CGFloat)cellHeightWithData:(MDDataType*)data withCellWidth:(CGFloat)cellWidth;

(Missing graph)

 

 

C. Complex layout + No need to consider efficiency

Use UITableView-FDTemplateLayoutCell

(Missing graph)

 

D. Complex layout + Efficiency first

Special treatment in special cases

(No image missing)

 

 

5. Exercise

I) A list is implemented by tableview. Each cell has a lot of information. The Title can be a long, short, and a short row. A long list can display up to two rows. Date is displayed next to the title. There are four situations:

Case 1: The title occupies one row, and the date can be placed on the right side. The title and date are placed in the same row.

| ------------------------------------------------------ |

| Title Short Date |

| (Others) |

 

Case 2: The title occupies one row, but the first row cannot accommodate the date, and the date is placed in the second row.

 

 

| ------------------------------------------------------ |

| Title ratherrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr Long |

 

| Date |

| (Others) |

Case 3: The title occupies two rows. The second row can prevent the date on the right side, and the date is placed in the second row.

 

| ------------------------------------------------------ |

| Title verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr |

 

| Rrrrrrrrrrrrrry Long Date |

| (Others) |

 

Case 4: The title occupies two rows, but the second row cannot accommodate the date. The date is placed in the second row, and the title Trunk Tail is displayed...

 

| ------------------------------------------------------ |

| Title terrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr |

 

| Rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrriblely... Date |

| (Others) |