Swift4-有妖气漫画精仿选用Snapkit布局界面
对比文档 我们可以看到这些
这里写图片描述
那么再用手动拉约束的话,你会发现同一个约束你甚至不知道如何添加.
所以还是推荐手动写约束,当然我不会推荐NSLayoutConstraint 那么复杂的书写模式
相对于OC的Msonary,Swift也有一个比较实用的第三方,Snapkit,这里我推荐实用的原因很简单,1.简化手写约束的代码,2.方式类似OC的Msonary,方便大家转移,3.可以很容易的适配不同版本的约束,
基础一点的,我们可以使用普通的约束
contentView.addSubview(iconView)
iconView.snp.makeConstraints{
$0.left.right.top.equalToSuperview()
$0.height.equalTo(contentView.snp.width).multipliedBy(0.75)
}
contentView.addSubview(titleLabel)
titleLabel.snp.makeConstraints{
$0.left.bottom.right.equalToSuperview()
$0.top.equalTo(iconView.snp.bottom)
}
如果要适配安全区域
view.addSubview(collectionView)
collectionView.snp.makeConstraints {
if #available(iOS 11.0, *) {
$0.edges.equalTo(self.view)
} else {
$0.edges.equalTo(self.view.safeAreaLayoutGuide)
}
}
当然我们也可以吧真个判断抽取出来,以后所有的适配都直接一句话就完成
//MARK: SnapKit
extension ConstraintView {
var usnp: ConstraintBasicAttributesDSL {
if #available(iOS 11.0, *) {
return self.safeAreaLayoutGuide.snp
} else {
return self.snp
}
}
}
那么我们在使用适配安全区域的时候
view.addSubview(collectionView)
collectionView.snp.makeConstraints{ $0.edges.equalTo(self.view.usnp.edges) }
很轻松的就完成了,
效果很轻松的,大致如下
这里写图片描述
我们可以轻松自动适配好头部和底部的特殊区域
当然我们需要在baseViewController中写入这样的
if #available(iOS 11.0, *) {
UIScrollView.appearance().contentInsetAdjustmentBehavior = .never
} else {
automaticallyAdjustsScrollViewInsets = false
}
以此来保证约束由我们开发者来控制,而不是系统自动控制,
这里写图片描述
这里写图片描述
我们可能在模拟器中看不到明显的情况,但是我们如果手上有真机 比如X的真机,你会发现这样适配的合理性,因为头部的齐刘海的问题,很多东西无法显示(此区域无法完全显示所有信息,需要单独处理则会很麻烦)
因为底部的横线的问题(类似于传统的home键,此区域不适合做其他任何操作,否则用户会不习惯)
最明显的效果就是阅读界面,一个需要全屏,一个则一定不能全屏,
这里写图片描述
而对于此处,
如果使用frame,你会发现很麻烦,因为需要判断手机型号,另外还需要判断是否减去某一固定高度,是否要居中.....
而使用了手动约束的话,则仍然很轻松
Snapkit仅仅需要这样即可
edgesForExtendedLayout = .all
view.addSubview(collectionView)
collectionView.snp.makeConstraints { $0.edges.equalTo(self.view.usnp.edges) }
第一句话是扩展全屏,保证不收顶部和底部的影响,
第二句话是是展示界面呈现在安全区域(如果有)内
所以,不仅仅是有妖气漫画,其余的项目我也会推荐Snapkit,
他会为你的界面布局节省很多时间,让你更加关注到逻辑和其他的开发中去
欢迎访问交流