티스토리 뷰
마지막 시간!
구매하기 버튼 구현 시간입니다~
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)
])
}
}
'iOS 개발자 되기' 카테고리의 다른 글
[swift] 왕기초적인 API 받아오기 1 (0) | 2022.01.16 |
---|---|
[swift] 왕기초적인 API 받아오기 3 (URLSession) (0) | 2022.01.16 |
[swift] stepper 및 alertController 연습하기 3-1 (in Code) (0) | 2021.12.01 |
[swift] stepper 및 alertController 연습하기 2 (in Code) (0) | 2021.11.30 |
[swift] stepper 및 alertController 연습하기 1 (in Code) (0) | 2021.11.24 |
- Total
- Today
- Yesterday