devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS开发实战：跨平台自适应布局第三方组件

作者：从前慢现在也慢 | 2024-07-15 10:25:05

赞

踩

HarmonyOS开发实战：跨平台自适应布局第三方组件

Yoga 是 Facebook 打造的一个跨 iOS、Android、Window 平台在内的布局引擎，兼容 Flexbox 布局方式，让界面更加简单。

01如何使用

首先我们在 MainAbility 中定义界面路由：

  1. public class MainAbility extends Ability {
  2.     @Override
  3.     public void onStart(Intent intent) {
  4.         super.onStart(intent);
  5.         super.setMainRoute(MainAbilitySlice.class.getName());
  6.         addActionRoute("action.dydrawnode.slice", DynamicsDrawNodeSlice.class.getName());
  7.         addActionRoute("action.showrow.slice", ShowRowAbilitySlice.class.getName());
  8.         addActionRoute("action.inflate.slice", BenchmarkInflateAbilitySlice.class.getName());
  9.     }
  10. }

然后我们来到 MainAbilitySlice，其实就是做了一个向其他界面跳转的动作，并提前加载 yoga 的 so 库：

  1. public class MainAbilitySlice extends AbilitySlice {
  2.  
  3.  
  4.  
  5.     static {
  6.         System.loadLibrary("yoga");
  7.         System.loadLibrary("yogacore");
  8.         System.loadLibrary("fb");
  9.     }
  10.  
  11.  
  12.  
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         setUIContent(ResourceTable.Layout_main_layout);
  17.  
  18.         Button btn0= (Button) findComponentById(ResourceTable.Id_btn_1);
  19.         btn0.setClickedListener(component -> {
  20.             Intent intent1 = new Intent();
  21.             Operation operation = new Intent.OperationBuilder()
  22.                     .withAction("action.dydrawnode.slice")
  23.                     .build();
  24.             intent1.setOperation(operation);
  25.             startAbilityForResult(intent1, 1);
  26.         });
  27.  
  28.         Button btn2= (Button) findComponentById(ResourceTable.Id_btn_2);
  29.         btn2.setClickedListener(component -> {
  30.             Intent intent1 = new Intent();
  31.             Operation operation = new Intent.OperationBuilder()
  32.                     .withAction("action.showrow.slice")
  33.                     .build();
  34.             intent1.setOperation(operation);
  35.             startAbilityForResult(intent1, 1);
  36.         });
  37.  
  38.         Button btn1= (Button) findComponentById(ResourceTable.Id_btn_3);
  39.         btn1.setClickedListener(component -> {
  40.             Intent intent1 = new Intent();
  41.             Operation operation = new Intent.OperationBuilder()
  42.                     .withAction("action.inflate.slice")
  43.                     .build();
  44.             intent1.setOperation(operation);
  45.             startAbilityForResult(intent1, 1);
  46.         });
  47.  
  48.     }
  49.  
  50.     @Override
  51.     public void onActive() {
  52.         super.onActive();
  53.     }
  54.  
  55.     @Override
  56.     public void onForeground(Intent intent) {
  57.         super.onForeground(intent);
  58.     }
  59.  
  60.  
  61. }

第一个演示界面

这里 yoga 向我们展示了动态布局的能力，效果图如下：

图片

实现的代码如下：

  1. public class DynamicsDrawNodeSlice extends AbilitySlice {
  2.  
  3.  
  4.     private static final int VIEW_WIDTH = 200;
  5.     private static final int VIEW_HEIGHT = 200;
  6.  
  7.     private ArrayList<Component> mViewList = new ArrayList<>();
  8.     private ArrayList<YogaNode> mYogaNodeList = new ArrayList<>();
  9.  
  10.     private int[][] colors = new int[][]{
  11.             new int[]{0xff6200ea, 0xff651fff, 0xff7c4dff, 0xffb388ff},
  12.             new int[]{0xffd50000, 0xffff1744, 0xffff5252, 0xffff8a80},
  13.             new int[]{0xffc51162, 0xfff50057, 0xffff4081, 0xffff80ab},
  14.             new int[]{0xffaa00ff, 0xffd500f9, 0xffe040fb, 0xffea80fc}
  15.     };
  16.  
  17.     @Override
  18.     protected void onStart(Intent intent) {
  19.         super.onStart(intent);
  20.         PositionLayout container = new PositionLayout(this);
  21.         DisplayAttributes displayAttributes = DisplayManager.getInstance().getDefaultDisplay(this).get().getAttributes();
  22.         float screenWidth = displayAttributes.width;
  23.         float screenHeight = displayAttributes.height;
  24.         YogaNode root = new YogaNodeJNIFinalizer();
  25.         root.setWidth(screenWidth);
  26.         root.setHeight(screenHeight);
  27.         root.setFlexDirection(YogaFlexDirection.COLUMN);
  28.  
  29.         createRowNodeAndView(root, 0);
  30.         createRowNodeAndView(root, 1);
  31.         createRowNodeAndView(root, 2);
  32.         createRowNodeAndView(root, 3);
  33.  
  34.         root.calculateLayout(screenWidth, screenHeight);
  35.  
  36.         for (int i = 0; i < mViewList.size(); i++) {
  37.             Component component = mViewList.get(i);
  38.             YogaNode yogaNode = mYogaNodeList.get(i);
  39.             YogaNode yogaNodeOwner = yogaNode.getOwner();
  40.             component.setTranslationX(yogaNodeOwner.getLayoutX() + yogaNodeOwner.getLayoutX());
  41.             component.setTranslationY(yogaNodeOwner.getLayoutY() + yogaNodeOwner.getLayoutY());
  42.             component.setLeft((int) (yogaNodeOwner.getLayoutX() + yogaNode.getLayoutX()));
  43.             component.setTop((int) (yogaNodeOwner.getLayoutY() + yogaNode.getLayoutY()));
  44.             container.addComponent(component);
  45.         }
  46.  
  47.         super.setUIContent(container);
  48.     }
  49.  
  50.     private void createRowNodeAndView(YogaNode root, int index) {
  51.         YogaNode row = new YogaNodeJNIFinalizer();
  52.         row.setHeight(VIEW_HEIGHT);
  53.         row.setWidth(VIEW_WIDTH * 4);
  54.         row.setFlexDirection(YogaFlexDirection.ROW);
  55.         row.setMargin(YogaEdge.ALL, 20);
  56.  
  57.         for (int i = 0; i < 4; i++) {
  58.             YogaNode yogaNode = new YogaNodeJNIFinalizer();
  59.             yogaNode.setWidth(VIEW_WIDTH);
  60.             yogaNode.setHeight(VIEW_HEIGHT);
  61.             Component component = createView(colors[index][i]);
  62.             row.addChildAt(yogaNode, i);
  63.             mYogaNodeList.add(yogaNode);
  64.             mViewList.add(component);
  65.         }
  66.  
  67.         root.addChildAt(row, index);
  68.     }
  69.  
  70.     private Component createView(int color) {
  71.         Component view = new Component(this);
  72.         ShapeElement background = new ShapeElement();
  73.         background.setRgbColor(convertColor(color));
  74.         view.setBackground(background);
  75.         ComponentContainer.LayoutConfig layoutConfig = new AdaptiveBoxLayout.LayoutConfig(VIEW_WIDTH, VIEW_HEIGHT);
  76.         view.setLayoutConfig(layoutConfig);
  77.         return view;
  78.     }
  79.  
  80.     /**
  81.      *  转换颜色
  82.      * @param color
  83.      * @return RgbColor
  84.      */
  85.     public RgbColor convertColor(int color) {
  86.         int colorInt = color;
  87.         int red = (colorInt & 0xff0000) >> 16;
  88.         int green = (colorInt & 0x00ff00) >> 8;
  89.         int blue = (colorInt & 0x0000ff);
  90.         return new RgbColor(red, green, blue);
  91.     }
  92. }

代码中定义了一个 root 根布局，宽高为屏幕的宽高，接着定义了四个行布局，并向每个行布局里添加 4 个子布局。

最重要的是在调用 root.calculateLayout（screenWidth, screenHeight）后，便将每个子布局的位置给确定了下来，然后根据获取到的每个布局的参数，给每个 Component 设置位置。

该演示只是借助 yoga 组件来确定每个 Component 位置，真正使渲染生效的还是基于鸿蒙的原生控件。

第二个演示界面

接下来展示如何使用 yoga 组件在 xml 里通过填写属性来控制 item 位置的能力，效果图如下：

图片

代码如下：

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <com.facebook.yoga.openharmony.YogaLayout
  3.        xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.        xmlns:yoga="http://schemas.huawei.com/apk/res-auto"
  5.        ohos:height="match_parent"
  6.        ohos:width="match_parent"
  7. >
  8.  
  9.    <com.facebook.yoga.openharmony.YogaLayout
  10.            ohos:height="60vp"
  11.            ohos:width="match_content"
  12.            yoga:yg_alignItems="center"
  13.            yoga:yg_flexDirection="row"
  14.            yoga:yg_marginHorizontal="15"
  15.            yoga:yg_marginStart="15"
  16.            yoga:yg_marginTop="50"
  17.            ohos:background_element="$graphic:item_element"
  18.    >
  19.  
  20.  
  21.        <Text
  22.                ohos:height="50vp"
  23.                ohos:width="50vp"
  24.                ohos:background_element="$media:icon"
  25.                yoga:yg_flex="0"
  26.                yoga:yg_marginStart="15"
  27.        />
  28.  
  29.  
  30.        <Text
  31.                ohos:height="50vp"
  32.                ohos:width="220vp"
  33.                ohos:text="Hello.  I am Yoga!"
  34.                ohos:text_color="#000000"
  35.                yoga:yg_flex="1"
  36.                yoga:yg_marginStart="15"
  37.                ohos:text_size="20fp"
  38.        />
  39.    </com.facebook.yoga.openharmony.YogaLayout>
  40.  
  41.    <com.facebook.yoga.openharmony.YogaLayout
  42.            ohos:background_element="$graphic:item_element"
  43.            ohos:height="60vp"
  44.            ohos:width="match_content"
  45.            yoga:yg_alignItems="center"
  46.            yoga:yg_flexDirection="row"
  47.            yoga:yg_marginHorizontal="15"
  48.            yoga:yg_marginTop="20"
  49.            yoga:yg_marginStart="15"
  50.    >
  51.  
  52.  
  53.        <Text
  54.                ohos:height="50vp"
  55.                ohos:width="50vp"
  56.                ohos:background_element="$media:icon"
  57.                yoga:yg_flex="0"
  58.                yoga:yg_marginStart="15"
  59.        />
  60.  
  61.        <Text
  62.                ohos:height="50vp"
  63.                ohos:width="250vp"
  64.                ohos:text="I am a layout engine!"
  65.                ohos:text_color="#000000"
  66.                yoga:yg_flex="1"
  67.                yoga:yg_marginStart="15"
  68.                ohos:text_size="20fp"
  69.        />
  70.    </com.facebook.yoga.openharmony.YogaLayout>
  71.  
  72.    <com.facebook.yoga.openharmony.YogaLayout
  73.            ohos:background_element="$graphic:item_element"
  74.            ohos:height="60vp"
  75.            ohos:width="match_content"
  76.            yoga:yg_alignItems="center"
  77.            yoga:yg_flexDirection="row"
  78.            yoga:yg_marginHorizontal="15"
  79.            yoga:yg_marginTop="20"
  80.    >
  81.  
  82.        <Text
  83.                ohos:height="50vp"
  84.                ohos:width="50vp"
  85.                ohos:background_element="$media:icon"
  86.                yoga:yg_flex="0"
  87.                yoga:yg_marginStart="15"
  88.        />
  89.  
  90.        <Text
  91.                ohos:height="50vp"
  92.                ohos:width="250vp"
  93.                ohos:text="I run natively."
  94.                ohos:text_color="#000000"
  95.                yoga:yg_flex="1"
  96.                yoga:yg_marginStart="15"
  97.                ohos:text_size="20fp"
  98.        />
  99.    </com.facebook.yoga.openharmony.YogaLayout>
  100.  
  101.    <com.facebook.yoga.openharmony.YogaLayout
  102.            ohos:background_element="$graphic:item_element"
  103.            ohos:height="60vp"
  104.            ohos:width="match_content"
  105.            yoga:yg_alignItems="center"
  106.            yoga:yg_flexDirection="row"
  107.            yoga:yg_marginHorizontal="15"
  108.            yoga:yg_marginTop="20"
  109.    >
  110.  
  111.        <Text
  112.                ohos:height="50vp"
  113.                ohos:width="50vp"
  114.                ohos:background_element="$media:icon"
  115.                yoga:yg_flex="0"
  116.        />
  117.  
  118.        <Text
  119.                ohos:height="50vp"
  120.                ohos:width="200vp"
  121.                ohos:text="So I\'m fast."
  122.                ohos:text_color="#000000"
  123.                yoga:yg_flex="1"
  124.                yoga:yg_marginStart="15"
  125.                ohos:text_size="20fp"
  126.        />
  127.    </com.facebook.yoga.openharmony.YogaLayout>
  128.  
  129.    <com.facebook.yoga.openharmony.YogaLayout
  130.            ohos:background_element="$graphic:item_element"
  131.            ohos:height="60vp"
  132.            ohos:width="match_content"
  133.            yoga:yg_alignItems="center"
  134.            yoga:yg_flexDirection="row"
  135.            yoga:yg_marginHorizontal="15"
  136.            yoga:yg_marginTop="20"
  137.    >
  138.  
  139.        <Text
  140.                ohos:height="50vp"
  141.                ohos:width="50vp"
  142.                ohos:background_element="$media:icon"
  143.                yoga:yg_flex="0"
  144.        />
  145.  
  146.        <Text
  147.                ohos:height="50vp"
  148.                ohos:width="200vp"
  149.                ohos:text="Who are you?"
  150.                ohos:text_color="#000000"
  151.                yoga:yg_flex="1"
  152.                yoga:yg_marginStart="15"
  153.                ohos:text_size="20fp"
  154.        />
  155.    </com.facebook.yoga.openharmony.YogaLayout>
  156.  
  157. </com.facebook.yoga.openharmony.YogaLayout>

这里 YogaLayout 其实可以看成 FlexBox（详情请参考附录：FlexBox 科普）。

可以通过参数调节子布局位置，我们可以使用 YogaLayout 上的 yoga:yg_alignItems="center" 属性使得 item 居中显示，并通过 yoga:yg_flexDirection="row" 属性使得之 item 横向排列。

子 item 也可以通过设置 yoga:yg_flex="1" 来调整自己的权重。更多属性的使用大家也可以下载项目亲自体验。

02集成方式

自行编译工程 entity、yoga、yoga_layout、fb 生成 libyoga.so、libfb.so、libyogacore.so。

将其添加到要集成的 libs 文件夹内，在 entity 的 gradle 内添加如下代码。

方式一：通过 library 生成 har 包，添加 har 包到 libs 文件夹内。

在 entry 的 gradle 内添加如下代码：

implementation fileTree(dir:'libs', include:['*.jar','*.har'])

方式二：

  1. allprojects{
  2.     repositories{
  3.         mavenCentral()
  4.     }
  5. }
  6. implementation 'io.openharmony.tpc.thirdlib:yoga-layout:1.0.0'
  7. implementation 'io.openharmony.tpc.thirdlib:yoga-yoga:1.0.0'
  8. implementation 'io.openharmony.tpc.thirdlib:yoga-fb:1.0.0'

附录 1：FlexBox 科普

布局的传统解决方案，基于盒状模型，依赖 display 属性，position 属性，float 属性。

它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案：flex。

可以简便、完整、响应式地实现各种界面布局。目前，该方案已经得到了所有浏览器的支持。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素置动成为容器成员，称为 Flex 项目（flex item），简称“项目”。

图片

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

主轴的开始位置（与边框的交叉点）叫 main start，结束位置叫 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫 main size，占据的交叉轴空间叫 cross size。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

HarmonyOS Next 最新全套视频教程

​

 《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​

《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……​

《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

​

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

​

大厂面试必问面试题

​

鸿蒙南向开发技术

​

鸿蒙APP开发必备

​

鸿蒙生态应用开发白皮书V2.0PDF

​


请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

                   

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

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

  

闽ICP备14008679号