Download the attachment

We’ve already written an example of a custom component in HarmonyOS that uses the DrawTask interface to draw on a Canvas.

In the previous case post, someone asked me how to implement custom properties. Now this post is dedicated to custom properties and encapsulates a very useful TitleBar through custom properties

Without further ado, first the renderings

The background of the title bar, title text, size, color, whether buttons on the left and right are displayed as ICONS or text, and whether they are displayed are customized respectively. Later users can achieve the desired effect by combining several simple user-defined attributes.

To do this, create a HarmonyOS Library module myCustomtitlebar and add a layout_titlebar.xml layout

<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_content" ohos:width="match_parent"> <Button ohos:id="$+id:title_bar_left" ohos:height="match_content" ohos:width="match_content" ohos:align_parent_start="true" ohos:left_padding="5vp" ohos:min_height="45vp" ohos:min_width="45vp" ohos:text_size="14fp" ohos:vertical_center="true"/> <Text ohos:id="$+id:titleText" ohos:height="match_content" ohos:width="match_content" ohos:center_in_parent="true" ohos:multiple_lines="false" ohos:text_size="17fp"/> <Button ohos:id="$+id:title_bar_right" ohos:height="match_content" ohos:width="match_content" ohos:align_parent_end="true" ohos:left_padding="5vp" ohos:min_height="45vp" ohos:min_width="45vp" ohos:right_margin="5vp" ohos:text_size="14fp" ohos:vertical_center="true"/> </DependentLayout>Copy the code

Then create a custom component class, CustomTitleBar, as follows:

package com.xdw.mycustomtitlebar; import ohos.agp.components.*; import ohos.agp.utils.Color; import ohos.app.Context; import ohos.hiviewdfx.HiLog; import ohos.hiviewdfx.HiLogLabel; /** * Created by cet3/3/4 10:01 */ Public Class CustomTitleBar extends ComponentContainer {private static final String TAG = "CustomTitleBar"; private static final HiLogLabel LABEL = new HiLogLabel(HiLog.DEBUG, 0, "TAG"); public CustomTitleBar(Context context) { super(context); } public CustomTitleBar(Context context, AttrSet attrSet) { super(context, attrSet); / / dynamic loading layout Component Component. = LayoutScatter getInstance (context). The parse (ResourceTable Layout_layout_titlebar, null, false); Button leftBtn = (Button) component.findComponentById(ResourceTable.Id_title_bar_left); Text titleText = (Text) component.findComponentById(ResourceTable.Id_titleText); Button rightBtn = (Button) component.findComponentById(ResourceTable.Id_title_bar_right); // Add layout to the parent component addComponent(Component); If (attrset-getattr ("bg_color").ispresent ()){// Handle TitleBar background color if(attrset-getattr ("bg_color").ispresent ()){ component.setBackground(attrSet.getAttr("bg_color").get().getElement()); }else{ HiLog.error(LABEL,"attr bg_color is not present"); component.setBackground(getBackgroundElement()); If (attrset.getattr ("title_text").ispresent ()){ titleText.setText(attrSet.getAttr("title_text").get().getStringValue()); }else { HiLog.error(LABEL,"attr title_text is not present"); titleText.setText(""); If (attrset.getattr ("title_size").ispresent ()){ titleText.setTextSize(attrSet.getAttr("title_size").get().getIntegerValue(), Text.TextSizeType.FP); }else { HiLog.error(LABEL,"attr title_size is not present"); } // Handle the title color if(attrset.getattr ("title_color").ispresent ()){ titleText.setTextColor(attrSet.getAttr("title_color").get().getColorValue()); }else{ HiLog.error(LABEL,"attr title_color is not exist"); titleText.setTextColor(Color.BLACK); If (attrset.getattr ("left_button_visible").ispresent ()){if(attrset.getattr ("left_button_visible"). if(attrSet.getAttr("left_button_visible").get().getBoolValue()){ leftBtn.setVisibility(VISIBLE); }else{ leftBtn.setVisibility(INVISIBLE); }}else{// Hilog. error(LABEL,"attr right_button_visible is not exist"); leftBtn.setVisibility(VISIBLE); If (attrset.getattr ("left_button_icon").ispresent ()){attrset.getattr ("left_button_icon"). leftBtn.setAroundElements(attrSet.getAttr("left_button_icon").get().getElement(),null,null,null); }else{ HiLog.error(LABEL,"attr left_button_icon is not exist"); } // Process the text of the left button if(attrset.getattr ("left_button_text").ispresent ()){ leftBtn.setText(attrSet.getAttr("left_button_text").get().getStringValue()); }else{ HiLog.error(LABEL,"attr left_button_text is not exist"); If (attrset.getattr ("left_button_text_color").ispresent ()){ leftBtn.setTextColor(attrSet.getAttr("left_button_text_color").get().getColorValue()); }else{ HiLog.error(LABEL,"attr left_button_text_color is not exist"); } // Handle the text size of the left button if(attrset.getattr ("left_button_text_size").ispresent ()){ leftBtn.setTextSize(attrSet.getAttr("left_button_text_size").get().getIntegerValue(),Text.TextSizeType.FP); }else{ HiLog.error(LABEL,"attr left_button_text_size is not exist"); If (attrset.getattr ("right_button_visible").isPresent()){ if(attrSet.getAttr("right_button_visible").get().getBoolValue()){ rightBtn.setVisibility(VISIBLE); }else{ rightBtn.setVisibility(INVISIBLE); }}else{// Hilog. error(LABEL,"attr right_button_visible is not exist"); rightBtn.setVisibility(VISIBLE); If (attrset.getattr ("right_button_icon").ispresent ()){ rightBtn.setAroundElements(attrSet.getAttr("right_button_icon").get().getElement(),null,null,null); }else{ HiLog.error(LABEL,"attr right_button_icon is not exist"); } // Process the text of the right button if(attrset.getattr ("right_button_text").ispresent ()){ rightBtn.setText(attrSet.getAttr("right_button_text").get().getStringValue()); }else{ HiLog.error(LABEL,"attr right_button_text is not exist"); } // Handle the text color of the right button if(attrset.getattr ("right_button_text_color").ispresent ()){ rightBtn.setTextColor(attrSet.getAttr("right_button_text_color").get().getColorValue()); }else{ HiLog.error(LABEL,"attr right_button_text_color is not exist"); If (attrset.getattr ("right_button_text_size").ispresent ()){ rightBtn.setTextSize(attrSet.getAttr("right_button_text_size").get().getIntegerValue(),Text.TextSizeType.FP); }else{ HiLog.error(LABEL,"attr right_button_text_size is not exist"); } } public CustomTitleBar(Context context, AttrSet attrSet, String styleName) { super(context, attrSet, styleName); }}Copy the code

This implementation process is somewhat similar to Android, but with a key difference: there is no register-styleable in the attrs. XML file that Android uses for custom attributes. The custom attribute is obtained using the attrset.getattr code. Check whether the attribute exists when obtaining it

attrSet.getAttr(“bg_color”).isPresent()

At this point, the custom component is complete, and we use Gradle to package it into HAR packages

After the packaging is complete, a HAR package is generated in output, as follows

Then import the HAR package into the liBS directory of your own test project, and you can call the customized components in it, as shown below

The layout code of the test project is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" xmlns:xdw="http://schemas.huawei.com/res/ohos-auto"  ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <com.xdw.mycustomtitlebar.CustomTitleBar ohos:height="match_content" ohos:width="match_parent" xdw:bg_color="$color:blue" xdw:left_button_visible="false" xdw:right_button_visible="false" xdw:title_size="18" XDW: title_text = "this is the custom property title" / > < com. XDW. Mycustomtitlebar. CustomTitleBar ohos: height = "45 vp ohos:" width = "match_parent" ohos:top_margin="10vp" xdw:bg_color="$color:blue" xdw:left_button_icon="$media:left" xdw:right_button_icon="$media:add" XDW: title_color = "$color: white" XDW: title_size = "20" XDW: title_text = "heading 1" / > < com. XDW. Mycustomtitlebar. CustomTitleBar ohos:height="45vp" ohos:width="match_parent" ohos:top_margin="10vp" xdw:bg_color="$color:red" xdw:left_button_icon="$media:left" xdw:right_button_visible="false" xdw:title_color="$color:white" xdw:title_size="20" XDW: title_text = "heading 2" / > < com. XDW. Mycustomtitlebar. CustomTitleBar ohos: height = "45 vp ohos:" width = "match_parent" ohos:top_margin="10vp" xdw:bg_color="$color:red" xdw:left_button_visible="false" xdw:right_button_icon="$media:add" XDW: title_color = "$color: white" XDW: title_size = "20" XDW: title_text = "title" / > < com. XDW. Mycustomtitlebar. CustomTitleBar ohos:height="45vp" ohos:width="match_parent" ohos:top_margin="10vp" xdw:bg_color="$color:green" XDW :left_button_text=" left "XDW :left_button_text_color=" red" XDW :right_button_icon="$media:add" XDW: title_color = "$color: white" XDW: title_size = "20" XDW: title_text = "title 4" / > < com. XDW. Mycustomtitlebar. CustomTitleBar ohos:height="45vp" ohos:width="match_parent" ohos:top_margin="10vp" xdw:bg_color="$color:green" XDW :left_button_text=" left "XDW :left_button_text_color=" red" XDW :right_button_text=" right" XDW :right_button_text_color="$color:red" XDW :title_color="$color:white" XDW :title_size="20" XDW :title_text=" title 4"/> </DirectionalLayout>Copy the code

When making calls in the layout file, you need to define a custom XML namespace to invoke custom attributes. This namespace name and scheme can be specified arbitrarily. For example, in my case, the namespace name is XDW, and the corresponding scheme is”Schemas.huawei.com/res/ohos-au…”

Finally, the operational renderings are the renderings at the beginning of this article. There is no HarmonyOS blog about custom attributes on the web, so I researched and published this blog in the hope that it can help.

Download the attachment

Author: Isutong Xia Dewang

For more information, visit Harmonyos.51cto.com, a collaboration between 51CTO and Huawei