美文网首页
iOS等间距布局

iOS等间距布局

作者: Stroman | 来源:发表于2017-11-15 10:57 被阅读329次

大家都知道iOS布局惯用的手法就是约束布局,至于传统的非主流frame神马的在这里就不提了,再有就是UIStackView。
但是在实践中我发现如果想实现等间距布局,上面的方法是很难达到目的的,当然我说很难不代表不能,只不过是麻烦+不完美。
于是我查资料发现了叫做UILayoutGuide,它能完美地解决等间距布局的问题。
所谓等间距布局就是下面这个效果:


1.png

思路跟以前直接用约束布局,用视图作为占位符的做法是一致的。
就是在想要对齐的方向上放置UILayoutGuide,每个目标视图两边各有一个。
而目标视图只需要设置它们的宽高比和相对于父视图的对齐方式即可。
然后设置它们宽度相等即可,具体代码如下所示:

    //首先生成UILayoutGuide
    let layoutGuide0:UILayoutGuide = UILayoutGuide.init()
    let layoutGuide1:UILayoutGuide = UILayoutGuide.init()
    let layoutGuide2:UILayoutGuide = UILayoutGuide.init()
    let layoutGuide3:UILayoutGuide = UILayoutGuide.init()
    //然后把UILayoutGuide放到视图上。
    self.view.addLayoutGuide(layoutGuide0)
    self.view.addLayoutGuide(layoutGuide1)
    self.view.addLayoutGuide(layoutGuide2)
    self.view.addLayoutGuide(layoutGuide3)
    //设置它们宽度相同。
    layoutGuide0.widthAnchor.constraint(equalTo: layoutGuide1.widthAnchor).isActive = true
    layoutGuide1.widthAnchor.constraint(equalTo: layoutGuide2.widthAnchor).isActive = true
    layoutGuide2.widthAnchor.constraint(equalTo: layoutGuide3.widthAnchor).isActive = true
    //布局这些UILayoutGuide对象。
    layoutGuide0.snp.makeConstraints { (make) in
        make.leading.top.bottom.equalToSuperview()
        make.trailing.equalTo(self.violetView.snp.leading)
    }
    layoutGuide1.snp.makeConstraints { (make) in
        make.leading.equalTo(self.violetView.snp.trailing)
        make.top.bottom.equalToSuperview()
        make.trailing.equalTo(self.blueView.snp.leading)
    }
    layoutGuide2.snp.makeConstraints { (make) in
        make.leading.equalTo(self.blueView.snp.trailing)
        make.top.bottom.equalToSuperview()
        make.trailing.equalTo(self.orangeView.snp.leading)
    }
    layoutGuide3.snp.makeConstraints { (make) in
        make.leading.equalTo(self.orangeView.snp.trailing)
        make.top.bottom.trailing.equalToSuperview()
    }

为啥UIStackView不能解决这个问题?
如果两边是没有空隙的,UIStackView是可以解决的,但是如果有,那么单单设置UIStackView的属性是无法达到目的的。

相关文章

网友评论

      本文标题:iOS等间距布局

      本文链接:https://www.haomeiwen.com/subject/ccstvxtx.html