iOS 开发高手课
戴铭
前滴滴出行技术专家
42934 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 47 讲
用户故事 (1讲)
iOS 开发高手课
15
15
1.0x
00:00/00:00
登录|注册

27 | 如何用 Flexbox 思路开发?跟自动布局比,Flexbox 好在哪?

示例代码
ASLayoutElement协议
ASLayoutSpec子类
主要思想
Flex容器和Flex项目
跨平台通用的布局思想
更多、更规范的布局方法
Flexbox布局算法设计
主要思想
ASStackLayoutSpec
ASLayoutSpec
Flexbox 布局思路
Flexbox 优势
自动布局 vs Flexbox
Flexbox 算法
Texture 如何使用 Flexbox 思路进行布局?
Flexbox 好在哪?
课后小作业
参考文章

该思维导图由 AI 生成,仅供参考

你好,我是戴铭。今天,我要和你跟你聊聊 Flexbox。
你很有可能不知道 Flexbox 是啥,但一定不会对 React Native、Weex 和 Texture(AsyncDisplayKit) 感到陌生,而 Flexbox 就是这些知名布局库采用的布局思路。不可小觑的是,苹果公司官方的 UIStackView,也是采用 Flexbox 思路来实现布局的。
接下来,我们就一起来看看 Flexbox 布局思路有什么优势,以及如何用它来实现布局。

Flexbox 好在哪?

目前来看,iOS 系统提供的布局方式有两种:
一种是 Frame 这种原始方式,也就是通过设置横纵坐标和宽高来确定布局。
另一种是自动布局(Auto Layout),相比较于 Frame 需要指出每个视图的精确位置,自动布局对于视图位置的描述更加简洁和易读,只需要确定两个视图之间的关系就能够确定布局。
通过 MasonrySnapKit这些第三方库,自动布局的易用性也有了很大提升。而且 iOS 12 以后,苹果公司也已经解决了自动布局在性能方面的问题(这里,你可以再回顾下前面第 4 篇文章《Auto Layout 是怎么进行自动布局的,性能如何?》中的相关内容)。
那么在这种情况下,我们为什么还要关注其他布局思路呢?关于原因,我觉得主要包括以下两个方面。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Flexbox是一种灵活的布局思路,被广泛应用于React Native、Weex和Texture等知名布局库中。相比iOS系统提供的Frame和自动布局方式,Flexbox提供了更多、更规范的布局方法,更易于使用。其主要思想是通过Flex容器设定的属性来改变内部Flex项目的宽、高,并调整项目的位置来填充容器的可用空间。Texture框架的布局方案考虑得十分长远,提供了多种布局思路,并通过ASLayoutSpec的子类实现了各种布局思路。其中,ASStackLayoutSpec是应用最广泛的子类之一,其布局思路和Flexbox类似,可以通过示例代码了解如何通过Texture使用Flexbox布局思路开发界面。Flexbox的算法设计也是值得深入了解的,了解其布局算法设计可以更好地理解Flexbox布局,同时也有助于设计适合自身业务场景的布局算法。随着新硬件的不断推出,如手表和折叠屏手机,掌握更多的布局算法将变得更加重要。Flexbox的应用不仅限于React Native和Weex,Yoga库为许多其他开源框架提供支持,且可以方便地集成到Android和iOS上。整体而言,Flexbox的灵活性和适用性使其成为一种值得关注和学习的布局思路。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《iOS 开发高手课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(14)

  • 最新
  • 精选
  • 豆豆斗地主
    老师您好 请问在实际开发中 是否以删除 storyboard的方式进行开发?

    作者回复: 可以的

    2019-05-13
  • Jeffrey
    肯定frame效率高
    2019-05-11
    8
  • K
    以下是个人理解,如有问题请指正,谢谢。 yoga是对frame的封装,内部实现了Flexbox算法(理念),texture是对yoga的封装,增加了异步渲染等。 性能上,由于frame是线性的,所以yoga和texture也应该是线性的,或者更优。而autolayout属于指数级的,这可能跟两者算法有关。所以,在使用上,在简单的布局页面或者性能要求不高的页面可以直接使用autolayout。相反,性能要求高的页面,可以选择frame, texture, yoga.
    2019-05-18
    3
    6
  • Z
    react native 里面的布局确实比较好用,比原生节省了开发效率
    2019-05-14
    1
    5
  • powerGuo
    作者的怎么看flexlib这个库,我已经在我自己开始使用了,就是把flexbox编写的xml通过解析转换成Yoga的iOS原布局
    2020-02-08
    3
  • 最强小鲁班
    UIStackView真的巨好用
    2019-10-30
    2
    2
  • Geek_2844bd
    Texture和frame对比,性能如何?
    2019-05-11
    2
  • lvv
    推荐一下我基于 Facebook 的 yoga 修改的版本,支持 iOS macOS tvOS 项目地址:https://github.com/cntrump/yoga
    2020-05-01
    1
  • Geek_8e8cbf
    那现阶段想在iOS中使用Flexbox布局,是用Yoga,还是Texture呢?
    2019-05-11
    2
    1
  • ...
    flexbox相比自动布局的具体好处是?(除了前端生态之外的)
    2021-09-04
收起评论
显示
设置
留言
14
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部