iOS 中使用 FlexBox 布局实现图片九宫格

栏目: CSS · 发布时间: 5年前

内容简介:首发于公众号在 iOS 中官方支持的布局方式是 AutoLayout,是一种基于控件之间相互约束关系的自动布局工具。官方的 AutoLayout 虽然用起来简单,但是有两个非常不方便的地方:

首发于公众号

在 iOS 中官方支持的布局方式是 AutoLayout,是一种基于控件之间相互约束关系的自动布局工具。

官方的 AutoLayout 虽然用起来简单,但是有两个非常不方便的地方:

  1. 原生 API 接口使用不友好
  2. 约束越多性能损失越多

第1个问题可以使用第三方库来解决,比如 SnapKit(swift)、Masonry(oc)。 性能问题则无解,对于混合布局的 Cell 如果全部使用自动布局就会看到很明显的滑动卡顿。

对于复杂 Cell 布局,程序员们为了追求极致的帧率,一般都采用手写布局,帧率是上去了而维护的成本也最高。

为了兼顾易用性和高效率,Facebook 开发并开源了自己的布局库:Yoga。

Yoga 是 FlexBox 的子集,并没有全部实现 FlexBox,但是对于大部分应用场景已经足够了。

接触过前端开发的朋友对 FlexBox 布局一定不陌生,CSS 写 flex 布局真的太方便了。

FlexBox 是不同于 AutoLayout 的布局方式,FlexBox 是自约束,每个控件的位置都是相对于自身所在的 Box 相对布局,这就不存在 AutoLayout 基于控件间约束的耦合。

Yoga 是基于手动布局的方式,这样效率就很高,而且性能损耗很小,而且使用很简单,用过 Masonry 的同学可以很快上手。

使用方法:

override init(frame: CGRect) {
  super.init(frame: frame)
  contentView.configureLayout { (layout) in
  layout.isEnabled = true
}

override func layoutSubviews() {
  super.layoutSubviews()
   yoga.applyLayout(preservingOrigin: true)
}
复制代码

layout.isEnabled = true 开启 yoga 布局, 在 layoutSubviews 中使用 applyLayout 自动调整布局。

这和手动布局的流程是一样的,可以看出来 yoga 本质上也是手动布局,只是再也不用手算坐标了。

yoga 同时也有很好的易用性,比如要实现一个简单的九宫格,只需要简单的设置一下布局参数。

override init(frame: CGRect) {
  super.init(frame: frame)

  configureLayout { (layout) in
  layout.isEnabled = true
  }

  contentView = UIView(frame: bounds)
  addSubview(contentView)
  contentView.configureLayout { (layout) in
    layout.isEnabled = true
    layout.flexDirection = .row
    layout.flexWrap = .wrap
    layout.flexGrow = 1
  }

  for _ in 0...8 {
    let imageView = UIImageView(frame: .zero)
    imageView.backgroundColor = .orange
    contentView.addSubview(imageView)
    imageView.configureLayout { (layout) in
      layout.isEnabled = true
      layout.width = 86
      layout.height = 86
      layout.marginTop = 10
      layout.marginLeft = 10
    }
  }
}

override func layoutSubviews() {
  super.layoutSubviews()
  yoga.applyLayout(preservingOrigin: true)
}
复制代码

核心参数是 layout.flexWrap = .wrap ,让视图布局自动换行,再计算好间距和宽高,这样就实现了九宫格的排列效果。

运行的效果:

iOS 中使用 FlexBox 布局实现图片九宫格

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

社交电商

社交电商

[美] Stephan Spencer(斯蒂芬.斯宾塞)、[美] Jimmy Harding(吉米.哈丁)、[美] Jennifer Sheahan(詹尼弗.希汉) / 谭磊 / 电子工业出版社 / 2015-3 / 69.00元

你想要在互联网上赚钱吗?想要做好电子商务吗?那么你一定不能忽视社交媒体的力量。不管你想要营销的是实物商品、电子类产品还是本地的服务,这本书会教你怎么做。 《社交电商》全面介绍形形色色的社交媒体以及如何利用这些社交媒体来为你的企业做好服务。如果你经营得不好,在社交媒体上散发出的只是噪声而不是真正的信息。 而如果做得好,社交媒体会成为你最有效的营销工具,帮助你赢得老客户的拥戴,获得新的客户。 ......一起来看看 《社交电商》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具