Swift - 自动布局库SnapKit的使用详解5（样例2：实现一个计算器界面）

2016-04-07 发布：hangge 阅读：6233

SnapKit文章系列：（代码均已升级至Swift3）
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列按钮左侧等于页面中线位置。

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()
    }
}

5楼

2016-06-06 15:49

星光

感谢楼主的分享,让我更好的学习了Swift,赞,赞,赞..........

站长回复：
我也很高兴我的文章能帮助到你。
4楼

2016-05-15 12:00

shorr

楼主写的东西很不错，很适合刚接触iOS开发的同学，居然才发现这个不错的站点，看来我要把你的文章从头撸一遍了，感谢感谢~

站长回复：
欢迎、欢迎，我会持续更新下去的。
3楼

2016-05-11 16:07

玲玲

SnapKit 添加进来后，写import SnapKit个的时候它会提示No such module 'SnapKit', 可以给完整的Demo看一下吗？？好人一生平安

站长回复：
不可能啊，按这个： Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）配置完就肯定没问题了。文章末尾我也给了完整工程代码，只不过没把SnapKit一起打包进来。
2楼

2016-05-06 16:48

玲玲

import SnapKit 没有这个框架
keyboardView.snp_makeConstraints 这个也是错的我的是Xode7.1的

站长回复：
SnapKit需要你添加进来，具体参考我前面的文章：Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）
1楼

2016-04-07 11:53

youfeng

感谢楼主的分享,你的教程简洁明了,而且覆盖面广, 刚开始学习学习Swift开发,看了你的UIButton的教程, 马上就明白是怎么搞得的了.

站长回复：
不客气，欢迎常来看看。