[swift] stepper 및 alertController 연습하기 3-2 (in Code)

마지막 시간!

구매하기 버튼 구현 시간입니다~

 

 

---

 

 

2. 구매하기 버튼 구현

 

 

 

 

구매하기 버튼을 누르면 endTotalLbl에 있는 금액이 alert창에 뜨면서 '취소'와 '확인' 버튼이 나오도록! 오케바뤼

 

우선 구매하기 버튼에 이벤트가 발생하면 구현될 함수를 선언해줍니다요.

@objc func buyBtnTapped(_ sender: UIButton) { }

 

 

그리고 리셋버튼하고 똑같이 UIAlertController의 객체를 찍어내도록 해야쥬.

alert의 타이틀은 "정말 구매하시겠습니까?"

메시지는 "구매 금액은 ~~원입니다."

let alert = UIAlertController(title: "정말 구매하시겠습니까?", message: "구매금액은 \(firstMenu + secondMenu + thirdMenu)입니다.", preferredStyle: .alert)

 

저는 스텝퍼에서 받은 값은 각각 firstMenu, secondMenu, thirdMenu라는 변수에 넣어줬기 때문에 메시지에서 세 값의 합계를 나타내주도록 합니당.

 

 

그리고 이제 취소 버튼 먼저 만들어줄게요.

취소 버튼과 확인 버튼을 만들 때 주의할 점은 각 버튼을 누르면 다시 모든 레이블들이 0원 또는 0개로 초기화되어야 된다는 점이에요. 그런 셋팅은 각 UIAlertAction의 핸들러에서 구현해주면 됩니다.

let cancleAction = UIAlertAction(title: "취소", style: .cancel) { [weak self] (alert) in
    //취소 버튼 누르면 totalPrice, endTotalLbl "0원"으로 셋팅
    [self?.totalPrice, self?.endTotalLbl].forEach {
        $0!.text = "0원"
    }
     
    //취소 버튼 누르면 num1Lbl, num2Lbl, num3Lbl "0개"로 셋팅
    [self?.num1Lbl, self?.num2Lbl, self?.num3Lbl].forEach {
    $0!.text = "0개"
    }
    
    //취소 버튼 누르면 각 과자값을 받았던 변수 0으로 셋팅
    self?.firstMenu = 0
    self?.secondMenu = 0
    self?.thirdMenu = 0
    
    //취소 버튼 누르면 스텝퍼의 값 0으로 셋팅 (셋팅 안하면 값이 누적되는 문제 발생)
    self?.firstStepper.value = 0
    self?.secondStepper.value = 0
    self?.thirdsSepper.value = 0   
}

 

확인 버튼도 똑같이 해주면 돼욧!

let okAction = UIAlertAction(title: "확인", style: .cancel) { [weak self] (alert) in
    //확인 버튼 누르면 totalPrice, endTotalLbl "0원"으로 셋팅
    [self?.totalPrice, self?.endTotalLbl].forEach {
        $0!.text = "0원"
    }
     
    //확인 버튼 누르면 num1Lbl, num2Lbl, num3Lbl "0개"로 셋팅
    [self?.num1Lbl, self?.num2Lbl, self?.num3Lbl].forEach {
    $0!.text = "0개"
    }
    
    //확인 버튼 누르면 각 과자값을 받았던 변수 0으로 셋팅
    self?.firstMenu = 0
    self?.secondMenu = 0
    self?.thirdMenu = 0
    
    //확인 버튼 누르면 스텝퍼의 값 0으로 셋팅 (셋팅 안하면 값이 누적되는 문제 발생)
    self?.firstStepper.value = 0
    self?.secondStepper.value = 0
    self?.thirdsSepper.value = 0   
}

 

 

 

그리고 만든 버튼을 이제 우리가 만든 UIAlertControllerd의 객체 alert에 더해주면 됩니다.

순서대로 왼쪽에 버튼이 생기기 때문에 취소 버튼 먼저 addAction해주시면 되겠슈.

그리고 마지막으로 alert를 present해주면 끝!

 

alert.addAction(cancleAction)
alert.addAction(okAction)
present(alert, animated: true)

 

---

이렇게 하면 드디어 완성이 됩니다!!

 

하면 할수록 공부해야 할 게 산더미처럼 늘어나고 있다는 생각이 드네여!!

혹시 잘못된 것이 있다면! 언제든지 조언 부탁드립니당 슨배님덜!

 

 

전체 코드 보기

import UIKit

class ViewController: UIViewController {
    let walletLbl = UILabel()
    let totalPrice = UILabel()
    
    let menuLbl = UILabel()
    let priceLbl = UILabel()
    let numberLbl = UILabel()
    
    let menu1Lbl = UILabel()
    let menu2Lbl = UILabel()
    let menu3Lbl = UILabel()
    
    let price1 = UILabel()
    let price2 = UILabel()
    let price3 = UILabel()
    
    let num1Lbl = UILabel()
    let num2Lbl = UILabel()
    let num3Lbl = UILabel()
    
    var endTotalLbl = UILabel()
    var resetBtn = UIButton()
    var buyBtn = UIButton()
    
    var firstStepper = UIStepper()
    var secondStepper = UIStepper()
    var thirdsSepper = UIStepper()
    
    let numberFormatter = NumberFormatter()
    
    var firstMenu = 0
    var secondMenu = 0
    var thirdMenu = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setBasics()
        setLayout()
        addTarget()
    }
}

extension ViewController {
    func addTarget() {
        resetBtn.addTarget(self, action: #selector(resetBtnTapped(_:)), for: .touchUpInside)
        buyBtn.addTarget(self, action: #selector(buyBtnTapped(_:)), for: .touchUpInside)
        firstStepper.addTarget(self, action: #selector(firstStepperTapped(_:)), for: .touchUpInside)
        secondStepper.addTarget(self, action: #selector(secondStepperTapped(_:)), for: .touchUpInside)
        thirdsSepper.addTarget(self, action: #selector(thirdStepperTapped(_:)), for: .touchUpInside)
    }
    
    
    @objc func firstStepperTapped(_ sender: UIStepper) {
        let stepperNum = Int(sender.value)
        
        num1Lbl.text = stepperNum.description + "개"
        firstMenu = stepperNum * 1500
        
        let firstTotal = firstMenu + secondMenu + thirdMenu
     
        
        numberFormatter.numberStyle = .decimal
        
        if let safeTotal = numberFormatter.string(for: firstTotal) {
            endTotalLbl.text =  safeTotal + "원"
        }
    }
    
    
    @objc func secondStepperTapped(_ sender: UIStepper) {
        let stepperNum = Int(sender.value)
        num2Lbl.text = stepperNum.description + "개"
        secondMenu = stepperNum * 1000
        let secondTotal = firstMenu + secondMenu + thirdMenu
        numberFormatter.numberStyle = .decimal
        if let safeTotal = numberFormatter.string(for: secondTotal) {
            endTotalLbl.text =  safeTotal + "원"
        }
    }
    
    
    @objc func thirdStepperTapped(_ sender: UIStepper) {
        let stepperNum = Int(sender.value)
        num3Lbl.text = stepperNum.description + "개"
        thirdMenu = stepperNum * 1200
        let thirdTotal = firstMenu + secondMenu + thirdMenu
        numberFormatter.numberStyle = .decimal
        if let safeTotal = numberFormatter.string(for: thirdTotal) {
            endTotalLbl.text = safeTotal + "원"
        }
        
    }
    
    @objc func resetBtnTapped(_ sender: UIButton) {
        let numberFormatter = NumberFormatter()
        numberFormatter.numberStyle = .decimal
        
        let alert = UIAlertController(title: "내 지갑", message: "남은 돈은?", preferredStyle: .alert)
        alert.addTextField { $0.placeholder = "가진 돈 입력하기" }
        let okAction = UIAlertAction(title: "입력", style: .default) { [weak self] (textField) in
            if let fieldList = alert.textFields {
                if let textField = fieldList.first {
                    if let safeData = textField.text {
                        if let safeData2 = Int(safeData) {
                            let safeNum = numberFormatter.string(for: safeData2)
                            self?.totalPrice.text = safeNum! + "원"
                        }
                        
                    }
                }
            }
            
            [self?.num1Lbl, self?.num2Lbl, self?.num3Lbl].forEach {
                $0!.text = "0개"
            }
            self?.endTotalLbl.text = "0원"
            
            
            self?.firstMenu = 0
            self?.secondMenu = 0
            self?.thirdMenu = 0
            
            
            self?.firstStepper.value = 0
            self?.secondStepper.value = 0
            self?.thirdsSepper.value = 0
            
            
        }
        alert.addAction(okAction)
        present(alert, animated: true, completion: nil)
        
    }
    
    
    
    @objc func buyBtnTapped(_ sender: UIButton) {

        let alert = UIAlertController(title: "정말 구매하시겠습니까?", message: "구매금액은 \(firstMenu + secondMenu + thirdMenu)입니다.", preferredStyle: .alert)
        let cancleAction = UIAlertAction(title: "취소", style: .cancel) { [weak self] (alert) in
            

            [self?.totalPrice, self?.endTotalLbl].forEach {
                $0!.text = "0원"
            }
            
            [self?.num1Lbl, self?.num2Lbl, self?.num3Lbl].forEach {
                $0!.text = "0개"
            }
            
            self?.firstMenu = 0
            self?.secondMenu = 0
            self?.thirdMenu = 0
            
            self?.firstStepper.value = 0
            self?.secondStepper.value = 0
            self?.thirdsSepper.value = 0 
        }
        
        
        let okAction = UIAlertAction(title: "확인", style: .default) { [weak self] (alert) in
            [self?.totalPrice, self?.endTotalLbl].forEach {
                $0!.text = "0원"
            }
            
            [self?.num1Lbl, self?.num2Lbl, self?.num3Lbl].forEach {
                $0!.text = "0개"
            }
            
            self?.firstMenu = 0
            self?.secondMenu = 0
            self?.thirdMenu = 0
            
            self?.firstStepper.value = 0
            self?.secondStepper.value = 0
            self?.thirdsSepper.value = 0
        }
        alert.addAction(cancleAction)
        alert.addAction(okAction)
        present(alert, animated: true)
    }
}


//MARK: -UI
extension ViewController {
    
    final private func setBasics() {
        walletLbl.text = "내 지갑: "
        totalPrice.text = "0원"
        menuLbl.text = "종류"
        priceLbl.text = "가격"
        numberLbl.text = "수량"
        menu1Lbl.text = "오징어"
        menu2Lbl.text = "꾸잉칩"
        menu3Lbl.text = "오란다"
        price1.text = "1,500"
        price2.text = "1,000"
        price3.text = "1,200"
        num1Lbl.text = "0개"
        num2Lbl.text = "0개"
        num3Lbl.text = "0개"
        endTotalLbl.text = "0원"
        
        resetBtn.setTitle("초기화", for: .normal)
        resetBtn.backgroundColor = .yellow
        resetBtn.setTitleColor(.blue, for: .normal)
        
        
        buyBtn.setTitle("구매하기", for: .normal)
        buyBtn.backgroundColor = .blue
        buyBtn.setTitleColor(.yellow, for: .normal)
        
        
        [walletLbl, totalPrice, menuLbl, priceLbl, numberLbl, menu1Lbl, menu2Lbl, menu3Lbl, price1, price2, price3, num1Lbl, num2Lbl, num3Lbl, endTotalLbl, resetBtn, buyBtn, firstStepper, secondStepper, thirdsSepper].forEach {
            view.addSubview($0)
        }
    }
    
    
    final private func setLayout() {
        [menuLbl, priceLbl, numberLbl, menu1Lbl, menu2Lbl, menu3Lbl, price1, price2, price3, numberLbl, num1Lbl, num2Lbl, num3Lbl, endTotalLbl].forEach {
            $0.font = UIFont.boldSystemFont(ofSize: UIFont.labelFontSize)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        [walletLbl, totalPrice, endTotalLbl].forEach {
            $0.font = UIFont.boldSystemFont(ofSize: 30)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        [resetBtn, buyBtn].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            $0.titleLabel?.font = UIFont.systemFont(ofSize: 25)
        }
        
        [firstStepper, secondStepper, thirdsSepper].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        let safeArea = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            walletLbl.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 50),
            walletLbl.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 100),
            totalPrice.leadingAnchor.constraint(equalTo: walletLbl.leadingAnchor, constant: 100),
            totalPrice.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 100),
            
            menuLbl.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 50),
            menuLbl.topAnchor.constraint(equalTo: walletLbl.topAnchor, constant: 100),
            priceLbl.leadingAnchor.constraint(equalTo: menuLbl.leadingAnchor, constant: 80),
            priceLbl.topAnchor.constraint(equalTo: walletLbl.topAnchor, constant: 100),
            numberLbl.leadingAnchor.constraint(equalTo: priceLbl.leadingAnchor, constant: 80),
            numberLbl.topAnchor.constraint(equalTo: walletLbl.topAnchor, constant: 100),
            
            menu1Lbl.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 50),
            menu1Lbl.topAnchor.constraint(equalTo: menuLbl.topAnchor, constant: 50),
            price1.leadingAnchor.constraint(equalTo: menu1Lbl.leadingAnchor, constant: 80),
            price1.topAnchor.constraint(equalTo: menuLbl.topAnchor, constant: 50),
            num1Lbl.leadingAnchor.constraint(equalTo: price1.leadingAnchor, constant: 80),
            num1Lbl.topAnchor.constraint(equalTo: menuLbl.topAnchor, constant: 50),
            
            firstStepper.leadingAnchor.constraint(equalTo: num1Lbl.leadingAnchor, constant: 50),
            firstStepper.topAnchor.constraint(equalTo: menuLbl.topAnchor, constant: 50),
            
            menu2Lbl.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 50),
            menu2Lbl.topAnchor.constraint(equalTo: menu1Lbl.topAnchor, constant: 50),
            price2.leadingAnchor.constraint(equalTo: menu2Lbl.leadingAnchor, constant: 80),
            price2.topAnchor.constraint(equalTo: menu1Lbl.topAnchor, constant: 50),
            num2Lbl.leadingAnchor.constraint(equalTo: price2.leadingAnchor, constant: 80),
            num2Lbl.topAnchor.constraint(equalTo: menu1Lbl.topAnchor, constant: 50),
            
            secondStepper.leadingAnchor.constraint(equalTo: num2Lbl.leadingAnchor, constant: 50),
            secondStepper.topAnchor.constraint(equalTo: menu1Lbl.topAnchor, constant: 50),
            
            menu3Lbl.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 50),
            menu3Lbl.topAnchor.constraint(equalTo: menu2Lbl.topAnchor, constant: 50),
            price3.leadingAnchor.constraint(equalTo: menu3Lbl.leadingAnchor, constant: 80),
            price3.topAnchor.constraint(equalTo: menu2Lbl.topAnchor, constant: 50),
            num3Lbl.leadingAnchor.constraint(equalTo: price3.leadingAnchor, constant: 80),
            num3Lbl.topAnchor.constraint(equalTo: menu2Lbl.topAnchor, constant: 50),
            
            thirdsSepper.leadingAnchor.constraint(equalTo: num3Lbl.leadingAnchor, constant: 50),
            thirdsSepper.topAnchor.constraint(equalTo: menu2Lbl.topAnchor, constant: 50),
            
            endTotalLbl.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 200),
            endTotalLbl.topAnchor.constraint(equalTo: menu3Lbl.topAnchor, constant: 50),
            
            resetBtn.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 50),
            resetBtn.topAnchor.constraint(equalTo: endTotalLbl.topAnchor, constant: 50),
            
            buyBtn.leadingAnchor.constraint(equalTo: resetBtn.trailingAnchor, constant: 30),
            buyBtn.topAnchor.constraint(equalTo: endTotalLbl.topAnchor, constant: 50),
            buyBtn.widthAnchor.constraint(equalTo: resetBtn.widthAnchor),
            buyBtn.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -50)
        ])
        
    }
}