【全网首发】鸿蒙开源三方组件--跨平台自适应布局yoga组件
目录：
介绍
yoga是facebook打造的一个跨IOS、Android、Window平台在内的布局引擎，兼容Flexbox布局方式，让界面更加简单。
Yoga官网：https://facebook.github.io/yoga/
官网上描述的特性包括：
- 完全兼容Flexbox布局，遵循W3C的规范
- 支持java、C#、Objective-C、C四种语言
- 底层代码使用C语言编写，性能不是问题
- 支持流行框架如React Native
目前在已开源的鸿蒙组件（https://gitee.com/openharmony-tpc/yoga）的功能现状如下：
- native层和接口已经打通
- 支持自定义xml属性来控制布局（通过YogaLayout）
- 设置布局中不支持Image控件（onDrawCanvas暂不支持主动回调，所以yoga没办法扫描到它），请使用Text控件替代
- 不支持VirtualYogaLayout
如何使用
首先我们在MainAbility中定义界面路由
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(MainAbilitySlice.class.getName());
addActionRoute("action.dydrawnode.slice", DynamicsDrawNodeSlice.class.getName());
addActionRoute("action.showrow.slice", ShowRowAbilitySlice.class.getName());
addActionRoute("action.inflate.slice", BenchmarkInflateAbilitySlice.class.getName());
}
}
然后我们来到MainAbilitySlice,其实就是做了一个向其他界面跳转的动作，并提前加载yoga的so库
public class MainAbilitySlice extends AbilitySlice {
static {
System.loadLibrary("yoga");
System.loadLibrary("yogacore");
System.loadLibrary("fb");
}
@Override
public void onStart(Intent intent) {
super.onStart(intent);
setUIContent(ResourceTable.Layout_main_layout);
Button btn0= (Button) findComponentById(ResourceTable.Id_btn_1);
btn0.setClickedListener(component -> {
Intent intent1 = new Intent();
Operation operation = new Intent.OperationBuilder()
.withAction("action.dydrawnode.slice")
.build();
intent1.setOperation(operation);
startAbilityForResult(intent1, 1);
});
Button btn2= (Button) findComponentById(ResourceTable.Id_btn_2);
btn2.setClickedListener(component -> {
Intent intent1 = new Intent();
Operation operation = new Intent.OperationBuilder()
.withAction("action.showrow.slice")
.build();
intent1.setOperation(operation);
startAbilityForResult(intent1, 1);
});
Button btn1= (Button) findComponentById(ResourceTable.Id_btn_3);
btn1.setClickedListener(component -> {
Intent intent1 = new Intent();
Operation operation = new Intent.OperationBuilder()
.withAction("action.inflate.slice")
.build();
intent1.setOperation(operation);
startAbilityForResult(intent1, 1);
});
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
第一个演示界面
这里yoga向我们展示了动态布局的能力，效果图如下：
实现的代码如下：
public class DynamicsDrawNodeSlice extends AbilitySlice {
private static final int VIEW_WIDTH = 200;
private static final int VIEW_HEIGHT = 200;
private ArrayList<Component> mViewList = new ArrayList<>();
private ArrayList<YogaNode> mYogaNodeList = new ArrayList<>();
private int[][] colors = new int[][]{
new int[]{0xff6200ea, 0xff651fff, 0xff7c4dff, 0xffb388ff},
new int[]{0xffd50000, 0xffff1744, 0xffff5252, 0xffff8a80},
new int[]{0xffc51162, 0xfff50057, 0xffff4081, 0xffff80ab},
new int[]{0xffaa00ff, 0xffd500f9, 0xffe040fb, 0xffea80fc}
};
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
PositionLayout container = new PositionLayout(this);
DisplayAttributes displayAttributes = DisplayManager.getInstance().getDefaultDisplay(this).get().getAttributes();
float screenWidth = displayAttributes.width;
float screenHeight = displayAttributes.height;
YogaNode root = new YogaNodeJNIFinalizer();
root.setWidth(screenWidth);
root.setHeight(screenHeight);
root.setFlexDirection(YogaFlexDirection.COLUMN);
createRowNodeAndView(root, 0);
createRowNodeAndView(root, 1);
createRowNodeAndView(root, 2);
createRowNodeAndView(root, 3);
root.calculateLayout(screenWidth, screenHeight);
for (int i = 0; i < mViewList.size(); i++) {
Component component = mViewList.get(i);
YogaNode yogaNode = mYogaNodeList.get(i);
YogaNode yogaNodeOwner = yogaNode.getOwner();
component.setTranslationX(yogaNodeOwner.getLayoutX() + yogaNodeOwner.getLayoutX());
component.setTranslationY(yogaNodeOwner.getLayoutY() + yogaNodeOwner.getLayoutY());
component.setLeft((int) (yogaNodeOwner.getLayoutX() + yogaNode.getLayoutX()));
component.setTop((int) (yogaNodeOwner.getLayoutY() + yogaNode.getLayoutY()));
container.addComponent(component);
}
super.setUIContent(container);
}
private void createRowNodeAndView(YogaNode root, int index) {
YogaNode row = new YogaNodeJNIFinalizer();
row.setHeight(VIEW_HEIGHT);
row.setWidth(VIEW_WIDTH * 4);
row.setFlexDirection(YogaFlexDirection.ROW);
row.setMargin(YogaEdge.ALL, 20);
for (int i = 0; i < 4; i++) {
YogaNode yogaNode = new YogaNodeJNIFinalizer();
yogaNode.setWidth(VIEW_WIDTH);
yogaNode.setHeight(VIEW_HEIGHT);
Component component = createView(colors[index][i]);
row.addChildAt(yogaNode, i);
mYogaNodeList.add(yogaNode);
mViewList.add(component);
}
root.addChildAt(row, index);
}
private Component createView(int color) {
Component view = new Component(this);
ShapeElement background = new ShapeElement();
background.setRgbColor(convertColor(color));
view.setBackground(background);
ComponentContainer.LayoutConfig layoutConfig = new AdaptiveBoxLayout.LayoutConfig(VIEW_WIDTH, VIEW_HEIGHT);
view.setLayoutConfig(layoutConfig);
return view;
}
/**
* 转换颜色
* @param color
* @return RgbColor
*/
public RgbColor convertColor(int color) {
int colorInt = color;
int red = (colorInt & 0xff0000) >> 16;
int green = (colorInt & 0x00ff00) >> 8;
int blue = (colorInt & 0x0000ff);
return new RgbColor(red, green, blue);
}
}
代码中定义了一个root根布局，宽高为屏幕的宽高，接着定义了四个行布局，并向每个行布局里添加4个子布局，最重要的是在调用root.calculateLayout(screenWidth, screenHeight)后，便将每个子布局的位置给确定了下来，然后根据获取到的每个布局的参数，给每个Component设置位置。该演示只是借助yoga组件来确定每个Component位置，真正使渲染生效的还是基于鸿蒙的原生控件。
第二个演示界面
接下来展示如何使用yoga组件在xml里通过填写属性来控制item位置的能力，效果图如下：
代码如下：
<?xml version="1.0" encoding="utf-8" ?>
<com.facebook.yoga.openharmony.YogaLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:yoga="http://schemas.huawei.com/apk/res-auto"
ohos:height="match_parent"
ohos:width="match_parent"
>
<com.facebook.yoga.openharmony.YogaLayout
ohos:height="60vp"
ohos:width="match_content"
yoga:yg_alignItems="center"
yoga:yg_flexDirection="row"
yoga:yg_marginHorizontal="15"
yoga:yg_marginStart="15"
yoga:yg_marginTop="50"
ohos:background_element="$graphic:item_element"
>
<Text
ohos:height="50vp"
ohos:width="50vp"
ohos:background_element="$media:icon"
yoga:yg_flex="0"
yoga:yg_marginStart="15"
/>
<Text
ohos:height="50vp"
ohos:width="220vp"
ohos:text="Hello. I am Yoga!"
ohos:text_color="#000000"
yoga:yg_flex="1"
yoga:yg_marginStart="15"
ohos:text_size="20fp"
/>
</com.facebook.yoga.openharmony.YogaLayout>
<com.facebook.yoga.openharmony.YogaLayout
ohos:background_element="$graphic:item_element"
ohos:height="60vp"
ohos:width="match_content"
yoga:yg_alignItems="center"
yoga:yg_flexDirection="row"
yoga:yg_marginHorizontal="15"
yoga:yg_marginTop="20"
yoga:yg_marginStart="15"
>
<Text
ohos:height="50vp"
ohos:width="50vp"
ohos:background_element="$media:icon"
yoga:yg_flex="0"
yoga:yg_marginStart="15"
/>
<Text
ohos:height="50vp"
ohos:width="250vp"
ohos:text="I am a layout engine!"
ohos:text_color="#000000"
yoga:yg_flex="1"
yoga:yg_marginStart="15"
ohos:text_size="20fp"
/>
</com.facebook.yoga.openharmony.YogaLayout>
<com.facebook.yoga.openharmony.YogaLayout
ohos:background_element="$graphic:item_element"
ohos:height="60vp"
ohos:width="match_content"
yoga:yg_alignItems="center"
yoga:yg_flexDirection="row"
yoga:yg_marginHorizontal="15"
yoga:yg_marginTop="20"
>
<Text
ohos:height="50vp"
ohos:width="50vp"
ohos:background_element="$media:icon"
yoga:yg_flex="0"
yoga:yg_marginStart="15"
/>
<Text
ohos:height="50vp"
ohos:width="250vp"
ohos:text="I run natively."
ohos:text_color="#000000"
yoga:yg_flex="1"
yoga:yg_marginStart="15"
ohos:text_size="20fp"
/>
</com.facebook.yoga.openharmony.YogaLayout>
<com.facebook.yoga.openharmony.YogaLayout
ohos:background_element="$graphic:item_element"
ohos:height="60vp"
ohos:width="match_content"
yoga:yg_alignItems="center"
yoga:yg_flexDirection="row"
yoga:yg_marginHorizontal="15"
yoga:yg_marginTop="20"
>
<Text
ohos:height="50vp"
ohos:width="50vp"
ohos:background_element="$media:icon"
yoga:yg_flex="0"
/>
<Text
ohos:height="50vp"
ohos:width="200vp"
ohos:text="So I\'m fast."
ohos:text_color="#000000"
yoga:yg_flex="1"
yoga:yg_marginStart="15"
ohos:text_size="20fp"
/>
</com.facebook.yoga.openharmony.YogaLayout>
<com.facebook.yoga.openharmony.YogaLayout
ohos:background_element="$graphic:item_element"
ohos:height="60vp"
ohos:width="match_content"
yoga:yg_alignItems="center"
yoga:yg_flexDirection="row"
yoga:yg_marginHorizontal="15"
yoga:yg_marginTop="20"
>
<Text
ohos:height="50vp"
ohos:width="50vp"
ohos:background_element="$media:icon"
yoga:yg_flex="0"
/>
<Text
ohos:height="50vp"
ohos:width="200vp"
ohos:text="Who are you?"
ohos:text_color="#000000"
yoga:yg_flex="1"
yoga:yg_marginStart="15"
ohos:text_size="20fp"
/>
</com.facebook.yoga.openharmony.YogaLayout>
</com.facebook.yoga.openharmony.YogaLayout>
这里YogaLayout其实可以看成FlexBox（详情请参考附录：FlexBox科普），可以通过参数调节子布局位置，我们可以使用YogaLayout上的yoga:yg_alignItems="center"属性使得item居中显示，并通过yoga:yg_flexDirection="row"属性使得之item横向排列。子item也可以通过设置yoga:yg_flex="1"来调整自己的权重。更多属性的使用大家也可以下载项目亲自体验。
集成方式
自行编译工程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'])
方式二：
allprojects{
repositories{
mavenCentral()
}
}
implementation 'io.openharmony.tpc.thirdlib:yoga-layout:1.0.0'
implementation 'io.openharmony.tpc.thirdlib:yoga-yoga:1.0.0'
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。
附录2：相关资料
- 项目地址：https://gitee.com/openharmony-tpc/yoga
- IDE官方下载地址：https://developer.harmonyos.com/cn/develop/deveco-studio
- 阮一峰的flex布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
想了解更多内容，请访问51CTO和华为合作共建的鸿蒙社区：https://harmonyos.51cto.com
【全网首发】鸿蒙开源三方组件--跨平台自适应布局yoga组件的更多相关文章
- 【全网首发】鸿蒙开源三方组件--强大的弹窗库XPopup组件
目录: 1.介绍 2.效果一览 3.依赖 4.如何使用 5.下载链接 6.<鸿蒙开源三方组件>文章合集 1. 介绍 XPopup是一个弹窗库,可能是Harmony平台最好的弹窗库.它从 ...
- 全球首发—鸿蒙开源平台OpenGL
目录: 前言 背景 鸿蒙OpenGL-ISRC的结构 OpenGL-ISRC和鸿蒙SDK OpenGL的区别 OpenGL-ISRC的使用 前言 基于安卓平台的OpenGL(androidxref.c ...
- react实战 : 用矩阵思想做一个自适应布局容器组件
需求是这样的. 有一个需要显示若干方块型元素的小区域 数量比较少的时候显示一排 数量比较多的时候显示两排 用 grid 不好,因为当数量为奇数的时候需要两排里面的元素都乖乖的居中显示. 用 flex ...
- 鸿蒙开源第三方件组件——轮播组件Banner
目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...
- 鸿蒙开源第三方组件——SlidingMenu_ohos侧滑菜单组件
目录: 1.前言 2.背景 3.效果展示 4.Sample解析 5.Library解析 6.<鸿蒙开源第三方组件>文章合集 前言 基于安卓平台的SlidingMenu侧滑菜单组件(http ...
- 【开源】C#跨平台物联网通讯框架ServerSuperIO（SSIO）
[连载]<C#通讯(串口和网络)框架的设计与实现>-1.通讯框架介绍 [连载]<C#通讯(串口和网络)框架的设计与实现>-2.框架的总体设计 目 录 C#跨平台物联 ...
- 免费开源的DotNet任务调度组件Quartz.NET（.NET组件介绍之五）
很多的软件项目中都会使用到定时任务.定时轮询数据库同步,定时邮件通知等功能..NET Framework具有“内置”定时器功能,通过System.Timers.Timer类.在使用Timer类需要面对 ...
- 免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）
在生活中有一种东西几乎已经快要成为我们的另一个电子”身份证“,那就是二维码.无论是在软件开发的过程中,还是在普通用户的日常中,几乎都离不开二维码.二维码 (dimensional barcode) , ...
- 最好的.NET开源免费ZIP库DotNetZip（.NET组件介绍之三）
在项目开发中,除了对数据的展示更多的就是对文件的相关操作,例如文件的创建和删除,以及文件的压缩和解压.文件压缩的好处有很多,主要就是在文件传输的方面,文件压缩的好处就不需要赘述,因为无论是开发者,还是 ...
随机推荐
- vue项目配置 `webpack-obfuscator` 进行代码加密混淆
背景 公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段.字符编码转 ...
- vue 递归调用组件出错
报错信息: Avoid mutating an injected value directly since the changes will be overwritten whenever the p ...
- Typora学习
Markdown学习总结 标题的使用格式 # 一阶标题 或者 ctrl + 1 ## 二阶标题 或者 ctrl + 2 ### 三阶标题 或者 ctrl + 3 #### 四阶标题 或者 ctrl + ...
- Python开发环境从零搭建-03-安装Python解释器并配置
想要从零开始搭建一个Python的开发环境说容易也容易 说难也能难倒一片开发人员,在接下来的一系列视频中,会详细的讲解如何一步步搭建python的开发环境 本文章是搭建环境的第3篇 讲解的内容是:安装 ...
- 循环单链表定义初始化及创建（C语言）
#include <stdio.h> #include <stdlib.h> /** * 含头节点循环单链表定义,初始化 及创建 */ #define OK 1; #defin ...
- 一款适用于windows10的反间谍工具
Free antispy tool for Windows 10 前言 看标题的话,可能觉得"我要这款工具能干啥?",我刚开始也有这种疑惑,但后来我对于这款软件仔细想了想,这款还是 ...
- Linux Python2 升级到 Python3
国内企业服务器用 CentOS 系统的比较多,CentOS8 系统已经将系统默认 Python 版本调整为了 Python3,但是 CentOS7 的存量还是很大,毕竟对企业生产服务来说稳定大于一切, ...
- Android Studio 之 通过 Intent 完成点击按钮实现页面跳转
•Intent 简介 Intent 是 Android 程序中各组件之间进行交互的一种重要方式: 它不仅可以指明当前组件想要执行的动作,还可以在不同组件之间传递数据. Intent 有多个构造函数,其 ...
- 基于ceph rbd 在kubernetes harbor 空间下创建动态存储
[root@bs-k8s-ceph ~]# ceph osd pool create harbor 128 Error ETIMEDOUT: crush test failed with -110: ...
- vmstat-观察进程上线文切换
vmstat 是一款指定采样周期和次数的功能性监测工具,我们可以看到,它不仅可以统计内存的使用情况,还可以观测到 CPU 的使用率.swap 的使用情况.但 vmstat 一般很少用来查看内存的使用情 ...