文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

通过鸿蒙自定义属性,来创造一个可以为所欲为的自定义标题组件

2024-12-03 10:08

关注

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

之前已经写过一个在HarmonyOS中的自定义组件的案例,里面主要讲解了DrawTask这个接口的使用,从而让我们可以调用Canvas进行绘制。

在之前的案例帖子中,有人回复问我如何实现自定义属性,现在这篇专门针对自定义属性写一篇帖子,同时通过自定义属性自己封装了一个非常实用的栏TitleBar

不多说,首先上效果图:

这里主要真多栏的背景,文字、大小、颜色,左右两侧按钮是图标显示还是文字显示、是否显示分别进行了定制,后期用户使用只需要通过几个简单自定义属性的配置即可组合实现自己想要的效果。

具体实现思路如下,首先创建一个HarmonyOS Library模块mycustomtitlebar,在里面添加一个布局layout_titlebar.xml,代码如下:

  1. "1.0" encoding="utf-8"?> 
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.     ohos:height="match_content" 
  4.     ohos:width="match_parent"
  5.  
  6.     
  7.         ohos:id="$+id:title_bar_left" 
  8.         ohos:height="match_content" 
  9.         ohos:width="match_content" 
  10.         ohos:align_parent_start="true" 
  11.         ohos:left_padding="5vp" 
  12.         ohos:min_height="45vp" 
  13.         ohos:min_width="45vp" 
  14.         ohos:text_size="14fp" 
  15.         ohos:vertical_center="true"/> 
  16.  
  17.     
  18.         ohos:id="$+id:titleText" 
  19.         ohos:height="match_content" 
  20.         ohos:width="match_content" 
  21.         ohos:center_in_parent="true" 
  22.         ohos:multiple_lines="false" 
  23.         ohos:text_size="17fp"/> 
  24.  
  25.     
  26.         ohos:id="$+id:title_bar_right" 
  27.         ohos:height="match_content" 
  28.         ohos:width="match_content" 
  29.         ohos:align_parent_end="true" 
  30.         ohos:left_padding="5vp" 
  31.         ohos:min_height="45vp" 
  32.         ohos:min_width="45vp" 
  33.         ohos:right_margin="5vp" 
  34.         ohos:text_size="14fp" 
  35.         ohos:vertical_center="true"/> 
  36.  

然后创建一个自定义组件对应的类CustomTitleBar,代码如下:

  1. package com.xdw.mycustomtitlebar; 
  2.  
  3. import ohos.agp.components.*; 
  4. import ohos.agp.utils.Color; 
  5. import ohos.app.Context; 
  6. import ohos.hiviewdfx.HiLog; 
  7. import ohos.hiviewdfx.HiLogLabel; 
  8.  
  9.  
  10. public class CustomTitleBar extends ComponentContainer { 
  11.     private static final String TAG = "CustomTitleBar"
  12.     private static final HiLogLabel LABEL = new HiLogLabel(HiLog.DEBUG, 0, "TAG"); 
  13.     public CustomTitleBar(Context context) { 
  14.         super(context); 
  15.     } 
  16.  
  17.     public CustomTitleBar(Context context, AttrSet attrSet) { 
  18.         super(context, attrSet); 
  19.         //动态加载layout 
  20.         Component component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_layout_titlebar, nullfalse); 
  21.         Button leftBtn = (Button) component.findComponentById(ResourceTable.Id_title_bar_left); 
  22.         Text titleText = (Text) component.findComponentById(ResourceTable.Id_titleText); 
  23.         Button rightBtn = (Button) component.findComponentById(ResourceTable.Id_title_bar_right); 
  24.         //添加layout到父组件 
  25.         addComponent(component); 
  26.         //处理TitleBar背景色 
  27.         if(attrSet.getAttr("bg_color").isPresent()){ 
  28.             component.setBackground(attrSet.getAttr("bg_color").get().getElement()); 
  29.         }else
  30.             HiLog.error(LABEL,"attr bg_color is not present"); 
  31.             component.setBackground(getBackgroundElement()); 
  32.         } 
  33.  
  34.         //处理文字 
  35.         if(attrSet.getAttr("title_text").isPresent()){ 
  36.             titleText.setText(attrSet.getAttr("title_text").get().getStringValue()); 
  37.         }else { 
  38.             HiLog.error(LABEL,"attr title_text is not present"); 
  39.             titleText.setText(""); 
  40.         } 
  41.  
  42.         //处理大小 
  43.         if(attrSet.getAttr("title_size").isPresent()){ 
  44.             titleText.setTextSize(attrSet.getAttr("title_size").get().getIntegerValue(), Text.TextSizeType.FP); 
  45.         }else { 
  46.             HiLog.error(LABEL,"attr title_size is not present"); 
  47.         } 
  48.         //处理颜色 
  49.         if(attrSet.getAttr("title_color").isPresent()){ 
  50.             titleText.setTextColor(attrSet.getAttr("title_color").get().getColorValue()); 
  51.         }else
  52.             HiLog.error(LABEL,"attr title_color is not exist"); 
  53.             titleText.setTextColor(Color.BLACK); 
  54.         } 
  55.  
  56.         //处理左边按钮 
  57.         //获取是否要显示左边按钮 
  58.         if(attrSet.getAttr("left_button_visible").isPresent()){ 
  59.             if(attrSet.getAttr("left_button_visible").get().getBoolValue()){ 
  60.                 leftBtn.setVisibility(VISIBLE); 
  61.             }else
  62.                 leftBtn.setVisibility(INVISIBLE); 
  63.             } 
  64.         }else
  65.             //默认情况显示 
  66.             HiLog.error(LABEL,"attr right_button_visible is not exist"); 
  67.             leftBtn.setVisibility(VISIBLE); 
  68.         } 
  69.         //处理左侧按钮的图标 
  70.         if(attrSet.getAttr("left_button_icon").isPresent()){ 
  71.             leftBtn.setAroundElements(attrSet.getAttr("left_button_icon").get().getElement(),null,null,null); 
  72.         }else
  73.             HiLog.error(LABEL,"attr left_button_icon is not exist"); 
  74.         } 
  75.         //处理左侧按钮的文本 
  76.         if(attrSet.getAttr("left_button_text").isPresent()){ 
  77.             leftBtn.setText(attrSet.getAttr("left_button_text").get().getStringValue()); 
  78.         }else
  79.             HiLog.error(LABEL,"attr left_button_text is not exist"); 
  80.         } 
  81.         //处理左侧按钮的文本颜色 
  82.         if(attrSet.getAttr("left_button_text_color").isPresent()){ 
  83.             leftBtn.setTextColor(attrSet.getAttr("left_button_text_color").get().getColorValue()); 
  84.         }else
  85.             HiLog.error(LABEL,"attr left_button_text_color is not exist"); 
  86.         } 
  87.         //处理左侧按钮的文本大小 
  88.         if(attrSet.getAttr("left_button_text_size").isPresent()){ 
  89.             leftBtn.setTextSize(attrSet.getAttr("left_button_text_size").get().getIntegerValue(),Text.TextSizeType.FP); 
  90.         }else
  91.             HiLog.error(LABEL,"attr left_button_text_size is not exist"); 
  92.         } 
  93.  
  94.         //处理右边按钮 
  95.         //获取是否要显示右边按钮 
  96.         if(attrSet.getAttr("right_button_visible").isPresent()){ 
  97.             if(attrSet.getAttr("right_button_visible").get().getBoolValue()){ 
  98.                 rightBtn.setVisibility(VISIBLE); 
  99.             }else
  100.                 rightBtn.setVisibility(INVISIBLE); 
  101.             } 
  102.         }else
  103.             //默认情况显示 
  104.             HiLog.error(LABEL,"attr right_button_visible is not exist"); 
  105.             rightBtn.setVisibility(VISIBLE); 
  106.         } 
  107.  
  108.         //处理右侧按钮的图标 
  109.         if(attrSet.getAttr("right_button_icon").isPresent()){ 
  110.             rightBtn.setAroundElements(attrSet.getAttr("right_button_icon").get().getElement(),null,null,null); 
  111.         }else
  112.             HiLog.error(LABEL,"attr right_button_icon is not exist"); 
  113.         } 
  114.         //处理右侧按钮的文本 
  115.         if(attrSet.getAttr("right_button_text").isPresent()){ 
  116.             rightBtn.setText(attrSet.getAttr("right_button_text").get().getStringValue()); 
  117.         }else
  118.             HiLog.error(LABEL,"attr right_button_text is not exist"); 
  119.         } 
  120.         //处理右侧按钮的文本颜色 
  121.         if(attrSet.getAttr("right_button_text_color").isPresent()){ 
  122.             rightBtn.setTextColor(attrSet.getAttr("right_button_text_color").get().getColorValue()); 
  123.         }else
  124.             HiLog.error(LABEL,"attr right_button_text_color is not exist"); 
  125.         } 
  126.         //处理右侧按钮的文本大小 
  127.         if(attrSet.getAttr("right_button_text_size").isPresent()){ 
  128.             rightBtn.setTextSize(attrSet.getAttr("right_button_text_size").get().getIntegerValue(),Text.TextSizeType.FP); 
  129.         }else
  130.             HiLog.error(LABEL,"attr right_button_text_size is not exist"); 
  131.         } 
  132.     } 
  133.  
  134.     public CustomTitleBar(Context context, AttrSet attrSet, String styleName) { 
  135.         super(context, attrSet, styleName); 
  136.     } 

这里实现流程和Android中有点类似,但是有个很核心的区别就是没有Android中自定义属性所用到的一个attrs.xml文件中的declare-styleable功能。这里的自定义属性主要通过attrSet.getAttr代码来获取,获取的时候记得做下判断是否存在该属性,判断的api如下:

  1. attrSet.getAttr("bg_color").isPresent() 

到此,该自定义组件就完成了,然后我们使用gradle将其打包成HAR包。

打包完成之后,会在output中生成一个har包,如下:

然后将该har包导入到自己的测试项目中的libs目录下,即可调用其中自定义的组件了,如下:

测试工程的布局代码如下:

  1. "1.0" encoding="utf-8"?> 
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.     xmlns:xdw="http://schemas.huawei.com/res/ohos-auto" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical"
  7.  
  8.     
  9.         ohos:height="match_content" 
  10.         ohos:width="match_parent" 
  11.         xdw:bg_color="$color:blue" 
  12.         xdw:left_button_visible="false" 
  13.         xdw:right_button_visible="false" 
  14.         xdw:title_size="18" 
  15.         xdw:title_text="这是自定义属性"/> 
  16.  
  17.     
  18.         ohos:height="45vp" 
  19.         ohos:width="match_parent" 
  20.         ohos:top_margin="10vp" 
  21.         xdw:bg_color="$color:blue" 
  22.         xdw:left_button_icon="$media:left" 
  23.         xdw:right_button_icon="$media:add" 
  24.         xdw:title_color="$color:white" 
  25.         xdw:title_size="20" 
  26.         xdw:title_text="1"/> 
  27.  
  28.     
  29.         ohos:height="45vp" 
  30.         ohos:width="match_parent" 
  31.         ohos:top_margin="10vp" 
  32.         xdw:bg_color="$color:red" 
  33.         xdw:left_button_icon="$media:left" 
  34.         xdw:right_button_visible="false" 
  35.         xdw:title_color="$color:white" 
  36.         xdw:title_size="20" 
  37.         xdw:title_text="2"/> 
  38.  
  39.     
  40.         ohos:height="45vp" 
  41.         ohos:width="match_parent" 
  42.         ohos:top_margin="10vp" 
  43.         xdw:bg_color="$color:red" 
  44.         xdw:left_button_visible="false" 
  45.         xdw:right_button_icon="$media:add" 
  46.         xdw:title_color="$color:white" 
  47.         xdw:title_size="20" 
  48.         xdw:title_text="3"/> 
  49.  
  50.     
  51.         ohos:height="45vp" 
  52.         ohos:width="match_parent" 
  53.         ohos:top_margin="10vp" 
  54.         xdw:bg_color="$color:green" 
  55.         xdw:left_button_text="左边" 
  56.         xdw:left_button_text_color="$color:red" 
  57.         xdw:right_button_icon="$media:add" 
  58.         xdw:title_color="$color:white" 
  59.         xdw:title_size="20" 
  60.         xdw:title_text="4"/> 
  61.  
  62.     
  63.         ohos:height="45vp" 
  64.         ohos:width="match_parent" 
  65.         ohos:top_margin="10vp" 
  66.         xdw:bg_color="$color:green" 
  67.         xdw:left_button_text="左边" 
  68.         xdw:left_button_text_color="$color:red" 
  69.         xdw:right_button_text="右边" 
  70.         xdw:right_button_text_color="$color:red" 
  71.         xdw:title_color="$color:white" 
  72.         xdw:title_size="20" 
  73.         xdw:title_text="4"/> 
  74.  

在布局文件中进行调用的时候需要自定义一个xml命名空间来调用自定义属性,这个命名空间名称和scheme大家都可以随意指定,比如我这里命名空间名称为xdw,后面对应的scheme为"http://schemas.huawei.com/res/ohos-auto"

最后,运行效果图就是本文开头的效果图。目前网上确实没有找到HarmonyOS关于自定义属性这块的博客,所以自己研究了一番发布了此博客,希望能够帮助到大家。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯