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

 

오늘은 지난 번 글과 이어지는 2번째 시간!🥳

 

 

원래는 버튼 이벤트 및 스텝퍼 구현한다고 했는데,

오늘은 스텝퍼만 구현하다가 또 엄청 길어질 것 같은 그런 넉힘,,,ㅎㅎ,,

일단 시작👩🏻‍💻

---

일단 전체 코드를 보고 설명해야겠어여. 설명충,,,🧛‍♀️

※ 이것 또한 extention viewController를 만들어서 뒤로 빼기로 했어요.

extension ViewController {
    func addTarget() { //이후 addTarget할 부분. 일단 생략 }
    
        //첫 번째 스텝퍼에서 이벤트 발생 시, 구현될 함수
	@objc func firstStepperTapped(_ sender: UIStepper) {
    	//스텝퍼의 값을 정수 타입으로 바꿔 stepperNum에 할당!
        let stepperNum = Int(sender.value)
        
        //받은 값을 num1Lbl에 할당
        num1Lbl.text = stepperNum.description + "개"
        
        //값과 과자값(1,500원)을 곱해서 firstMenu라는 변수에 할당
        firstMenu = stepperNum * 1500
        
        //이후 추가될 secondMenu와 thirdMenu의 합계를 일단 firstTotal에 할당
        let firstTotal = firstMenu + secondMenu + thirdMenu
        
        //3자리 마다 ,를 찍기 위해 numberFormatter 활용
        let numberFormatter = NumberFormatter()
        numberFormatter.numberStyle = .decimal
        
        //.string이 옵셔널 타입이기 때문에 옵셔널 바인딩 하여 endTotalLbl에 넣어줌
        if let safeTotal = numberFormatter.string(for: firstTotal) {
            endTotalLbl.text =  safeTotal + "원"
        }
    }

gif를 보시면 스텝퍼에서 +, - 버튼을 누르면 값이 변경되쥬?

 

스텝퍼에서 valueChanged 이벤트가 발생하면 발생할 함수를 만들어봅니다.

 

1.  함수 선언

일단 firstStepperTapped라는 이름의 함수를 선언했구요. objc에서도 읽을 수 있도록 @objc 키워드를 붙여줍니다요.

또한 sender라는 파라미터를 받고 UIStepper 인풋 타입으로 만들었어요.

 

 

---

 

2. 스텝퍼의 값 받기

 

스텝퍼에서 우리가 +, -를 누른다한들, 그 값을 어떻게 알져?!!!

그럴 때 쓰라고 다 만들어 놨더라구요. value 프로퍼티!!

 

 

UIStepper 클래스는 value라는 property를 가지는데, 이 놈은 스텝퍼의 값을 나타내준대요. 이 value 값은 Double이에요. 그렇기 때문에 우리는 Int(sender.value)를 통해 정수 값으로 바꿔주는 거에요. 우리는 5,000.00원의 값이 아니라 5,000원이 필요하기 때문이쥬?

 

 

스텝퍼는 값이 바뀌면 valueChanged 표시(?)를 그것의 타겟에 보냅니다(이따 addTarget은 할 예정)

 

그리고 그 다음에 그 값을 텍스트 표현으로 바꿔주는 것이 바로 description이라는 속성(property)랍니다.

 

description은 정수(Int)값으로 바뀐 스텝퍼의 값을 String으로 바꿔주는 역할을 해요.

여기서는 1개, 2개, 3개 등으로 값이 나와야 하기 때문에 뒤에 "개"라는 문자열을 붙여주었어유.

 

그리고 스텝퍼의 값을 나~아중에 맨 밑에서 총 합계레이블에 표시를 해야하기 때문에

처음에(레이블들 선언할 때) 만들어 둔 firstMenu라는 변수에 일단 넣어넣어요. 어떻게? 오징어과자 값 1500원을 곱해서

 

 

근데 나중에 총합계레이블(endTotalLbl)에는 오징어의 과자값 외에도 꾸잉칩과 오란다의 값도 들어가야 된단 말이져?

 

 

그렇게 때문에 나중에 넣을

꾸잉칩의 secondMenu(꾸잉칩 스텝퍼 값 * 꾸잉칩 가격),

오란다의 thirdMenu (오란다 스텝퍼 값 * 오란다 가격)

두 값도 한 꺼번에 더해서 일단 firstTotal이라는 상수에 할당해줍니다. (이후 numberFormatter작업을 위해)

 

 

---

 

 

3. 스텝퍼 값을 레이블에 표시해주기 (numberFormatter이용)

사실 위에까지 작업을 한 후, endTotalLbl.text에 우리가 만든 firstTotal 값을 넣거나,

굳이 firstTotal 상수를 만들것도 없이 그냥 endTotalLbl에 firstMenu + secondMenu + thirdMenu 값을 넣어줘도 됨돠.

 

 

근데 이왕이면 진짜 통화처럼 세 자리마다 "," 표시를 해주면 더 좋을 것 같아서요.

NumberFormatter도 쓸겸 겸사겸사 해보는거죠, 뭐!!

 

 

NumberFormatter는 문자->숫자로, 숫자->문자로 바꿔주는 클래스에요.

 

일단 NumberFormatter 클래스의 객체를 찍어내줍니다.

사실 저는 맨 처음에 레이블, 버튼을 선언할 때 선언을 해주었었었었어요?! 이렇게 말이져?

돈이 들어가는 레이블에서는 계속 사용할 것이었기 때문이져?

let numberFormatter = NumberFormatter()

 

그렇기 때문에 여기서는 따로 선언은 생략하도록 합니다.

 

 

NumberFormatter는 정말 복잡한 놈이네여,,,그런 놈팽이들 싫어하는데 말이져,,ㅎ,ㅎ

그래서 오늘은 제가 쓸 것만 알아볼 거에요. 내맘대루 ㅎㅎ

 

 

 

바로 이 속성이에요. receiver에 의해 사용되는 넘버 스타일이래요.

 

 

 

 

이 속성은 NumberFormatter.Style이라는 타입인데, 이 타입은 열거형이랍니다. (케이스 어엄~청 많은.,,)

수 많은 케이스 중 저는 .decimal을 사용할 예정이에요.

 

저는 이 속성을 .decimal로 설정해줄 건데요.

설명을 보니, 1234.5678을 1,234.5678로 바꿔준대요. 우리가 딱 원하던 거죠?

 

 

근데, 이제부터 문제임. (나만 심각;;)

내가 만든 NumberFormatter의 객체 numberFormatter는 NumberFormatter타입이란 말이쥬?

그걸 어떻게 레이블에 넣쥬?!! 

 

그래서 사용한 게 string(for:) 메서드랍니다.

이놈은 Formatter 클래스의 메서드인데, NumberFormatter가 Formatter를 상속받았기 때문에, 사용할 수 있는 것 같아요.

 

 

for의 파라미터로 넣으면 그것을 옵셔널 String 형태로 반환해 주네요.

근데 옵셔널 형태이기 때문에 바인딩 해서 사용해야 겠어요.

 

 

바인딩 후 "원" 문자열을 붙여줍니다.

 

---

4. 2&3 스텝퍼에도 적용하기

이제 이 작업을 2번째 스텝퍼와 3번째 스텝퍼에서도 똑같이 적용해주세요!!

    @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 + "원"
        }
        
    }

 

---

5. addTarget해주기

그리고 맨날 까먹는 거! addTarget을 통해 스텝퍼의 이벤트 발생과 함수를 이어줍니다.

※ 다음 편에 버튼도 구현할 것이기 때문에 한 꺼번에 넣어놨어용 ㅎㅎ

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

---

 

예상대로 세상 길어진 2편!!

왜 이렇게 할 말 많고 난리,,

tmi는 블로그도 힘드네여,,,;;

 

3편 To be continued~