#017 分攤錢錢App

這次會練習到

• if else
• UIstepper
• textfield string 轉換成數字
• 圓角/陰影
• 鍵盤收起

先將會使運用的物件拉拉Outlet & Action

解說一下整個畫面的構成與流程，常常跟朋友出去的時候要分錢打開計算機，今天計算機先擺一邊，改用這個App來分帳，簡潔有力又可愛！

想當然爾，分帳絕對是兩個人起跳，因此預設UIStepper 的minimum=2 ，由UIstepper控制人數與盤子的圖片顯示，剩下的就是程式內的加減乘除運算拉～

UIStepper控制圖片顯示的部分，為了找出邏輯真的是想了一整個下午不誇張，可能有四五個小時，最後先用土法煉鋼的方式，螢幕截圖兩頁的if else，晚上求救大神卓寶，發現自己下午其實有想到這個方法，但那時候試跑出錯就以為不可行，其實只要把例外的兩個狀況另外排除掉就可以成功了！Anyway感謝大神指引，才能成功寫出簡潔一些的版本，又不受於人數限制！

成品奉上！

if else / UIstepper

func showImage(peopleNum: Int){
        //人數label顯示的文字與傳進來的人數相同
        peopleLabel.text = String(peopleNum)
        //取得商數
        let quotient = peopleNum/4 
        if peopleNum % 4 == 1 {
            topImageView.image = UIImage(named: topImageNames[quotient])
            downImageView.image = UIImage(named: downImageNames[quotient-1])
            leftImageView.image = UIImage(named: leftImageNames[quotient-1])
            rightImageView.image = UIImage(named: rightImageNames[quotient-1])
        } else if peopleNum % 4 == 2 {
            if peopleNum == 2 {
                topImageView.image = UIImage(named: topImageNames[quotient])
                downImageView.image = UIImage(named: downImageNames[quotient])
                hideRightLeftImage()
            } else {
                topImageView.image = UIImage(named: topImageNames[quotient])
                downImageView.image = UIImage(named: downImageNames[quotient])
                leftImageView.image = UIImage(named: leftImageNames[quotient-1])
                rightImageView.image = UIImage(named: rightImageNames[quotient-1])
            }
        } else if peopleNum % 4 == 3 {
            if peopleNum == 3 {
                topImageView.image = UIImage(named: topImageNames[quotient])
                downImageView.image = UIImage(named: downImageNames[quotient])
                leftImageView.isHidden = false
                leftImageView.image = UIImage(named: leftImageNames[quotient])
                rightImageView.isHidden = true
            } else {
                topImageView.image = UIImage(named: topImageNames[quotient])
                downImageView.image = UIImage(named: downImageNames[quotient])
                leftImageView.isHidden = false
                leftImageView.image = UIImage(named: leftImageNames[quotient])
                rightImageView.image = UIImage(named: rightImageNames[quotient-1])
            }
        } else if peopleNum % 4 == 0 {
            leftImageView.isHidden = false
            rightImageView.isHidden = false
            topImageView.image = UIImage(named: topImageNames[quotient-1])
            downImageView.image = UIImage(named: downImageNames[quotient-1])
            leftImageView.image = UIImage(named: leftImageNames[quotient-1])
            rightImageView.image = UIImage(named: rightImageNames[quotient-1])
        }
    }
//清除按鈕
@IBAction func eraseBtn(_ sender: Any) {
        totalMoneyTextField.text = ""
        tipTextField.text = ""
        averagePriceLabel.text = ""
        showImage(peopleNum: 2)
    }
//人數UIStepper
@IBAction func peopleStepper(_ sender: UIStepper) {
        showImage(peopleNum: Int(sender.value))
    }

圖片顯示隨人數改變的方式為上>下>左>右，因此取人數除4的餘數與商數，將商數丟進array中取得圖片名稱，每個方向的圖片有三張，但在人數為2 & 3時，quotient-1會出現負數而App crash，因此要排除這兩種狀況，人數2時，左右的圖片isHidden為True; 人數3時，右的圖片isHidden為True
因為畫面的關係，每一邊最多塞進三個盤子，所以UIStepper設定最小2最大12

textfield string 轉換成數字

@IBAction func calculateBtn(_ sender: Any) {
        let totalMoneyText = totalMoneyTextField.text!
        let tipText = tipTextField.text!
        let peopleText = peopleLabel.text!
        let totalMoney = Double(totalMoneyText)
        let tipNum = Double(tipText)
        let people = Double(peopleText)!
        //當totalMoney&tipNum不為nil時進行計算
        if totalMoney != nil, tipNum != nil{
            let tip = Double(tipNum! / 100 + 1)
            let averagePrice = totalMoney! * tip / people
            averagePriceLabel.text = String(format: "%.1f", averagePrice)
        //當totalMoney不為nil & tipNum為nil時進行計算
        } else if totalMoney != nil, tipNum == nil {
            let averagePrice = totalMoney! / people
            averagePriceLabel.text = String(format: "%.1f", averagePrice)
        //當totalMoney&tipNum為nil時
        } else {
            averagePriceLabel.text = "不用錢"
        }
    }

let totalMoneyText = totalMoneyTextField.text! textfield內一定不是nil，因此可以勇敢打上驚嘆號
let totalMoney = Double(totalMoneyText) 將字串轉為Double型別，但不能在這邊加！，因為如果totalMoneyText傳入"" 空值的話會死掉
let people = Double(peopleText)! 這邊可以勇敢打驚嘆號是因為，前面已經設定人數最少為2的關係

圓角/陰影

複習一下圓角跟陰影的背景製作，只有左上有圓角，因此用UIBezierPath繪製

func calculateBg(){
        let calculateBgLayer = CAShapeLayer()
        let calculateShapePath = UIBezierPath()
        calculateShapePath.move(to: CGPoint(x: 557, y: 0))
        calculateShapePath.addLine(to: CGPoint(x: 812, y: 0))
        calculateShapePath.addLine(to: CGPoint(x: 812, y: view.bounds.width))
        calculateShapePath.addLine(to: CGPoint(x: 487, y: view.bounds.width))
        calculateShapePath.addLine(to: CGPoint(x: 487, y: 70))
        calculateShapePath.addQuadCurve(to: CGPoint(x: 557, y: 0), controlPoint: CGPoint(x: 487, y: 0))
        calculateBgLayer.path = calculateShapePath.cgPath
        calculateBgLayer.fillColor = CGColor(red: 203/255, green: 237/255, blue: 1, alpha: 1)
        //add shadow
        calculateBgLayer.shadowOpacity = 0.4
        calculateBgLayer.shadowOffset = CGSizeMake(-10.0, 0.0)
        calculateBgLayer.shadowColor = CGColor(red: 4/255, green: 59/255, blue: 86/255, alpha: 1)
        calculateBgLayer.shadowRadius = 12
        view.layer.insertSublayer(calculateBgLayer, at: 0)
    }

.shadowOpacity 陰影透明度 range:0~1
.shadowOffset 陰影位移 型別CGSizeMake(x,y)
.shadowRadius 陰影圓角

鍵盤收起

UIKit App 按空白處收鍵盤的方法

加入tapGesture丟進左側viewController，讓 View 的 gestureRecognizers 連到 Tap Gesture Recognizer

連結 UITapGestureRecognizer 的 IBAction，呼叫 endEditing 收鍵盤

GitHub - JubeHuang/-