iOS编程设置UI布局限制的另一种方法

额…之前本猫一直使用IB来处理UI布局,虽说比较直观,但是对于比较复杂的界面,这样做还是有一些问题的…

主要是你的限制貌似很好很完美,但是切换到不同Device后,还是会发现不和谐的黄感叹或红感叹号的存在… ;(

这是因为你很难将所有设备的所有情况都考虑到,你在一种设备界面上设置限制,然后想当然觉得这应该会应用到所有设备上…这还只是同类设备会出现的情况.所谓同类是指,你只在所有iPhone上运行.如果你还想在iPad或iTV上运行,那么你会发现这简直是”不可能完成的任务”…

但是如果通过编程来处理限制的话,貌似有很复杂…的确如此,不过…SnapKit前来拯救我们啦 ;)

SnapKit是一个很方便,表达很简单的库,可以通过CocoaPods安装.

举个栗子,如下图所示的界面,我们来尝试做一下限制:

这里写图片描述

首先大体上我们的思路是将整个界面分为3行,把这3行放在StackView里,首先要在UI里将StackView填充到整个View.

接下来我们分别创建3个UIView,并分别宽度填满每行.

然后我们分别针对每一行来做限制:

func setup1stLineInStackView(){
    targetTextFld.snp.makeConstraints {make in
        make.left.equalTo(targetTextFld.superview!)
        make.right.equalToSuperview().multipliedBy(0.5)
        make.centerY.equalTo(targetTextFld.superview!)
    }

    comparisonSeg.snp.makeConstraints {make in
        make.left.equalTo(targetTextFld.snp.right).offset(8)
        make.right.equalTo(comparisonSeg.superview!)
        make.centerY.equalTo(comparisonSeg.superview!)
    }
}

func setup2ndLineInStackView(){
    unitTypeBtn.snp.makeConstraints {make in
        make.centerY.equalTo(unitTypeBtn.superview!)
        make.right.equalTo(unitTypeBtn.superview!)
        make.left.equalTo(comparisonSeg)
    }

    countStp.snp.makeConstraints {make in
        make.centerY.equalTo(countStp.superview!)
        make.width.equalTo(100)
        make.right.equalTo(targetTextFld)
    }

    countLbl.snp.makeConstraints {make in
        make.centerY.equalTo(countLbl.superview!)
        make.left.equalTo(countLbl.superview!)
        make.right.equalTo(countStp.snp.left).offset(-8)
    }
}

func setup3stLineInStackView(){
    displayTypeSeg.snp.makeConstraints {make in
        make.centerY.equalTo(displayTypeSeg.superview!)
        make.left.equalTo(displayTypeSeg.superview!)
        make.right.equalTo(displayTypeSeg.superview!)
    }
}

最后看一下实际效果,首先是iPhone 4.7 :

这里写图片描述

再来一张iPad的效果:

这里写图片描述

iOS编程设置UI布局限制的另一种方法

猜你喜欢