通过一个HarmonyOS中自定义组件的案例，主要讲解了DrawTask接口的使用，方便我们调用Canvas进行绘制。在之前的案例贴中，有人回复问我如何实现自定义属性。现在本帖专门介绍自定义属性，同时通过自定义属性封装了一个非常实用的标题栏TitleBar。话不多说，首先上图效果图：这里主要是标题栏的背景，标题文字，大小，颜色，左右两侧的按钮是图标显示还是文字显示，是否是否显示已单独定制。后期用户只需要通过几个简单的自定义属性配置就可以组合起来达到自己想要的效果。具体实现思路如下。首先，创建HarmonyOSLibrary模块mycustomtitlebar，并在其中添加布局layout_titlebar.xml。代码如下：然后创建一个自定义组件对应的类CustomTitleBar，代码如下：.Context;importohos.hiviewdfx.HiLog;importohos.hiviewdfx.HiLogLabel;/***创建者夏德旺于2021/3/410:01*/publicclassCustomTitleBarextendsComponentContainer{privatestaticfinalStringTAG="CustomTitleBar";privatestaticfinalHiLogLabelLABEL=newHiLog"Label(HiLog0,DEBUG",publicCustomTitleBar(Contextcontext){super(context);}publicCustomTitleBar(Contextcontext,AttrSetattrSet){super(context,attrSet);//动态加载layoutComponentcomponent=LayoutScatter.getInstance(context).parse(ResourceTable.Layout_layout_titlebar,null,false);ButtonleftBtn=(Button)component.findComponentById(ResourceTable.Id_title_bar_left);TexttitleText=(Text)component.findComponentById(ResourceTable.Id_titleText);ButtonrightBtn=(Button)component.findComponentById(ResourceTable.Id_title_bar_right);//添加layout到父组件addComponent(component);//处理TitleBar背景色if(attrSet.getAttr("bg_color").isPresent()){component.setBackground(attrSet.getAttr("bg_color").get().getElement());}else{HiLog.error(LABEL,"attrbg_colorisnotpresent");component.setBackground(getBackgroundElement());}//处理标题文字if(attrSet.getAttr("title_text").isPresent()){titleText.setText(attrSet.getAttr("title_text").get().getStringValue());}else{HiLog.error(LABEL,"attrtitle_textisnotpresent");titleText.setText("");}//处理标题大小if(attrSet.getAttr("title_size").isPresent()){titleText.setTextSize(attrSet.getAttr("title_size").get().getIntegerValue(),Text.TextSizeType.FP);}else{HiLog.error(LABEL,"attrtitle_sizeisnotpresent");}//处理标题颜色getColorValue());}else{HiLog.error(LABEL,"attrtitle_colorisnotexist");titleText.setTextColor(Color.BLACK);}//处理左键//获取是否显示左键if(attrSet.getAttr("left_button_visible").isPresent()){if(attrSet.getAttr("left_button_visible").get().getBoolValue()){leftBtn.setVisibility(VISIBLE);}else{leftBtn.setVisibility(INVISIBLE);}}else{//默认显示HiLog.error(LABEL,"attrright_button_visibleisnotexist");leftBtn.setVisibility(VISIBLE);}//处理左键的图标if(attrSet.getAttr("left_button_icon").isPresent()){leftBtn.setAroundElements(attrSet.getAttr("left_button_icon").get().getElement(),null,null,null);}else{HiLog.error(LABEL,"attrleft_button_iconisnotexist");}//处理左边的文字按钮if(attrSet.getAttr("left_button_text").isPresent()){leftBtn.setText(attrSet.getAttr("left_button_text").get().getStringValue());}else{HiLog.error(LABEL,"attrleft_button_textisnotexist");}//处理左边侧边按钮文本颜色,"attrleft_button_text_colorisnotexist");}//处理左键的文字大小getIntegerValue(),Text.TextSizeType.FP);}else{HiLog.error(LABEL,"attrleft_button_text_sizeisnotexist");}//处理右键//获取是否显示右键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,"attrright_button_visibleisnotexist");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,"attrright_button_iconisnotexist");}//处理右键的文字if(attrSet.getAttr("right_button_text").isPresent()){rightBtn.setText(attrSet.getAttr("right_button_text").get().getStringValue());}else{HiLog.error(LABEL,"attrright_button_textisnotexist");}//处理文本右边的按钮颜色,"attrright_button_text_colorisnotexist");}//处理右键的文字大小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,"attrright_button_text_sizeisnotexist");}}publicCustomTitleBar(Contextcontext,AttrSetattrSet,StringstyleName){super(context,attrSet,styleName);}}这里的实现过程和Android有些类似，但是有一个核心区别就是Android中自定义属性使用的attrs.xml文件中没有declare-styleable函数，这里的自定义属性主要是通过attrSet.getAttr代码获取，获取的时候记得判断属性是否存在，判断api如下：attrSet.getAttr("bg_color").isPresent()至此，自定义组件就完成了，接下来我们使用gradle将其打包成一个HAR包。打包完成后，输出中会生成一个har包，如下：然后将这个har包导入到自己测试工程的libs目录下，就可以调用里面的自定义组件了，如下：布局代码测试项目如下：在布局文件中调用时，需要自定义一个xml命名空间来调用自定义属性，大家可以使用这个命名空间名称和scheme在指定比如这里的命名空间名称是xdw，后面对应的scheme是“http://schemas.huawei.com/res/ohos-auto”最后运行效果图就是本文开头的效果图文章目前网上确实没有HarmonyOS关于自定义属性的博客，所以研究并发表了这篇博客，希望对大家有所帮助。更多信息请访问：Harmonyos.51cto.com，与华为官方合作打造的鸿蒙技术社区
