跨平台布局引擎Yoga的学习和使用

标签: ios 跨平台 布局 native yoga
4人阅读 评论(0) 收藏 举报
分类:

一、相关网站

 ### 1.Yogalayout
主页
 ### 2.支持的框架
安卓:fblitho主页   github地址
iOS: Componentkit github地址
React Native: React Native   github地址

3.参考文章:

参考文章1:【翻译】Yoga 教程: 使用跨平台布局引擎
参考文章2:Yoga 教程: 使用跨平台布局引擎
yoga1.png

一、Yoga的发展

Yoga是一个基于Flexbox的跨平台布局引擎,能使布局工作更轻松。
Yoga 作为一个通用的布局系统,来代替iOS上的AutoLayout 或 web 上的 Cascading Style Sheets (CSS)。
最初是Facebook在2014年推出的一个CSS布局的开源库,2016年改版并更名为Yoga。Yoga 支持多个平台,包括 Java、C#、C 和 Swift。
库开发者可以集成Yoga到布局系统,就如 Facebook 已经集成进React Native/Litho/Componentkit。Yoga 也是一个 iOS 开发者可以直接用来布局视图的框架。

二、了解Flexbox

Flexbox 也称为 CSS Flexible Box,被创建用来处理 web 上的复杂布局。
一个关键特征是在给定方向上高效布局内容,并能“灵活”处理自身大小来适应一些空间。
Flexbox 由 flex 容器组成,每个含有一个或多个 flex 项目:如下图
flexbox1.png

Flexbox 定义 flex item 如何在一个 flex 容器里布局。Flex container之外和 flex item内部的内容会照常渲染。

flexbox2.png

Flexbox 允许指定Flex item在行与列上的定位和间隔。
对齐内容(justify-content)指定项目沿容器的行与列对齐。

flexbox3.png

flex-start:定位在容器的开端。
flex-end:定位在容器的末端。
center: 定位在容器的中间。
space-between:项目在容器内被空白空间均匀间隔开,第一个项目在开端位置,最后一个项目在末端位置。
space-around:项目周围以同等空间均匀间隔。
对齐项目(align-items)指定项目沿容器的横轴对齐。下图显示容器的 flex 方向为行时(这意味着横轴垂直运行)的项目展示位置:

flexbox4.png

项目在容器的开端、中间和末端垂直对齐。
以上初步的 Flexbox 属性应该让你感受了 Flexbox 的工作原理。
还有更多属性可供你使用。
有些控制项目依据可用容器空间来拉伸或收缩的方式。
另一些可以设置填充(padding)、边距(margin),甚至大小(size)。
Flex demo:http://runjs.cn/code/osns3yas

flexbox5.png

四、Yoga 对比Flexbox

Yoga 是基于 Flexbox 的,也有一些不同。
Yoga 并没有实现全部 CSS Flexbox。
它省略了非布局属性,如设置颜色。
Yoga 改进了一些 Flexbox 的属性来提供更好的从右到左的支持。
最后,Yoga 增加了一个新的比例(AspectRatio)属性来处理在布置某些元素如图片时常见的需求

五、使用YogaKit(OC/Swift)来构建布局

Yoga API 将使你沐浴在 Flexbox 熟悉度的余晖中。可以在 Swift app 布局中应用你学到的 Flexbox。
Yoga 使用 C 编写,主要关注于优化性能和简便集成到其它平台。
对于开发 iOS app,你将使用 YogaKit 工作,这是一个由 C 实现的封装包。
回顾 Flexbox 在 web 里的样例,布局是通过样式属性来配置的。
而 YogaKit,布局配置是交由 YGLayout 对象来完成。
YGLayout 包含的属性有 flex 方向,对齐内容,对齐项目,填充和边距。
YogaKit 曝露 YGLayout 作为 UIView 上的一个 Category。
这个 Category 添加 configureLayout(block:) 方法到 UIView。
将 YGLayout 参数传进block里,并使用这些信息来配置视图的布局属性。
通过使用所需的 Yoga 属性配置每个参与的视图来构建你的布局。
一旦完成,你在根视图的 YGLayout 上调用 applyLayout(preservingOrigin:)。
这会计算并应用布局到根视图和子视图。

1、布局代码

完整代码

Podfile文件内容

platform :ios, '10.0'
use_frameworks!
target "YogaKitDemo" do
pod 'Yoga', '~> 1.6.0' //yoga 使用c/c++实现
pod 'YogaKit' //提供给Objective-C和Swift使用
end
-(void)dodoViews
{

    [self.view configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.width = YGPointValue(self.view.bounds.size.width);
        layout.height = YGPointValue(self.view.bounds.size.height);
        layout.alignItems = YGAlignCenter;
    }];

    UIView *contentView = [[UIView alloc]init];
    contentView.backgroundColor = [UIColor lightGrayColor];
    [contentView configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = true;
        // 4
        layout.flexDirection =  YGFlexDirectionRow;
        layout.width = YGPointValue(320);
        layout.height = YGPointValue(80);
        layout.marginTop = YGPointValue(100);

        layout.padding =  YGPointValue(10);//设置了全部子项目的填充值
    }];

    UIView *child1 = [[UIView alloc]init];
    child1.backgroundColor = [UIColor redColor];
    [child1 configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.width = YGPointValue(80);
        layout.marginRight = YGPointValue(10);
    }];



    UIView *child2 = [[UIView alloc]init];
    child2.backgroundColor = [UIColor blueColor];
    [child2 configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.width = YGPointValue(80);
        layout.flexGrow = 1;
        layout.height = YGPointValue(20);
        layout.alignSelf = YGAlignCenter;

    }];

    [contentView addSubview:child1];
    [contentView addSubview:child2];
    [self.view addSubview:contentView];
    [self.view.yoga applyLayoutPreservingOrigin:YES];

}

显示效果:
yoga1.png

2、运行步骤

第1步:设置view的layout

configureLayoutWithBlock:(YGLayoutConfigurationBlock)block

第2步:将layout应用到view

applyLayoutPreservingOrigin:(BOOL)preserveOrigin
##### 2-1:计算布局
calculateLayoutWithSize
##### 2-2:将布局应用到view层级上
YGApplyLayoutToViewHierarchy

查看评论

版式布局利器InDesign

-
  • 1970年01月01日 08:00

瑜伽教程: 一个跨平台的布局引擎

原文:Yoga Tutorial: Using a Cross-Platform Layout Engine 作者:Christine Abernathy 译者:kmyhy 瑜伽(Yog...
  • kmyhy
  • kmyhy
  • 2017-08-29 11:39:46
  • 1381

由FlexBox算法强力驱动的Weex布局引擎

前言 在上篇文章里面谈了Weex在iOS客户端工作的基本流程。这篇文章将会详细的分析Weex是如何高性能的布局原生界面的,之后还会与现有的布局方法进行对比,看看Weex的布局性能究竟如何。 目录 ...
  • qq_30513483
  • qq_30513483
  • 2017-04-06 10:56:04
  • 1166

跨平台8大引擎

针对不同平台以及跨平台工具的特性,结合对国内外开发者的调查结果,笔者综合评选了8个最受欢迎的引擎或框架,以协助跨平台开发者提高编程效率。 1. Cocos2d-x Cocos2d是一个开源...
  • zxxSsdsd
  • zxxSsdsd
  • 2013-11-21 13:48:54
  • 2035

iOS 上的FlexBox布局

为什么要了解 FlexBox? 最近时不时的听到关于 FlexBox 的声音,除了在 Weex 以及 React Native 两个著名的跨平台项目里有用到 FlexBox 外,AsyncDispl...
  • Three_Zhang
  • Three_Zhang
  • 2018-01-12 09:59:16
  • 567

最受欢迎的游戏引擎集结号:跨平台篇

移动应用分类五花八门,面对众多对手,移动游戏突破重围,成了大家日常生活中的基础娱乐活动之一。也因此,越来越多的开发者开始投身移动游戏的开发中。不过,面对多样化的目标平台,要知道选择一个适合自己的跨平台...
  • y97523szb
  • y97523szb
  • 2015-07-11 18:39:51
  • 4236

起源引擎

引擎概述 前序体验   如果想更好的了解“起源”引擎的概念,目前推荐的游戏《半条命2》、《军团要塞2》、《求生之路》(由引擎开发商Valve制作)这3款可以说是是为“起源”引擎巅峰之作。另外还有《...
  • pizi0475
  • pizi0475
  • 2012-05-16 21:21:04
  • 4552

从零开始写一个简单好用的游戏服务器引擎[2] - 跨平台相关

因为项目需要,所以必须做成跨平台的.一方面是历史原因,一方面是有时确实会碰上只有Windows Server或者只有Linux服务器的情况.不过对于服务端来讲,跨平台还是不算太复杂,主要就是以下几个方...
  • sherry0319
  • sherry0319
  • 2016-10-09 15:24:46
  • 1030

ThinkPad S1 Yoga体验

我买的就是这个配置,商务用的,平时办公室直接接显示器,晚上拿回家。 用了一周, 整体感觉很不错。  优点  1. 键盘!本来想买三星Samsung Ativ Book 9 Plus, 或者 华硕的...
  • wishfly
  • wishfly
  • 2015-01-10 00:44:30
  • 1006

关于跨平台引擎的介绍

目前主流的跨平台引擎有Cocos2d-x、Unity3D、Egret白鹭引擎  日前,基于Java语言开发的OGEngine手游引擎宣布加入市场竞争,打破了国内Cocos2d-x与unity的对峙情形...
  • baidu_30360575
  • baidu_30360575
  • 2016-04-02 16:50:58
  • 382
    个人资料
    持之以恒
    等级:
    访问量: 25万+
    积分: 4735
    排名: 7683
    联系方式

    所在地:北京海淀 


    从事:iOS移动端开发。 


    技术讨论群:536739494


    邮箱:utopia.pro@aliyun.com 


    博客内文章、视频有错误或不妥之处,请您留言或邮件指明,不胜感激,发现会及时修正。


    博客内有些资料可能来自报刊、杂志、书籍、如果有侵犯到版权或个人利益,请您留言或邮件指明,第一时间处理。


    最新评论