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

全网首发：鸿蒙开源第三方组件，跨平台自适应布局yoga组件_yoga布局引擎

作者：知新_RL | 2024-07-15 10:22:58

赞

踩

yoga布局引擎

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。

最后

如果你想成为一名鸿蒙开发者，以下这些资料将是十分优质且有价值，让你的鸿蒙开发之路事半功倍！相对于网上那些碎片化的知识内容，这份学习资料的知识点更加系统化，更容易理解和记忆。

内容包含了：【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）

1.鸿蒙核心技术学习路线

​

2.大厂面试必问面试题

​

3.鸿蒙南向开发技术

​

 4.鸿蒙APP开发必备

​

 5.HarmonyOS Next 最新全套视频教程

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

​

这份全套完整版的学习资料已经全部打包好，朋友们如果需要可以点击→鸿蒙Next全套VIP学习资料：免费领取（安全链接，放心点击）

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

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

  

闽ICP备14008679号