1# Drawing and Displaying Text in Text Components 2Some frameworks or applications have their own text layout capabilities, which are integrated into the ArkGraphics2D text engine during porting. To avoid the need for redeveloping text components, the **Text** component provides the [NODE_TEXT_CONTENT_WITH_STYLED_STRING](../../application-dev/reference/apis-arkui/_ark_u_i___native_module.md) API, which can directly render text generated by the Ark text engine. 3 4The following, based on the [Integrating with ArkTS Pages](../ui/ndk-access-the-arkts-page.md) section, explains how to create text engine text and use the **Text** component for rendering and display. 5 6> **NOTE** 7> 8> For APIs involving the font engine, add **target_link_libraries(entry PUBLIC libnative_drawing.so)** to **CMakeLists.txt**; otherwise, a linking error will occur. 9 10## Creating a Text Component 11 12Since text styles are set through font engine APIs, there is no need to configure style attributes such as text color and font size when creating a **Text** component. However, basic universal attributes such as width and height still need to be set. 13```c++ 14ArkUI_NativeNodeAPI_1 *nodeApi = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>( 15 OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")); 16if (nodeApi == nullptr) { 17 return; 18} 19ArkUI_NodeHandle text = nodeApi->createNode(ARKUI_NODE_TEXT); 20// Set the width. 21ArkUI_NumberValue textWidth[] = {{.f32 = 300}}; 22ArkUI_AttributeItem textWidthItem = {.value = textWidth, .size = 1}; 23nodeApi->setAttribute(text, NODE_WIDTH, &textWidthItem); 24// Set the height. 25ArkUI_NumberValue textHeight[] = {{.f32 = 100}}; 26ArkUI_AttributeItem textHeightItem = {.value = textHeight, .size = 1}; 27nodeApi->setAttribute(text, NODE_HEIGHT, &textHeightItem); 28``` 29## Setting Paragraph and Text Styles 30 31- Setting the Paragraph Style 32 33 The paragraph style defines the overall attributes of a paragraph of text, such as the maximum number of display lines and text direction. The following code example sets text centering and a maximum line limit of 10. 34 35 > **NOTE** 36 > 37 > The **OH_Drawing_** prefixed APIs are provided by the Ark text engine. 38 ```c++ 39 OH_Drawing_TypographyStyle *typographyStyle = OH_Drawing_CreateTypographyStyle(); 40 OH_Drawing_SetTypographyTextAlign(typographyStyle, OH_Drawing_TextAlign::TEXT_ALIGN_CENTER); 41 OH_Drawing_SetTypographyTextMaxLines(typographyStyle, 10); 42 ``` 43- Setting the Text Style 44 45 Different text contents can have different text styles, but the following three APIs must be called in the specified order; otherwise, they will not take effect. 46 47 1. **OH_ArkUI_StyledString_PushTextStyle**: pushes the text style onto the stack. 48 2. **OH_ArkUI_StyledString_AddText**: adds the text content to which the style will be applied. 49 3. **OH_ArkUI_StyledString_PopTextStyle**: pops the text style from the stack. 50 51 > **NOTE** 52 > 53 > The **OH_ArkUI_StyledString_** prefixed APIs are provided by the **Text** component. 54 > 55 > The **OH_Drawing_** prefixed APIs are provided by the Ark text engine. 56 57 Create a text style with **OH_Drawing_CreateTextStyle**. Set the font size of **"Hello"** to 28 px and the color to **0xFF707070**. Set the font size of **"World!"** to 28 px and the color to **0xFF2787D9**. 58 ```c++ 59 ArkUI_StyledString *styledString = OH_ArkUI_StyledString_Create(typographyStyle,OH_Drawing_CreateFontCollection()); 60 61 OH_Drawing_TextStyle *helloStyle = OH_Drawing_CreateTextStyle(); 62 // Set the font size. 63 OH_Drawing_SetTextStyleFontSize(helloStyle, 28); 64 // Set the color 65 OH_Drawing_SetTextStyleColor(helloStyle, OH_Drawing_ColorSetArgb(0xFF, 0x70, 0x70, 0x70)); 66 OH_ArkUI_StyledString_PushTextStyle(styledString, helloStyle); 67 OH_ArkUI_StyledString_AddText(styledString, "Hello"); 68 OH_ArkUI_StyledString_PopTextStyle(styledString); 69 70 OH_Drawing_TextStyle *worldTextStyle = OH_Drawing_CreateTextStyle(); 71 OH_Drawing_SetTextStyleFontSize(worldTextStyle, 28); 72 OH_Drawing_SetTextStyleColor(worldTextStyle, OH_Drawing_ColorSetArgb(0xFF, 0x27,0x87, 0xD9)); 73 OH_ArkUI_StyledString_PushTextStyle(styledString, worldTextStyle); 74 OH_ArkUI_StyledString_AddText(styledString, "World!"); 75 OH_ArkUI_StyledString_PopTextStyle(styledString); 76 ``` 77## Adding a Placeholder 78A placeholder reserves a blank area of a specified size in the middle of text. No text is drawn in this area, but it still participates in text layout measurement. Therefore, its size affects text typesetting. 79> **NOTE** 80> 81> The relative position of the placeholder and text is determined by the execution order of **OH_ArkUI_StyledString_AddPlaceholder**. 82 83```c++ 84OH_Drawing_PlaceholderSpan placeHolder{ 85 .width = 100, 86 .height = 100, 87}; 88OH_ArkUI_StyledString_AddPlaceholder(styledString, placeHolder); 89``` 90## Implementing Text Layout and Drawing 91- Text Layout 92 93 After setting the text style and content, call the text engine API **OH_Drawing_TypographyLayout** to lay out the text, and pass in a specified width representing the maximum value for the text. 94 95 > **NOTE** 96 > 97 > Text that has not been laid out is not displayed. 98 99 ```c++ 100 OH_Drawing_Typography *typography = OH_ArkUI_StyledString_CreateTypography(styledString); 101 OH_Drawing_TypographyLayout(typography, 400); 102 ``` 103 104- Text Drawing 105 106 Text drawing is completed through interaction between the text engine and graphics, requiring no additional settings. The **Text** component will call the text engine drawing API when the component triggers drawing under the ArkUI rendering mechanism. Here, only the created **StyledString** object needs to be passed to the created **Text** component. 107 ```c++ 108 ArkUI_AttributeItem styledStringItem = {.object = styledString}; 109 nodeApi->setAttribute(text, NODE_TEXT_CONTENT_WITH_STYLED_STRING, &styledStringItem); 110 ``` 111 112## Destroying an Object 113 114The **Text** component does not manage the lifecycle of any objects involved in this process. You are responsible for this. 115 116The text engine APIs involved all have corresponding destruction methods. 117 118**OH_Drawing_DestroyTextStyle(OH_Drawing_TextStyle *style)**: destroys the text style object. 119 120**OH_Drawing_DestroyTypographyStyle(OH_Drawing_TypographyStyle *style)**: destroys the paragraph style object. 121 122The **Text** component provides **OH_ArkUI_StyledString_Destroy** to destroy the styled string object. 123 124## Sample 125```c++ 126void CreateNativeNode() { 127 ArkUI_NativeNodeAPI_1 *nodeApi = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>( 128 OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")); 129 if (nodeApi == nullptr) { 130 return; 131 } 132 // Create a Column container component. 133 ArkUI_NodeHandle column = nodeApi->createNode(ARKUI_NODE_COLUMN); 134 ArkUI_NumberValue colWidth[] = {{.f32 = 300}}; 135 ArkUI_AttributeItem widthItem = {.value = colWidth, .size = 1}; 136 nodeApi->setAttribute(column, NODE_WIDTH, &widthItem); 137 // Create a Text component. 138 ArkUI_NodeHandle text = nodeApi->createNode(ARKUI_NODE_TEXT); 139 ArkUI_NumberValue textWidth[] = {{.f32 = 300}}; 140 ArkUI_AttributeItem textWidthItem = {.value = textWidth, .size = 1}; 141 nodeApi->setAttribute(text, NODE_WIDTH, &textWidthItem); 142 143 ArkUI_NumberValue textHeight[] = {{.f32 = 100}}; 144 ArkUI_AttributeItem textHeightItem = {.value = textHeight, .size = 1}; 145 nodeApi->setAttribute(text, NODE_HEIGHT, &textHeightItem); 146 147 ArkUI_NumberValue borderWidth[] = {{.f32 = 1}}; 148 ArkUI_AttributeItem borderWidthItem = {.value = borderWidth, .size = 1}; 149 nodeApi->setAttribute(text, NODE_BORDER_WIDTH, &borderWidthItem); 150 151 // typographyStyle represents the paragraph style. 152 OH_Drawing_TypographyStyle *typographyStyle = OH_Drawing_CreateTypographyStyle(); 153 // Center the text. 154 OH_Drawing_SetTypographyTextAlign(typographyStyle, OH_Drawing_TextAlign::TEXT_ALIGN_CENTER); 155 OH_Drawing_SetTypographyTextMaxLines(typographyStyle, 10); 156 ArkUI_StyledString *styledString = OH_ArkUI_StyledString_Create(typographyStyle, OH_Drawing_CreateFontCollection()); 157 // Create a text style and set the font and color. 158 OH_Drawing_TextStyle *textStyle = OH_Drawing_CreateTextStyle(); 159 OH_Drawing_SetTextStyleFontSize(textStyle, 28); 160 OH_Drawing_SetTextStyleColor(textStyle, OH_Drawing_ColorSetArgb(0xFF, 0x70, 0x70, 0x70)); 161 // The setting order of text styles matters. 162 OH_ArkUI_StyledString_PushTextStyle(styledString, textStyle); 163 OH_ArkUI_StyledString_AddText(styledString, "Hello"); 164 OH_ArkUI_StyledString_PopTextStyle(styledString); 165 // Insert a 100 x 100 placeholder between "Hello" and "World!" 166 OH_Drawing_PlaceholderSpan placeHolder{ 167 .width = 100, 168 .height = 100, 169 }; 170 OH_ArkUI_StyledString_AddPlaceholder(styledString, &placeHolder); 171 OH_Drawing_TextStyle *worldTextStyle = OH_Drawing_CreateTextStyle(); 172 OH_Drawing_SetTextStyleFontSize(worldTextStyle, 28); 173 OH_Drawing_SetTextStyleColor(worldTextStyle, OH_Drawing_ColorSetArgb(0xFF, 0x27, 0x87, 0xD9)); 174 OH_ArkUI_StyledString_PushTextStyle(styledString, worldTextStyle); 175 OH_ArkUI_StyledString_AddText(styledString, "World!"); 176 OH_ArkUI_StyledString_PopTextStyle(styledString); 177 OH_Drawing_Typography *typography = OH_ArkUI_StyledString_CreateTypography(styledString); 178 OH_Drawing_TypographyLayout(typography, 400); 179 ArkUI_AttributeItem styledStringItem = {.object = styledString}; 180 nodeApi->setAttribute(text, NODE_TEXT_CONTENT_WITH_STYLED_STRING, &styledStringItem); 181 182 OH_ArkUI_StyledString_Destroy(styledString); 183 // Add Text as a child component of Column. 184 nodeApi->addChild(column, text); 185 // Add Column as a child component of XComponent. 186 OH_NativeXComponent_AttachNativeRootNode(xComponent, column); 187} 188``` 189 190 191<!--no_check-->
