A process of solving the problem of picture and text blending

The requirements are as follows: On the left, the right is the finished figure.

Specific requirements Description: The user's reply is a cell, the number of words is variable. When there is a condition, you need to add a clickable Delete button small icon after the last word of the text (possibly wrapping), and the text supports the emoji emoji.

Resolution process:

1, a see this text needs to be interspersed with pictures of the Nstextattachment object in rich text, it can wrap an image into a rich text, and then to Uilabel display can complete the display requirements, but the object can only wrap UIImage objects, Unable to monitor the picture's click events, does not meet the requirements.

2, Rich text is a good idea, nstextattachment poor in the inability to package UIView object. Then found the Yykit framework, which has a way to wrap the UIView object to generate a rich text object

After testing, the rich text object can not be displayed with Uilabel and Uitextview, can only be displayed with Yylabel, and Yylabel inherit from UIView, when there is emoji expression in rich text object, its rendering mode/position and Uilabel are different, Caused by the Boundingrectwithsize method of NSString calculated Yylabel height is wrong, when there is emoji expression, often appear ... Display incomplete phenomenon, multi-party test without fruit, give up

3, the first method is to complete the display effect, but can not listen to click events. So I found a way to calculate the upper-right coordinate of the last word of Uilabel, and an idea arose: add an invisible button to listen to the event in this position. The calculation location method is as follows

SZ is the dimension of a single line in which text is not wrapped, and linessz is the size of the calculated text in the line break state.

Most of the scenarios are possible by adding a large invisible button to the calculated location to listen for click events. However, this method sometimes calculates inaccurate results, and it is necessary to consider the situation where the added button is out of bounds and does not meet the required version requirements.

4, do not have, prepare to learn the coretext of evil. Looked at, found the Coretext package version Textkit,oc interface, suddenly went to the liking. Textkit is mainly about three classes: Nstextstorage is used to save the text and related attributes that need to be displayed, Nslayoutmanager is used to determine the format of the text display, and Nstextcontainer determines the scope of the text display. This can solve the problem of connection highlighting, underline, text mark, area display and so on, which is not helpful to this problem.

5, finally, the friend prompted a Uitextview method, Selectionrectsforrange, can get the CGRect of the selected string, so the problem was resolved.

This code means to get the last two words range of TextView and add a button on it to listen for click events.

This code is to add a transparent string after the user's spoken text, to participate in the height calculation, etc., note that the placeholder can not use numbers and spaces, you must use characters instead of spaces (mainly compatible with emoji expression).

For TextView, use the text that is displayed to calculate the width, and set the size of the TextView to be aware of:

A, when calculating textview text, the calculation width needs to be reduced by 8 than the width of the textview itself.

B, TextView height must be more than 2 * 8 extra height of text height

GitHub Address: Https://github.com/zhangmaliang/AddDeleteButton

A process of solving the problem of picture and text blending