preface

Many students in the work can meet the needs of text and text mix. However, there are several kinds of technical schemes to realize text and text mixing, and the corresponding schemes are different from each other. Today, I would like to share with you the technical scheme of text and text mixing and my choice.

Demo and parsing tools have been open-source on GitHub

Existing programs

  1. HtmlIn combination withWebView.
  2. usingCoreText, manual parsing manual layout.
  3. Third-party library, such as YYText

First, the advantages of the first solution are: for the client, the development difficulty and the amount of code is relatively small. It also allows you to do whatever you want, without having to worry about images, caching, and interaction. Disadvantages: The need to prepare the corresponding Html page, if the page involves permission verification, it is difficult to deal with, in addition, if the business scenario is complex, the optimization for performance and interaction takes more time.

The second scheme, through the original CoreText, enables us to take over the data management and interface layout display in the whole process of graphic typesetting. The advantages are: high degree of freedom, can show typesetting style, interaction mode, relatively high efficiency. The disadvantages are: large amount of code, need to build several wheels, and because there are many places to pay attention to, such as: image cache, typesetting interaction, etc., the development cycle will be long, and the front and back end data interaction format also need to cooperate with each other.

The third scheme, which saves the time of building wheels and can focus on typesetting and optimization, is also adopted by the author.

The main process

To get the data

In the process of data acquisition, the focus is on the data format of the front and back end. This step directly affects the subsequent work of parsing the data. According to service requirements, specific data rules need to be designed and data is transferred to mobile terminals according to preset design rules. In this session, the team decided to go straight to the Html data rules. The advantage of doing this is that it is a mature set of rules that do not require us to set up complex rules for complex layouts, which are easy to maintain later, and more user-friendly for the back end, requiring less time to reprocess the data.

Such as

67" height="21" src="http://xxx.xxx/xxxxxxx.gif" align="absmiddleThe characteristic equation of "/> is ______.
"
Copy the code

Parse data & data cache

In the process of data parsing, all you need to do is to parse the obtained data according to the agreed rules in advance. Of course, caching of data content can also be done before parsing. The advantage of data caching before data parsing is that the data parsing and data caching can be carried out in parallel through multi-threading, which is high efficiency. The disadvantage is that when data is taken out for reuse in the future, it needs to run the parsing process again.

My analytical thinking is roughly: through regular find text in the first photo, after processing, such as image scaling, joining together the address, etc., to use NSMutableAttributedString constructor, generate NSMutableAttributedString, resolution to this data has been basically completed.

+ (NSMutableAttributedString *)outputAttributedString:(NSString *)html{
    NSData *data = [html dataUsingEncoding:NSUTF8StringEncoding];
    NSMutableAttributedString * mutAttributedStr = [[NSMutableAttributedString alloc] initWithAttributedString:[[NSAttributedString alloc] initWithData:data options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType.NSCharacterEncodingDocumentAttribute: @ (NSUTF8StringEncoding)} documentAttributes:NULL error:nil]].return mutAttributedStr;
}
Copy the code

YYText

At this point, it’s all about using the interfaces and classes provided by YYText for layout. What I do is to construct an inherited one from YYTextAttachment, replace the part of the image found in the data processed in the previous step with YYTextAttachment, and present the image to YYTextAttachment. And YYTextAttachment can accept Content of UIImageView type, so it can directly use SDWebImage to do image caching. And you can easily add click events in UIImageView. In addition, YYTextLayout can flexibly realize the layout we want.

conclusion

The webView approach is suitable for pages with both lightweight and simple business requirements and is flexible.

The CoreText approach is suitable for more complex business scenarios and longer development times.

YYText is undoubtedly an excellent open source component for most business needs.

There are many ways to mix text and text. The technical scheme shared with you may not be suitable for you. I hope it can provide some inspiration for you when you do technical selection.