• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# XComponent
2
3**XComponent** provides a surface for graphics rendering and media data input into your view. You can customize the position and size of the surface as needed.
4
5> **NOTE**
6>
7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> This topic describes only system APIs provided by the module. For details about its public APIs, see [XComponent](ts-basic-components-xcomponent.md).
10
11## APIs
12
13### XComponentOptions<sup>12+</sup>
14
15Defines the options of the **XComponent**.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters**
20
21| Name  | Type   | Mandatory| Description                  |
22| -------- | ------- | ---- | ---------------------- |
23| screenId<sup>17+</sup> | number | No| Associated screen ID of the component. The component can display the image of the associated screen. **System API**: This is a system API.|
24
25  > **NOTE**
26  >
27  > This attribute is effective only when **type** is set to **SURFACE**.
28  >
29  > It is not supported for **XComponent** components created using the [ArkUI NDK API](../../../ui/ndk-build-ui-overview.md).
30
31## Attributes
32
33### enableTransparentLayer<sup>18+</sup>
34
35enableTransparentLayer(enabled: boolean)
36
37Enables an independent layer for the **XComponent** component with a semi-transparent background color.
38
39Using this API does not necessarily mean that an independent layer will be set. Due to some reasons such as hardware specifications (for example, lack of hardware support for independent layer compositing) and software specifications (for example, intersection with UI elements that have blur effects), the attempt to set an independent layer may fail.
40
41To use this API effectively and avoid display issues, follow these guidelines:
42
431. If an **XComponent** with an independent layer overlaps with another **XComponent** below it, the **XComponent** below it should also be configured with an independent layer.
44
45![Transparent layer example](figures/Transparent_Layer_Example.png)
46
472. Do not place UI components under an **XComponent** with a transparent background and an independent layer. Otherwise, the displayed content of the UI components will disappear during composition.
48
49![Transparent layer failure](figures/Transparent_Layer_Failure.png)
50
51Ensure that **XComponent** components with independent layers are placed below all intersecting UI elements.
52
53![Transparent layer correctly set](figures/Transparent_Layer_Correct_Example.png)
54
553. Use this API in static layout scenarios, such as non-page transition or static video subtitle display scenarios.
56
57**System API**: This attribute can be used in system APIs since API version 18.
58
59**System capability**: SystemCapability.ArkUI.ArkUI.Full
60
61**Parameters**
62
63| Name  | Type    | Mandatory| Description                  |
64| ------- | ------- | ---- | ---------------------- |
65| enabled | boolean | Yes  | Whether to enable an independent layer for the **XComponent** component when its background is transparent.<br>The value **true** means to enable an independent layer, and **false** means the opposite.<br>Default value: **false**.|
66
67  > **NOTE**
68  >
69  > This attribute is effective only when **type** is set to **SURFACE**.
70  >
71  > It is not supported for **XComponent** components created using the [ArkUI NDK API](../../../ui/ndk-build-ui-overview.md).
72