AWRichText

Based on CoreText, object-oriented, minimalist, easy to use, efficient, support precise click, UIView mix, GIF GIF, is not only limited to text mix rich text typesetting magic.

Code address: https://github.com/hardman/AWRichText – like classmates can star.

Some implementation details will be updated in the blog.

The paper

Many apps have chat function, text and text mix is also a common requirement.

The iOS native class NSAttributedString supports text and text blending. Many applications use it to implement their own functions.

However, there are many disadvantages to using it directly, including the following:

  1. It’s hard to use, it has so many attributes, and it uses dictionary construction, so you have to look up the documentation every time you use it. Let alone use it on a large scale
  2. Gifs are not supported
  3. Local precise clicking is not supported
  4. UIView mixed with text is not supported

AWRichText solves these problems completely, with the following features:

  1. Draw based on NSAttributedString+CoreText
  2. Object-oriented + chain operation, without memorizing various attribute names can quickly generate various text effects
  3. Support GIF and any UIView text and text mix
  4. Support for precise clicking

AWRichText is a tool that allows you to use it on a large scale in your projects, not just in graphics.

It is suitable for scenarios such as Text + text, image + text, component (UIView and its subclasses) + text.

Therefore can appear in: document layout, chat layout, list display, advertising copywriting and other locations.

Function demonstration

The Demo in the figure (download the Github code directly to run) contains four parts:

  • The first part shows the function of mixing text and text. Shows text styles, UIView(a button with nowhere to put it) mixed up, precise clicks (blue and purple font), and GIFs (dragons).
  • The second part shows you more ways to use rich text. Can be used in any avatar + nickname list, saving the trouble of dynamically creating UIImageView and UILabel.
  • The third part shows a simple mock betta chat function. Shows how to create complex rich text and get rich text size.
  • The fourth part shows the single line layout function of pure UIView: the need for horizontal layout of buttons is very useful, and clicking the “Open DebugFrame” button will trigger the wireframe mode, which can see the position and size of each text.

All elements in the Demo are constructed using AWRichText.

Method of use

1. Import files directly

Drag the “RichText” folder in your code directly into your project. Import header file “awrichtext. h” to use.

2. Use the pod

Add to your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'

target 'TargetName' do
pod 'AWRichText'.'- >' 1.0.1
end
Copy the code

Then run the following command:

pod install
Copy the code

Basic usage

#include "AWRichText.h"



.

.



AWRichText *richText = [[AWRichText alloc] init];

    

// Create the red text hello. The text types text and font are mandatory.

AWRTTextComponent *rTextComp = [[AWRTTextComponent alloc] init]

.AWText(@"hello")

.AWColor([UIColor redColor])

.AWFont([UIFont systemFontOfSize:12])

.AWPaddingRight(@1);

[richText addComponent: rTextComp];

    

// Create the blue text world

AWRTTextComponent *bTextComp = [[AWRTTextComponent alloc] init]

.AWText(@" world")

.AWColor([UIColor blueColor ])

.AWFont([UIFont systemFontOfSize:12])

.AWPaddingRight(@1);

[richText addComponent:bTextComp];

    

// Create a picture and set the image type to font, otherwise the display may be abnormal

AWRTImageComponent *imgComp = [[AWRTImageComponent alloc] init]

.AWImage([UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"fengtimo.jpg" ofType:nil]])

.AWFont([UIFont systemFontOfSize:12])

.AWBoundsDepend(@(AWRTAttchmentBoundsDependFont))

.AWAlignment(@(AWRTAttachmentAlignCenter))

.AWPaddingRight(@1);

[richText addComponent:imgComp];

    

/ / create a UIButton

UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 120, 22)];

btn.titleLabel.font = [UIFont systemFontOfSize:12];

[BTN setTitle: @ "this is a button" forState: UIControlStateNormal];

[btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

[btn setTitleColor:[UIColor colorWithRed:170.f/255 green:170.f/255 blue:170.f/255 alpha:1] forState:UIControlStateHighlighted];

[btn setBackgroundColor:[UIColor colorWithRed:1 green:184.f/255 blue:0 alpha:1]];

btn.layer.cornerRadius = 5;

btn.layer.borderWidth = 1/[UIScreen mainScreen].scale;

btn.layer.borderColor = [UIColor colorWithRed:201.f/255 green:201.f/255 blue:201.f/255 alpha:1].CGColor;



// Create a ViewComponent based on button. Set font to View type

/ / AWRTxxxComponent components also can take from the Pool and direct call addComponentFromPoolWithType: method.

// This method is suitable for AWRichText components with frequent changes.

// In normal cases, use alloc init.

((AWRTViewComponent *)[richText addComponentFromPoolWithType:AWRTComponentTypeView])

.AWView(btn)

.AWFont([UIFont systemFontOfSize:12])

.AWBoundsDepend(@(AWRTAttchmentBoundsDependContent))

.AWAlignment(@(AWRTAttachmentAlignCenter));



// Create a label, AWRichTextLabel is a subclass of UILabel

AWRichTextLabel *awLabel = [richText createRichTextLabel];

// Be sure to set the rtFrame property, which will automatically calculate the size of the frame

// If the width is non-0 and the height is 0, the height is adaptive. In addition, if the width is too large to exceed the text content, the resulting width is still the text content width.

// A width of 0 indicates a single line.

// The system attribute numberOfLines is invalid

awLabel.rtFrame = CGRectMake(100, 100, 100, 0);

    

AwLabel. BackgroundColor = [UIColor colorWithRed:0.9f green:0.9f blue:0.9f alpha:1];

    

[superView addSubview:awLabel];

.

.



Copy the code

The above code effect:

RtFrame CGRectMake(100,100,100,0)

2. When rtFrame is CGRectMake(100,100,1000,0) :

For other usage and effect realization, see Github demo.