[swift] stepper 및 alertController 연습하기 1 (in Code)

오늘은 오토레이아웃과 alertcontorller, stepper를 연습해볼 수 있었던 예제를 올려보도록 할게요.

생각보다 코드가 길어서 2~3편 정도에 나눠서 작성을 해야 할 것 같아요.ㅎㅎ

 

---

일단 가장 손이 많이 갔던 오토레이아웃 잡기부터 해보도록 할게요.

총 15개의 레이블과 2개의 버튼, 3개의 스텝퍼가 필요해요.

 

ViewDidLoad에서 선언해줍니다요.

//
//  ViewController.swift
//  AlertTest2
//
//  Created by 순진이 on 2021/11/08.
//

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

 

적당히 많아야지 증말루다가,,,

너무 헷갈려서 표시해보았어요.ㅎㅎ (글씨는 못쓰지만 시간이 많은 편,,,,ㅎ)

 

각 레이블, 버튼 등에 기본값들과 몇 가지 셋팅해야 할 것도 있쥬?

기본 셋팅과 오토레이 아웃은 너무 길기 때문에 extension을 통해 ViewController를 확장해서 표현했쥬.

 

우선 기본 셋팅!

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

    }
    
    //LayOut설정 
    final private func setLayout() {
        //일단 생략 
    }
}

 

레이블들의 기본값을 설정해줍니다. 처음에는 전부 0개, 0원 등의 있어야 합니당.

UILabel에 있는 text 속성(property)을 이용해줄게요.

 

그리고 버튼은 예전에도 몇 번 했던

버튼의 이름을 설정하는 setTitle과

버튼의 배경색을 설정하는 backgroundColor

버튼의 텍스트 컬러를 설정하는 setTitleColor 속성을 이용해주겠슈.

 

 

그리고 아래에 오토레이아웃을 설정해주도록 해요.

(글씨는 못쓰지만 시간이 많은 편,,,,2ㅎ)

 

코드로 잡아보면 아래와 같습니다!

//MARK: -UI
extension ViewController {

    //기본 셋팅 
    final private func setBasics() { //생략 }
    
    
    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)
        ])
        
    }
}

 

Hoxy,,, 아래 부분이 이해가 가지 않으신다면, foreach 글을 보고 오면 이해가 갑니다 가요.

 

 

ㅎㅎ이제 겨우 레이아웃만 잡았는걸요,,,

스크롤 무슨 일이져,,,

2편은 버튼에 이벤트 발생 및 스텝퍼를 구현하는 것까지~

To be Continued...