Use uilabel to present images and text in different formats

1. You can use the bbcode flag.

[B] Bold [/B] Bold
[I] italic [/I] Italic
[U] underline [/u] underline
[S] strikethrough [/S] strikethrough
[Sub] sub [/sub] subscript
[Sup] Sup [/sup] superscript
[00ff00] Set color [-] Set display color

[Url = http://www.cnblogs.com/mrzivchu/][u] /u]#/url]

For example, set the color:

The text content of uilabel is: [99ff00] n [-] Gui: Tools

The display effect is:

Set the connection here:

Writing this in uilabel text alone is not enough: [url = http://www.cnblogs.com/mrzivchu/?#u=boke #/u=#/url] Link

Clicking will not produce results. We also need to add a collider and a script for this uilabel.

The script is as follows:

 

 void OnClick()    {        UILabel lbl = GetComponent<UILabel>();        string url = lbl.GetUrlAtPosition(UICamera.lastWorldPosition);        Application.OpenURL(url);    }

 

To trigger the onclick method in the script, you must add a collider!

Note that if the text content of uilabel is: please click [url = http://www.cnblogs.com/mrzivchu/#my blog /url#. welcome everyone to correct it!

I only want to click "my blog" to open the connection, rather than clicking any of the above words to open the connection. If the text size above is 700x40, the size of the four words "my blog" is 200x40. In this case, we can set the center and size attributes of collider to set the size of the clicked area to meet our needs, however, when I run the program, the center and size will automatically change to 700x40. The original uilabel widget has an option collider, this auto-adjust to match indicates that the large size of collider automatically matches the size of uilabel. We just need to cancel this check!

If you do not want to use bbcode, uilabel has an option for bbcode. If you do not select this option, it indicates that bbcode is not used.

2. Use Images

We only need to write: zwh :) In uilabel text, then a smiling face image will appear:

 

Why is it so amazing? The reason is that the font you selected is that the font I selected here is arimo20

Arimo20 has three associated files:

Type: TGA, prefab, txt

Click the prefab file and you can see it at uifont In the Inspector window.

Here we can see the familiar: smiling face. We click the emotion-Smile corresponding to the smiling face to show the smiling face image, which exists in the wooden Atlas Gallery, if we want to use other images, we can add the images we want to display to the wooden Atlas Gallery, and then fill in an agreed tag below, similar, select the image we want to display and add it. The image size should be 20x20 to ensure that the image and text are on the same horizontal line!

The text of uilabel is zwh (BIRD) zwh.

Shown:

Because my image is 60x60, it is different from the upper and lower of the text. This is why I suggest the image size is 20x20!

I also don't know if there is a bug.

Here, the Atlas we selected for uifont is wooden atlas, Sprite is arimo 20, and arimo 20 corresponds to the character format. If we click Sprite, all sprite genie contained in wooden Atlas will pop up. When we click arimo 14 or arimo 18, the uilabel with this arimo20 will be deformed:

Originally, it was like this:

 

Selecting arimo20 for Sprite will not be restored, but it will still be deformed!

Solution:

Click Import Data under uifont, that is, to import the TXT file in the three types (TGA, prefab, txt) associated with arimo20! So that the arimo character set format is restored!

In addition:

Uilabel also has a symbols option, which has three values: None, normal, and colored. If you select none, the image displayed in the format of :) will not be displayed. Select normal (default) the image will be displayed normally. If you select colored, the image will be overwritten by the color tint under uilabel! In fact, this color tint is used to color the text. Selecting colored means that the image is the same color as the text!

 

Use uilabel to present images and text in different formats