devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

尝试HarmonyOS代码_vectorelement详解 harmonyos

作者：菜鸟追梦旅行 | 2024-03-15 19:06:29

赞

踩

vectorelement详解 harmonyos

 

 

 从官网下载好例子。如下。但是它还需要更新一些依赖。让它更新，更新后了如下

看到成功了，说明代码没有问题。但是，点击

却报错。而且打不开模拟器。

这是你没有实名认证。你要去华为去实名认证。自己玩的话，申请个人就好了。准备好，姓名，身份证号，银行卡号，手机号。然后点击这个

可以模拟的设备就出来了

用哪个Actions 那个。一次只能用1个小时，时间到了，在申请。

我用的是 一个手表的例子，做了一丁点修改。要不会报错的

  1.  
  2. import ohos.aafwk.ability.Ability;
  3. import ohos.aafwk.content.Intent;
  4.  
  5. public class PageAbility extends Ability {
  6.     @Override
  7.     public void onStart(Intent intent) {
  8.         super.onStart(intent);
  9.         super.setMainRoute(SleepPageSlice.class.getName());
  10.         setSwipeToDismiss(true);
  11.     }
  12. }
  1.  
  2. import ohos.aafwk.ability.AbilitySlice;
  3. import ohos.aafwk.content.Intent;
  4. import ohos.agp.components.*;
  5. import ohos.hiviewdfx.HiLog;
  6. import ohos.hiviewdfx.HiLogLabel;
  7.  
  8. import java.util.ArrayList;
  9. import java.util.List;
  10. import java.util.Optional;
  11.  
  12. public class SleepPageSlice extends AbilitySlice {
  13.     private static final String TAG = "SleepPageSlice";
  14.  
  15.     private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, TAG);
  16.  
  17.     private List<ComponentOwner> list = new ArrayList<>();
  18.  
  19.     private PageSliderProvider provider = new PageSliderProvider() {
  20.         @Override
  21.         public int getCount() {
  22.             return list.size();
  23.         }
  24.  
  25.         @Override
  26.         public Object createPageInContainer(ComponentContainer componentContainer, int index) {
  27.             if (index >= list.size() || componentContainer == null) {
  28.                 HiLog.error(LABEL, "instantiateItem index error");
  29.                 return Optional.empty();
  30.             }
  31.             ComponentOwner container = list.get(index);
  32.             componentContainer.addComponent(container.getComponent());
  33.             container.instantiateComponent();
  34.             return container.getComponent();
  35.         }
  36.  
  37.         @Override
  38.         public void destroyPageFromContainer(ComponentContainer componentContainer, int index, Object object) {
  39.             HiLog.info(LABEL, "destroyItem index:" + index);
  40.             if (index >= list.size() || componentContainer == null) {
  41.                 return;
  42.             }
  43.             Component content = list.get(index).getComponent();
  44.             componentContainer.removeComponent(content);
  45.             return;
  46.         }
  47.  
  48.         @Override
  49.         public boolean isPageMatchToObject(Component component, Object object) {
  50.             return component == object;
  51.         }
  52.  
  53.         @Override
  54.         public void startUpdate(ComponentContainer container) {
  55.             super.startUpdate(container);
  56.             HiLog.info(LABEL, "startUpdate");
  57.         }
  58.     };
  59.  
  60.     @Override
  61.     public void onStart(Intent intent) {
  62.         super.onStart(intent);
  63.         HiLog.info(LABEL, "onStart");
  64.  
  65.         // 添加子页面
  66.         list.add(new SleepComponentOwner(this));
  67.         list.add(new DetailComponentOwner(this));
  68.  
  69.         // 设置主界面
  70.         DirectionalLayout layout = new DirectionalLayout(this);
  71.         ComponentContainer.LayoutConfig config = new ComponentContainer.LayoutConfig(
  72.                 ComponentContainer.LayoutConfig.MATCH_PARENT,
  73.                 ComponentContainer.LayoutConfig.MATCH_PARENT);
  74.         layout.setLayoutConfig(config);
  75.  
  76.         // 使用PageSlider做滑动效果
  77.         PageSlider slider = new PageSlider(this);
  78.         ComponentContainer.LayoutConfig sliderConfig = new ComponentContainer.LayoutConfig(
  79.                 ComponentContainer.LayoutConfig.MATCH_PARENT,
  80.                 ComponentContainer.LayoutConfig.MATCH_PARENT);
  81.         slider.setLayoutConfig(sliderConfig);
  82.  
  83.         slider.setProvider(provider);
  84.  
  85.         layout.addComponent(slider);
  86.  
  87.         setUIContent(layout);
  88.     }
  89. }
  1.  
  2.  
  3. import com.huawei.mywearable.ResourceTable;
  4. import ohos.agp.components.Component;
  5. import ohos.agp.components.LayoutScatter;
  6. import ohos.agp.components.element.VectorElement;
  7. import ohos.app.AbilityContext;
  8. import ohos.hiviewdfx.HiLog;
  9. import ohos.hiviewdfx.HiLogLabel;
  10.  
  11. public class SleepComponentOwner implements ComponentOwner {
  12.     private static final String TAG = "SleepComponentOwner";
  13.  
  14.     private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, TAG);
  15.  
  16.     // 目标睡眠时长默认值,单位：分钟
  17.     private static final int DEFAULT_SLEEP_TARGET_TIME = 480;
  18.  
  19.     // 睡眠时长默认值,单位：分钟
  20.     private static final int DEFAULT_SLEEP_TIME = 0;
  21.  
  22.     private CircleProgressDrawTask drawTask;
  23.  
  24.     private AbilityContext myContext;
  25.  
  26.     private Component root;
  27.  
  28.     public SleepComponentOwner(AbilityContext context) {
  29.         init(context);
  30.     }
  31.  
  32.     private void init(AbilityContext context) {
  33.         myContext = context;
  34.         LayoutScatter scatter = LayoutScatter.getInstance(context);
  35.         root = scatter.parse(ResourceTable.Layout_layout_sleep, null, false);
  36.         drawTask = new CircleProgressDrawTask(root);
  37.         drawTask.setMaxValue(DEFAULT_SLEEP_TARGET_TIME);
  38.  
  39.         Component imageComponent = root.findComponentById(ResourceTable.Id_sleep_moon_img);
  40.         imageComponent.setBackground(new VectorElement(context, ResourceTable.Id_sleep_moon_img));
  41.     }
  42.  
  43.     @Override
  44.     public Component getComponent() {
  45.         return root;
  46.     }
  47.  
  48.     @Override
  49.     public void instantiateComponent() {
  50.         return;
  51.     }
  52. }

 

  1.  
  2. import ohos.agp.components.Component;
  3. import ohos.agp.render.Canvas;
  4. import ohos.agp.utils.Color;
  5.  
  6. public class CircleProgressDrawTask implements Component.DrawTask {
  7.     // 用于配置圆环的粗细，具体参数可以在xml文件中配置
  8.     private static final String STROKE_WIDTH_KEY = "stroke_width";
  9.  
  10.     // 用于配置圆环的最大值，具体参数可以在xml文件中配置
  11.     private static final String MAX_PROGRESS_KEY = "max_progress";
  12.  
  13.     // 用于配置圆环的当前值，具体参数可以在xml文件中配置
  14.     private static final String CURRENT_PROGRESS_KEY = "current_progress";
  15.  
  16.     // 用于配置起始位置的颜色，具体参数可以在xml文件中配置
  17.     private static final String START_COLOR_KEY = "start_color";
  18.  
  19.     // 用于配置结束位置的颜色，具体参数可以在xml文件中配置
  20.     private static final String END_COLOR_KEY = "end_color";
  21.  
  22.     // 用于配置背景色，具体参数可以在xml文件中配置
  23.     private static final String BACKGROUND_COLOR_KEY = "background_color";
  24.  
  25.     // 用于配置起始位置的角度，具体参数可以在xml文件中配置
  26.     private static final String START_ANGLE = "start_angle";
  27.  
  28.     private static final float MAX_ARC = 360f;
  29.  
  30.     private static final int DEFAULT_STROKE_WIDTH = 10;
  31.  
  32.     private static final int DEFAULT_MAX_VALUE = 100;
  33.  
  34.     private static final int DEFAULT_START_COLOR = 0xFFB566FF;
  35.  
  36.     private static final int DEFAULT_END_COLOR = 0xFF8A2BE2;
  37.  
  38.     private static final int DEFAULT_BACKGROUND_COLOR = 0xA8FFFFFF;
  39.  
  40.     private static final int DEFAULT_START_ANGLE = -90;
  41.  
  42.     private static final float DEFAULT_LINER_MAX = 100f;
  43.  
  44.     private static final int HALF = 2;
  45.  
  46.     // 圆环的宽度, 默认10个像素
  47.     private int myStrokeWidth = DEFAULT_STROKE_WIDTH;
  48.  
  49.     // 最大的进度值, 默认是100
  50.     private int myMaxValue = DEFAULT_MAX_VALUE;
  51.  
  52.     // 当前的进度值, 默认是0
  53.     private int myCurrentValue = 0;
  54.  
  55.     // 起始位置的颜色, 默认浅紫色
  56.     private Color myStartColor = new Color(DEFAULT_START_COLOR);
  57.  
  58.     // 结束位置的颜色, 默认深紫色
  59.     private Color myEndColor = new Color(DEFAULT_END_COLOR);
  60.  
  61.     // 背景颜色, 默认浅灰色
  62.     private Color myBackgroundColor = new Color(DEFAULT_BACKGROUND_COLOR);
  63.  
  64.     // 当前的进度值, 默认从-90度进行绘制
  65.     private int myStartAngle = DEFAULT_START_ANGLE;
  66.  
  67.     private Component myComponent;
  68.  
  69.     // 传入要进行修改的component
  70.     public CircleProgressDrawTask(Component component) {
  71.         myComponent = component;
  72.         myComponent.addDrawTask(this);
  73.     }
  74.  
  75.     // 设置当前进度并且刷新component，value值为当前进度
  76.     public void setValue(int value) {
  77.         myCurrentValue = value;
  78.         myComponent.invalidate();
  79.     }
  80.  
  81.     public void setMaxValue(int maxValue) {
  82.         myMaxValue = maxValue;
  83.         myComponent.invalidate();
  84.     }
  85.  
  86.     @Override
  87.     public void onDraw(Component component, Canvas canvas) {
  88.         // 通过canvas实现绘制圆环的功能
  89.  
  90.     }
  91. }

 

  1. import ohos.agp.components.Component;
  2.  
  3. public interface ComponentOwner {
  4.     // 获取存放的component
  5.     Component getComponent();
  6.  
  7.     // 当包含的component被添加到容器时回调
  8.     void instantiateComponent();
  9. }
  1.  
  2. import ohos.agp.components.Component;
  3. import ohos.agp.components.ComponentContainer;
  4. import ohos.agp.components.DirectionalLayout;
  5. import ohos.app.AbilityContext;
  6. import ohos.hiviewdfx.HiLog;
  7. import ohos.hiviewdfx.HiLogLabel;
  8.  
  9. public class DetailComponentOwner implements ComponentOwner {
  10.     private static final String TAG = "DetailComponentOwner";
  11.  
  12.     private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, TAG);
  13.  
  14.     private AbilityContext myContext;
  15.  
  16.     private ComponentContainer root;
  17.  
  18.     public DetailComponentOwner(AbilityContext context) {
  19.         init(context);
  20.     }
  21.  
  22.     private void init(AbilityContext context) {
  23.         root = new DirectionalLayout(context);
  24.         ComponentContainer.LayoutConfig config = new ComponentContainer.LayoutConfig(
  25.                 ComponentContainer.LayoutConfig.MATCH_PARENT,
  26.                 ComponentContainer.LayoutConfig.MATCH_PARENT);
  27.         root.setLayoutConfig(config);
  28.         myContext = context;
  29.     }
  30.  
  31.     @Override
  32.     public Component getComponent() {
  33.         return root;
  34.     }
  35.  
  36.     @Override
  37.     public void instantiateComponent() {
  38.         return;
  39.     }
  40. }

 

还有 两个布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.                    ohos:width="match_parent"
  4.                    ohos:height="match_parent"
  5.                    ohos:orientation="vertical"
  6.                    ohos:background_element="#FF000000">
  7.     <Text
  8.         ohos:id="$+id:detail_nodata_date"
  9.         ohos:width="match_content"
  10.         ohos:height="23vp"
  11.         ohos:top_margin="20vp"
  12.         ohos:layout_alignment="horizontal_center"
  13.         ohos:text_alignment="bottom"
  14.         ohos:text_color="$color:sleep_text_lvse"
  15.         ohos:text_weight="600"
  16.         ohos:text_size="19vp"/>
  17.  
  18.     <Image
  19.         ohos:id="$+id:detail_nodata_img"
  20.         ohos:width="46vp"
  21.         ohos:height="46vp"
  22.         ohos:top_margin="25vp"
  23.         ohos:layout_alignment="horizontal_center"
  24.         ohos:scale_mode="zoom_center"/>
  25.  
  26.     <Text
  27.         ohos:width="match_content"
  28.         ohos:height="match_content"
  29.         ohos:alpha="0.66"
  30.         ohos:top_margin="12vp"
  31.         ohos:layout_alignment="horizontal_center"
  32.         ohos:text_alignment="center"
  33.         ohos:text="$string:no_data"
  34.         ohos:text_color="$color:sleep_text_lvse"
  35.         ohos:text_size="16vp"/>
  36.     <Text
  37.         ohos:width="match_content"
  38.         ohos:height="match_content"
  39.         ohos:alpha="0.66"
  40.         ohos:layout_alignment="horizontal_center"
  41.         ohos:text_alignment="center"
  42.         ohos:text="$string:wearing_watch_tips"
  43.         ohos:text_color="$color:sleep_text_lvse"
  44.         ohos:text_size="16vp"/>
  45. </DirectionalLayout>

 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.                    ohos:width="match_parent"
  4.                    ohos:height="match_parent"
  5.                    ohos:background_element="#FF000000"
  6.                    ohos:orientation="vertical">
  7.  
  8.     <Image
  9.         ohos:id="$+id:sleep_moon_img"
  10.         ohos:width="46vp"
  11.         ohos:height="46vp"
  12.         ohos:top_margin="11vp"
  13.         ohos:layout_alignment="horizontal_center"/>
  14.  
  15.     <Text
  16.         ohos:width="match_parent"
  17.         ohos:height="19.5vp"
  18.         ohos:alpha="0.66"
  19.         ohos:layout_alignment="horizontal_center"
  20.         ohos:text_alignment="center"
  21.         ohos:text="$string:sleep"
  22.         ohos:text_color="$color:sleep_text_lvse"
  23.         ohos:text_size="16vp"/>
  24.  
  25.     <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
  26.                        ohos:width="match_content"
  27.                        ohos:height="65vp"
  28.                        ohos:top_margin="8vp"
  29.                        ohos:layout_alignment="horizontal_center"
  30.                        ohos:orientation="horizontal">
  31.         <Text
  32.             ohos:id="$+id:sleep_hour_text"
  33.             ohos:width="match_content"
  34.             ohos:height="match_content"
  35.             ohos:layout_alignment="center"
  36.             ohos:text_alignment="center"
  37.             ohos:text="$string:dash"
  38.             ohos:text_color="$color:sleep_text_lvse"
  39.             ohos:text_size="58vp"
  40.             />
  41.         <Text
  42.             ohos:width="match_content"
  43.             ohos:height="match_content"
  44.             ohos:left_margin="2vp"
  45.             ohos:alpha="0.66"
  46.             ohos:layout_alignment="bottom"
  47.             ohos:bottom_padding="9.5vp"
  48.             ohos:text="$string:hour"
  49.             ohos:text_color="$color:sleep_text_lvse"
  50.             ohos:text_size="16vp"
  51.             />
  52.         <Text
  53.             ohos:id="$+id:sleep_min_text"
  54.             ohos:width="match_content"
  55.             ohos:height="match_content"
  56.             ohos:left_margin="2vp"
  57.             ohos:layout_alignment="center"
  58.             ohos:text_alignment="center"
  59.             ohos:text="$string:double_dash"
  60.             ohos:text_color="$color:sleep_text_lvse"
  61.             ohos:text_size="58vp"
  62.             />
  63.         <Text
  64.             ohos:width="match_content"
  65.             ohos:height="match_content"
  66.             ohos:left_margin="2vp"
  67.             ohos:alpha="0.66"
  68.             ohos:layout_alignment="bottom"
  69.             ohos:bottom_padding="9.5vp"
  70.             ohos:text="$string:minute"
  71.             ohos:text_color="$color:sleep_text_lvse"
  72.             ohos:text_size="16vp"
  73.             />
  74.     </DirectionalLayout>
  75.     <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
  76.                        ohos:width="match_content"
  77.                        ohos:height="25vp"
  78.                        ohos:top_margin="20.5vp"
  79.                        ohos:layout_alignment="horizontal_center"
  80.                        ohos:orientation="horizontal">
  81.         <Text
  82.             ohos:width="match_content"
  83.             ohos:height="19.5vp"
  84.             ohos:text="$string:goal"
  85.             ohos:alpha="0.66"
  86.             ohos:text_alignment="bottom"
  87.             ohos:bottom_margin="1vp"
  88.             ohos:text_color="$color:sleep_text_lvse"
  89.             ohos:text_size="16vp"
  90.             />
  91.         <Text
  92.             ohos:id="$+id:sleep_goal_text"
  93.             ohos:width="match_content"
  94.             ohos:height="match_parent"
  95.             ohos:left_margin="2vp"
  96.             ohos:text="$string:target_sleep_time"
  97.             ohos:text_weight="600"
  98.             ohos:text_color="$color:sleep_text_lvse"
  99.             ohos:bottom_padding="2vp"
  100.             ohos:text_size="21vp"
  101.             />
  102.         <Text
  103.             ohos:width="match_content"
  104.             ohos:height="19.5vp"
  105.             ohos:left_margin="2vp"
  106.             ohos:alpha="0.66"
  107.             ohos:text="$string:hour"
  108.             ohos:text_color="$color:sleep_text_lvse"
  109.             ohos:text_size="16vp"
  110.             />
  111.     </DirectionalLayout>
  112. </DirectionalLayout>

 

枚举

  1. {
  2. 	"string":[
  3. 		{
  4. 			"name":"app_name",
  5. 			"value":"MyWearable"
  6. 		},
  7. 		{
  8. 			"name":"mainability_description",
  9. 			"value":"Java_Wearable_Empty Feature Ability"
  10. 		},
  11. 		{
  12. 			"name":"HelloWorld",
  13. 			"value":"Hello World"
  14. 		},
  15. 		{
  16. 			"name":"sleep",
  17. 			"value":"sleep liunn"
  18. 		},
  19. 		{
  20. 			"name":"dash",
  21. 			"value":"dash liunn"
  22. 		},
  23. 		{
  24. 			"name":"hour",
  25. 			"value":"hour liunn"
  26. 		},
  27. 		{
  28. 			"name":"double_dash",
  29. 			"value":"double_dash liunn"
  30. 		},
  31. 		{
  32. 			"name":"minute",
  33. 			"value":"minute liunn"
  34. 		},
  35. 		{
  36. 			"name":"goal",
  37. 			"value":"goal liunn"
  38. 		},
  39. 		{
  40. 			"name":"target_sleep_time",
  41. 			"value":"target_sleep_time liunn"
  42. 		},
  43. 		{
  44. 			"name":"no_data",
  45. 			"value":"no_data liunn"
  46. 		},
  47. 		{
  48. 			"name":"wearing_watch_tips",
  49. 			"value":"wearing_watch_tips liunn"
  50. 		}
  51. 	]
  52. }
  1. {
  2.   "color":[
  3.     {
  4.       "name":"sleep_text_lvse",
  5.       "value":"#FF00FFD9"
  6.     },
  7.     {
  8.       "name":"mainability_description",
  9.       "value":"Java_Wearable_Empty Feature Ability"
  10.     },
  11.     {
  12.       "name":"HelloWorld",
  13.       "value":"Hello World"
  14.     },
  15.     {
  16.       "name":"sleep",
  17.       "value":"sleep liunn"
  18.     }
  19.   ]
  20. }

整个 目录结构是这个样子的，

注册一个 

  1.     "abilities": [
  2.  
  3.       {
  4.         "name": "com.huawei.mywearable.slice.liuTest.PageAbility",
  5.         "icon": "$media:icon",
  6.         "description": "$string:mainability_description",
  7.         "label": "$string:app_name",
  8.         "launchType": "standard",
  9.         "orientation": "portrait",
  10.         "visible": true,
  11.         "permissions": [],
  12.         "skills": [
  13.           {
  14.             "actions": [
  15.               "action.system.home"
  16.             ],
  17.             "entities": [
  18.               "entity.system.home"
  19.             ]
  20.           }
  21.         ],
  22.         "type": "page",
  23.         "formEnabled": false
  24.       }
  25.     ]

模拟器运行一下。 

 

好了，没有报错。

代码参考：  https://developer.harmonyos.com/cn/docs/documentation/doc-guides/wearable-adding-module-0000001053581601

写的有点乱。等熟悉了，整理一下。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/243829
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号