序

本篇文章做一个三方库推广,iOS版本的flex布局方案,FlexLayout+PinLayout.非常好用,非常nice!

简介

也没啥好简介的了,网上都有,本人也用了好几年了,只是这里再推一下,顺便水一个文章.它是基于yogakit的swift版本封装没,yoga也是在移动端如雷贯耳的一个布局框架.

其他布局痛点

frame布局痛点

写起来十分麻烦,隐藏元素麻烦,容器布局麻烦,国际化不好写,阿拉伯适配滚难.

autolayout布局

复杂布局时使用autolayout性能较差,举例,比如大数据量的聊天页面,设计多数据同步更新约束,以及快速滑屏滚动
autolayout在写容器隐藏需要隐藏其占位的需求时很蛋疼,就是传统css意义上的display:none

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到

因为autolayout是相对布局,每个布局都是基于上一个布局定的位置,所以在隐藏某个元素的时候写起来的代码非常冗余,写iOS的懂得都懂.虽然还有一个UIStackView可以使用,但是UIStackView的属性很少,仅能提供很少的一部分flex的特性,也有很多痛点.比如单个子元素的交叉轴布局,比如没有整体的布局的定位,还有在我的印象中,UIStackView好像也没法设置border,background等,所以还得另外增加一个view容器等,还有无法取消某个子元素是否要参与到布局计算,比如不支持wrap布局成网格等等,还有很多很多一些写的时候让人痒痒的小痛点,总结起来就是确实不是特别舒服.(有些可能有些忘了,描述的有问题的话可以纠正一下)

主轴:

交叉轴: 交叉轴.png

texture(原AsyncDisplayKit)

性能强无敌,telegram好像就是基于此开发的,做了些demo测试,性能真得没话说,异步更新甩其他布局十万八千里,但是兼容性太弱,基本必须要需要用它的全家桶,我个人不太喜欢这么强行的框架,与原生基本没法兼容,学习成本也非常高.

flex优点

flex是一种布局的规范,在多端中都有实现,比如web,比如flutter,compose,swiftui等等,正所谓一通百通,掌握了flex,你在其他端上也能如鱼得水,这就像rx一样,一通百通,我同样也是推荐读者去学习下rx系列.
flex写起来代码也很清晰,布局速度也快,在iOS端,你可以理解为这是一种布局描述模型,最终的布局渲染其实也是frame.
布局清晰,对比autolayout,flex提供的链式写法,以及能够支撑缩进式的子布局写法,使其代码层次十分清晰.
提供padding,margin等等原生view急需的功能痛点,还有很多很多优势,也能无缝接入到autolayout中.

简单展示

这里简单展示一下一个私聊详情单个cell的写法展示.如果使用autolayout布局,这块儿的写法会非常的长,也不容易于修改.

PinLayout

pinlayout是同作者的另外一个绝对布局框架.与flexlayout可以完美结合.这东西也确实十分好用,对flex可以是一种补齐.

override func layoutSubviews() {
        super.layoutSubviews()
        flexContainer.pin.all()
        flexContainer.flex.layout(mode: flexLayoutMode)
    }

其他琐碎的小事儿

flex终究是个自定义的框架,想要完美适配到autolayout, frame布局, xib等,需要你自身掌握原生view的api特性,比如结合invalidateIntrinsicContentSize()与intrinsicContentSize提供好autolayout的适配,比如结合sizeThatfit做好frame的适配,还有xib的属性兼容等等,这些已经跟flex没有什么关系了,但是希望读者最好也能够相关的了解一下,要不然真有相应的需求的时候,不会手忙脚乱.

结尾

这是个躁动的时代,我写的这篇文章,只算是一种随笔,并没有想要教会大家什么,我从来不想当什么老师,我只是很喜欢分享.flexlayout很好,确实很好,老实人不说假话.

Swift FlexLayout与PinLayout推荐

序

简介