Swift - 自动布局库SnapKit的使用详解5(样例2:实现一个计算器界面)
SnapKit文章系列:(代码均已升级至Swift3)
Swift - 自动布局库SnapKit的使用详解1(配置、使用方法、样例)
Swift - 自动布局库SnapKit的使用详解2(约束的更新、移除、重做)
Swift - 自动布局库SnapKit的使用详解3(约束优先级,约束做动画)
Swift - 自动布局库SnapKit的使用详解4(样例1:实现一个登录页面)
Swift - 自动布局库SnapKit的使用详解5(样例2:实现一个计算器界面) --- 当前文章
Swift - 自动布局库SnapKit的使用详解1(配置、使用方法、样例)
Swift - 自动布局库SnapKit的使用详解2(约束的更新、移除、重做)
Swift - 自动布局库SnapKit的使用详解3(约束优先级,约束做动画)
Swift - 自动布局库SnapKit的使用详解4(样例1:实现一个登录页面)
Swift - 自动布局库SnapKit的使用详解5(样例2:实现一个计算器界面) --- 当前文章
前面演示了使用SnapKit实现一个登录页面,本文再来一个稍微复杂点的样例:模仿iOS系统自带的计算器布局。
1,效果图如下

2,代码讲解
(1)首先将视图分成上下两部分,上面部分用来显示数字,下面部分是键盘区域(放置计算器按钮)。
(2)键盘区域宽高比是4:5(保证每个按钮是正方形)。
(3)按从上到下,从左往右的顺序添加每个按钮,并设置对应的约束。
(4)按钮的垂直位置约束是:下一排的按钮顶部紧跟着上一排按钮的底部。
(5)按钮的水平位置约束是:第1列按钮左侧等于页面左边缘,第4列按钮右侧等于页面右边缘。第2列按钮右侧等于页面中线位置,第3列按钮左侧等于页面中线位置。
import UIKit import SnapKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() //申明区域,keyboardView是键盘区域 let keyboardView = UIView() keyboardView.backgroundColor = UIColor(red:212/255, green:213/255, blue:216/255, alpha:1) self.view.addSubview(keyboardView) //键盘区域约束 keyboardView.snp.makeConstraints { (make) -> Void in make.bottom.equalTo(self.view.snp.bottom) make.left.right.equalTo(self.view) make.height.equalTo(self.view.snp.width).multipliedBy(1.25) } //displayView是显示区 let displayView = UIView() displayView.backgroundColor = UIColor.black self.view.addSubview(displayView) //显示区域约束 displayView.snp.makeConstraints { (make) -> Void in make.top.equalTo(self.view.snp.top) make.bottom.equalTo(keyboardView.snp.top) make.left.right.equalTo(self.view) } //设置显示位置的数字为0 let displayNum = UILabel() displayNum.text = "0" displayNum.font = UIFont(name:"HeiTi SC", size:70) displayNum.textColor = UIColor.white displayNum.textAlignment = .right displayView.addSubview(displayNum) //数字标签约束 displayNum.snp.makeConstraints { (make) -> Void in make.left.right.equalTo(displayView).offset(-10) make.bottom.equalTo(displayView).offset(-10) } //定义键盘键名称(?号是占位符,代表合并的单元格) let keys = ["AC","+/-","%","÷" ,"7","8","9","x" ,"4","5","6","-" ,"1","2","3","+" ,"0","?",".","="] //保存所有的按钮 var keyViews = [UIButton]() //循环添加按钮 for i in 0..<5{ for j in 0..<4 { let indexOfKeys = i * 4 + j let key = keys[indexOfKeys] //键样式 let keyView = UIButton(type:.custom) keyboardView.addSubview(keyView) keyViews.append(keyView) keyView.setTitleColor(UIColor.black, for: .normal) keyView.setTitle(key, for: .normal) keyView.layer.borderWidth = 0.5 keyView.layer.borderColor = UIColor.black.cgColor keyView.titleLabel?.font = UIFont(name:"Arial-BoldItalicMT", size:30) //处理合并单元格(不用添加到界面上,也不用添加约束) if key == "?"{ keyView.removeFromSuperview() continue } //设置按键约束 keyView.snp.makeConstraints { (make) -> Void in //添加高度约束 make.height.equalTo(keyboardView.snp.height).multipliedBy(0.2) //添加宽度约束 if key == "0" { //处理 0 make.width.equalTo(keyboardView.snp.width).multipliedBy(0.5) }else { //正常的单元格 make.width.equalTo(keyboardView.snp.width).multipliedBy(0.25) } //添加垂直位置约束 if i == 0{ make.top.equalTo(0) keyView.backgroundColor = UIColor(red:201/255, green:202/255, blue:204/255, alpha:1) }else{ make.top.equalTo(keyViews[indexOfKeys-4].snp.bottom) } //添加水平位置约束 switch (j) { case 0: make.left.equalTo(keyboardView.snp.left) case 1: make.right.equalTo(keyboardView.snp.centerX) case 2: make.left.equalTo(keyboardView.snp.centerX) case 3: make.right.equalTo(keyboardView.snp.right) keyView.backgroundColor = UIColor(red:249/255, green:138/255, blue:17/255, alpha:1) default: break } } } } } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }
感谢楼主的分享,让我更好的学习了Swift,赞,赞,赞..........
楼主写的东西很不错,很适合刚接触iOS开发的同学,居然才发现这个不错的站点,看来我要把你的文章从头撸一遍了,感谢感谢~
SnapKit 添加进来后,写import SnapKit个的时候它会提示No such module 'SnapKit', 可以给完整的Demo看一下吗??好人一生平安
import SnapKit 没有这个框架
keyboardView.snp_makeConstraints 这个也是错的 我的是Xode7.1的
感谢楼主的分享,你的教程简洁明了,而且覆盖面广, 刚开始学习学习Swift开发,看了你的UIButton的教程, 马上就明白是怎么搞得的了.