自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

通過(guò)鴻蒙自定義屬性，來(lái)創(chuàng)造一個(gè)可以為所欲為的自定義標(biāo)題組件

作者：軟通夏德旺
開(kāi)發(fā)
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com

[[386406]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

之前已經(jīng)寫(xiě)過(guò)一個(gè)在HarmonyOS中的自定義組件的案例，里面主要講解了DrawTask這個(gè)接口的使用，從而讓我們可以調(diào)用Canvas進(jìn)行繪制。

在之前的案例帖子中，有人回復(fù)問(wèn)我如何實(shí)現(xiàn)自定義屬性，現(xiàn)在這篇專(zhuān)門(mén)針對(duì)自定義屬性寫(xiě)一篇帖子，同時(shí)通過(guò)自定義屬性自己封裝了一個(gè)非常實(shí)用的標(biāo)題欄TitleBar

不多說(shuō)，首先上效果圖：

這里主要真多標(biāo)題欄的背景，標(biāo)題文字、大小、顏色，左右兩側(cè)按鈕是圖標(biāo)顯示還是文字顯示、是否顯示分別進(jìn)行了定制，后期用戶(hù)使用只需要通過(guò)幾個(gè)簡(jiǎn)單自定義屬性的配置即可組合實(shí)現(xiàn)自己想要的效果。

具體實(shí)現(xiàn)思路如下，首先創(chuàng)建一個(gè)HarmonyOS Library模塊mycustomtitlebar，在里面添加一個(gè)布局layout_titlebar.xml，代碼如下：

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

然后創(chuàng)建一個(gè)自定義組件對(duì)應(yīng)的類(lèi)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.  * Created by 夏德旺 on 2021/3/4 10:01 
  11.  */ 
  12. public class CustomTitleBar extends ComponentContainer { 
  13.     private static final String TAG = "CustomTitleBar"; 
  14.     private static final HiLogLabel LABEL = new HiLogLabel(HiLog.DEBUG, 0, "TAG"); 
  15.     public CustomTitleBar(Context context) { 
  16.         super(context); 
  17.     } 
  18.  
  19.     public CustomTitleBar(Context context, AttrSet attrSet) { 
  20.         super(context, attrSet); 
  21.         //動(dòng)態(tài)加載layout 
  22.         Component component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_layout_titlebar, null, false); 
  23.         Button leftBtn = (Button) component.findComponentById(ResourceTable.Id_title_bar_left); 
  24.         Text titleText = (Text) component.findComponentById(ResourceTable.Id_titleText); 
  25.         Button rightBtn = (Button) component.findComponentById(ResourceTable.Id_title_bar_right); 
  26.         //添加layout到父組件 
  27.         addComponent(component); 
  28.         //處理TitleBar背景色 
  29.         if(attrSet.getAttr("bg_color").isPresent()){ 
  30.             component.setBackground(attrSet.getAttr("bg_color").get().getElement()); 
  31.         }else{ 
  32.             HiLog.error(LABEL,"attr bg_color is not present"); 
  33.             component.setBackground(getBackgroundElement()); 
  34.         } 
  35.  
  36.         //處理標(biāo)題文字 
  37.         if(attrSet.getAttr("title_text").isPresent()){ 
  38.             titleText.setText(attrSet.getAttr("title_text").get().getStringValue()); 
  39.         }else { 
  40.             HiLog.error(LABEL,"attr title_text is not present"); 
  41.             titleText.setText(""); 
  42.         } 
  43.  
  44.         //處理標(biāo)題大小 
  45.         if(attrSet.getAttr("title_size").isPresent()){ 
  46.             titleText.setTextSize(attrSet.getAttr("title_size").get().getIntegerValue(), Text.TextSizeType.FP); 
  47.         }else { 
  48.             HiLog.error(LABEL,"attr title_size is not present"); 
  49.         } 
  50.         //處理標(biāo)題顏色 
  51.         if(attrSet.getAttr("title_color").isPresent()){ 
  52.             titleText.setTextColor(attrSet.getAttr("title_color").get().getColorValue()); 
  53.         }else{ 
  54.             HiLog.error(LABEL,"attr title_color is not exist"); 
  55.             titleText.setTextColor(Color.BLACK); 
  56.         } 
  57.  
  58.         //處理左邊按鈕 
  59.         //獲取是否要顯示左邊按鈕 
  60.         if(attrSet.getAttr("left_button_visible").isPresent()){ 
  61.             if(attrSet.getAttr("left_button_visible").get().getBoolValue()){ 
  62.                 leftBtn.setVisibility(VISIBLE); 
  63.             }else{ 
  64.                 leftBtn.setVisibility(INVISIBLE); 
  65.             } 
  66.         }else{ 
  67.             //默認(rèn)情況顯示 
  68.             HiLog.error(LABEL,"attr right_button_visible is not exist"); 
  69.             leftBtn.setVisibility(VISIBLE); 
  70.         } 
  71.         //處理左側(cè)按鈕的圖標(biāo) 
  72.         if(attrSet.getAttr("left_button_icon").isPresent()){ 
  73.             leftBtn.setAroundElements(attrSet.getAttr("left_button_icon").get().getElement(),null,null,null); 
  74.         }else{ 
  75.             HiLog.error(LABEL,"attr left_button_icon is not exist"); 
  76.         } 
  77.         //處理左側(cè)按鈕的文本 
  78.         if(attrSet.getAttr("left_button_text").isPresent()){ 
  79.             leftBtn.setText(attrSet.getAttr("left_button_text").get().getStringValue()); 
  80.         }else{ 
  81.             HiLog.error(LABEL,"attr left_button_text is not exist"); 
  82.         } 
  83.         //處理左側(cè)按鈕的文本顏色 
  84.         if(attrSet.getAttr("left_button_text_color").isPresent()){ 
  85.             leftBtn.setTextColor(attrSet.getAttr("left_button_text_color").get().getColorValue()); 
  86.         }else{ 
  87.             HiLog.error(LABEL,"attr left_button_text_color is not exist"); 
  88.         } 
  89.         //處理左側(cè)按鈕的文本大小 
  90.         if(attrSet.getAttr("left_button_text_size").isPresent()){ 
  91.             leftBtn.setTextSize(attrSet.getAttr("left_button_text_size").get().getIntegerValue(),Text.TextSizeType.FP); 
  92.         }else{ 
  93.             HiLog.error(LABEL,"attr left_button_text_size is not exist"); 
  94.         } 
  95.  
  96.         //處理右邊按鈕 
  97.         //獲取是否要顯示右邊按鈕 
  98.         if(attrSet.getAttr("right_button_visible").isPresent()){ 
  99.             if(attrSet.getAttr("right_button_visible").get().getBoolValue()){ 
  100.                 rightBtn.setVisibility(VISIBLE); 
  101.             }else{ 
  102.                 rightBtn.setVisibility(INVISIBLE); 
  103.             } 
  104.         }else{ 
  105.             //默認(rèn)情況顯示 
  106.             HiLog.error(LABEL,"attr right_button_visible is not exist"); 
  107.             rightBtn.setVisibility(VISIBLE); 
  108.         } 
  109.  
  110.         //處理右側(cè)按鈕的圖標(biāo) 
  111.         if(attrSet.getAttr("right_button_icon").isPresent()){ 
  112.             rightBtn.setAroundElements(attrSet.getAttr("right_button_icon").get().getElement(),null,null,null); 
  113.         }else{ 
  114.             HiLog.error(LABEL,"attr right_button_icon is not exist"); 
  115.         } 
  116.         //處理右側(cè)按鈕的文本 
  117.         if(attrSet.getAttr("right_button_text").isPresent()){ 
  118.             rightBtn.setText(attrSet.getAttr("right_button_text").get().getStringValue()); 
  119.         }else{ 
  120.             HiLog.error(LABEL,"attr right_button_text is not exist"); 
  121.         } 
  122.         //處理右側(cè)按鈕的文本顏色 
  123.         if(attrSet.getAttr("right_button_text_color").isPresent()){ 
  124.             rightBtn.setTextColor(attrSet.getAttr("right_button_text_color").get().getColorValue()); 
  125.         }else{ 
  126.             HiLog.error(LABEL,"attr right_button_text_color is not exist"); 
  127.         } 
  128.         //處理右側(cè)按鈕的文本大小 
  129.         if(attrSet.getAttr("right_button_text_size").isPresent()){ 
  130.             rightBtn.setTextSize(attrSet.getAttr("right_button_text_size").get().getIntegerValue(),Text.TextSizeType.FP); 
  131.         }else{ 
  132.             HiLog.error(LABEL,"attr right_button_text_size is not exist"); 
  133.         } 
  134.     } 
  135.  
  136.     public CustomTitleBar(Context context, AttrSet attrSet, String styleName) { 
  137.         super(context, attrSet, styleName); 
  138.     } 
  139. } 

這里實(shí)現(xiàn)流程和Android中有點(diǎn)類(lèi)似，但是有個(gè)很核心的區(qū)別就是沒(méi)有Android中自定義屬性所用到的一個(gè)attrs.xml文件中的declare-styleable功能。這里的自定義屬性主要通過(guò)attrSet.getAttr代碼來(lái)獲取，獲取的時(shí)候記得做下判斷是否存在該屬性，判斷的api如下：

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

到此，該自定義組件就完成了，然后我們使用gradle將其打包成HAR包。

打包完成之后，會(huì)在output中生成一個(gè)har包，如下：

然后將該har包導(dǎo)入到自己的測(cè)試項(xiàng)目中的libs目錄下，即可調(diào)用其中自定義的組件了，如下：

測(cè)試工程的布局代碼如下：

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

在布局文件中進(jìn)行調(diào)用的時(shí)候需要自定義一個(gè)xml命名空間來(lái)調(diào)用自定義屬性，這個(gè)命名空間名稱(chēng)和scheme大家都可以隨意指定，比如我這里命名空間名稱(chēng)為xdw，后面對(duì)應(yīng)的scheme為"http://schemas.huawei.com/res/ohos-auto"

最后，運(yùn)行效果圖就是本文開(kāi)頭的效果圖。目前網(wǎng)上確實(shí)沒(méi)有找到HarmonyOS關(guān)于自定義屬性這塊的博客，所以自己研究了一番發(fā)布了此博客，希望能夠幫助到大家。

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)
相關(guān)推薦

2023-02-20 15:20:43

啟動(dòng)頁(yè)組件鴻蒙

2012-11-19 11:07:42

IBMdw

2022-06-20 15:43:45

switch開(kāi)關(guān)鴻蒙

2022-02-21 15:16:30

HarmonyOS鴻蒙操作系統(tǒng)

2021-12-21 15:22:22

鴻蒙HarmonyOS應(yīng)用

2022-09-21 14:42:03

JSProps屬性

2022-02-16 15:25:31

JS代碼Canvas鴻蒙

2009-06-24 15:13:36

自定義JSF組件

2022-06-06 09:28:36

ReactHook

2022-04-24 15:17:56

鴻蒙操作系統(tǒng)

2021-10-26 10:07:02

鴻蒙HarmonyOS應(yīng)用

2013-04-01 14:35:10

Android開(kāi)發(fā)Android自定義x

2022-10-25 15:12:24

自定義組件鴻蒙

2022-10-26 15:54:46

canvas組件鴻蒙

2009-08-03 13:32:38

C#自定義組件

2022-07-12 16:56:48

自定義組件鴻蒙

2022-06-23 07:23:34

自定義組件計(jì)時(shí)器

2017-03-27 16:50:26

windowsedge微軟

2022-10-17 14:39:12

自定義彈窗組件鴻蒙

2016-11-16 21:55:55

源碼分析自定義view androi
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)