当前位置: > > > Swift - 自动布局库SnapKit的使用详解5(样例2:实现一个计算器界面)

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

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
  • 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的教程, 马上就明白是怎么搞得的了.

    站长回复

    不客气,欢迎常来看看。