How to create custom attributes for a custom component that can be assigned from XML in HarmonyOS?

In HarmonyOS, creating custom attributes for custom components involves several key steps. HarmonyOS is a brand-new operating system developed by Huawei that supports multiple devices, including smartphones, tablets, and more. In HarmonyOS, custom components typically refer to specific functional or UI components created by developers based on their needs.

Step 1: Define Custom Attributes First, define the custom attributes in the XML file. Suppose we are creating a custom button and want to add a custom attribute for controlling the corner radius. We can create or modify the XML file in the element directory under the resources folder to define these attributes.

xml
<?xml version="1.0" encoding="utf-8"?>
<element name="CustomButton">
    <attr name="corner_radius" format="dimension"/>
</element>

Here, we define an attribute named corner_radius, and format="dimension" specifies that the value is a dimension type, such as dp or px.

Step 2: Read Attributes in the Custom Component Next, we need to read these attributes in the Java class of the custom component. Suppose our custom button class is named CustomButton, we need to read the corner_radius attribute in this class.

java
public class CustomButton extends Component {
    private float cornerRadius;

    public CustomButton(Context context, AttrSet attrSet) {
        super(context, attrSet);
        init(context, attrSet);
    }

    private void init(Context context, AttrSet attrSet) {
        // Default radius value
        cornerRadius = 0;

        // Read the attributes defined in XML
        if (attrSet.getAttr("corner_radius").isPresent()) {
            cornerRadius = attrSet.getAttr("corner_radius").get().getDimensionValue();
        }
    }

    @Override
    public void onDraw(Component component, Canvas canvas) {
        // Use cornerRadius to draw the rounded button
    }
}

In this example, we first set a default cornerRadius. Then, we check if the corner_radius attribute is defined in XML and update the cornerRadius value accordingly. Finally, we use this attribute value in the onDraw method to render the rounded button.

Step 3: Use Custom Attributes in Layout Files Finally, we need to use this custom attribute in the layout file. Suppose we have a layout file main_layout.xml:

xml
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:custom="http://schemas.huawei.com/res/custom"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">

    <CustomButton
        ohos:id="$+id:customButton"
        ohos:width="match_content"
        ohos:height="match_content"
        custom:corner_radius="16vp"/>
</DirectionalLayout>

Here, we declare the custom namespace using xmlns:custom="http://schemas.huawei.com/res/custom" and set the custom attribute custom:corner_radius="16vp".

This is the basic process for creating custom attributes for custom components in HarmonyOS. These custom attributes enable developers to flexibly extend component functionality and better meet design and user experience requirements.