[Swift] 피커뷰로 룰렛 만들기(간단한 방법)

안녕하세요!

또 다시! 오랜만에 글을 쓰게 되었습니다.

 

그동안 쓰고싶은 내용이 정말 많았는데요,,,

 

어떤 내용으로 쓸지만 정리하면서

제작중인 앱을 다 완성하고 하나씩 글을 쓰려고 했지만

 

오늘 발생한 에러를 보니 훨씬 더 걸리겠구나 싶었습니다 ㅠㅠ

그래서 정리된 내용은 하나씩 글을 써보려고 합니다.

 

이번 글은 제목대로 피커퓨로 룰렛 만들기에 대한 내용입니다!

제가 룰렛을 만들려고 이리 찾아보고 저리 찾아봤지만 이 방법이 만들기 제일 간단했습니다.

아 참고로 오늘은 피커뷰를 만드는 법에 대한 자세한 설명은 생략하겠습니다.

(다음에 새로운 글로 써보겠습니다.)

 

먼저 프로젝트를 만들고 다음과 같이 피커뷰를 만들었습니다.

 

피커뷰에 대한 설정은 다음과 같습니다.

1부터 100까지의 숫자를 넣은 문자열 배열 randomArray를 선언하고

마지막에는 원하는 값이 나왔다는걸 표시하도록 50번째에는 "타켓 룰렛"이라고 값을 할당했습니다.

extension ViewController: UIPickerViewDataSource {
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return 100
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    
        // 1~100까지
        var randomArray: [String] = (1...100).map { String($0) }
        // 50번째는 타겟 룰렛
        randomArray[49] = "타겟 룰렛"
        
        return randomArray[row]
    }
}

 

 

이제 룰렛을 돌릴 트리거를 만들어줍니다.

코드를 보시면 0.25초마다 scrollRandomly()를 동작시키는 타이머를 만들고 실행시킵니다.

그리고 메인 큐에서 2초를 세고 타이머 동작을 멈춥니다.

마지막으로 scrollTarget()을 동작시켜서 타겟으로 가도록 코드가 구성되었습니다.

    // 트리거
    func rouletteTrigger() {
        // 0.25초마다 scrollRandomly 실행하는 타이머 생성
        let timer = Timer.scheduledTimer(timeInterval: 0.25, target: self, selector: #selector(scrollRandomly), userInfo: nil, repeats: true)
        
        // 메인 큐에서 실행 timer 실행 (2초 후 타이머 동작 멈춤)
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + Double(Int64(2*NSEC_PER_SEC))/Double(NSEC_PER_SEC)) {
            // 타이머 동작 멈춤
            timer.invalidate()
            
            // 타겟으로 스크롤 하기
            self.scrollTarget()
        }
    }
    
        // 랜덤 스크롤
    @objc func scrollRandomly() {
        let row: Int = Int.random(in: 0..<99)
        self.pickerView.selectRow(row, inComponent: 0, animated: true)
    }
    
    // 타켓 스크롤
    func scrollTarget() {
        self.pickerView.selectRow(49, inComponent: 0, animated: true)
    }

 

이제 viewDidLoad에 트리거를 넣고 실행시켜 보겠습니다.

 

의도한대로 동작하죠?

한가지 더 추가하자면 피커뷰를 설정할 때 아래의 코드를 넣어서 룰렛이 돌아가는동안 터치가 안되도록 설정할 수 있습니다.

pickerView.isUserInteractionEnabled = false

 

 

자 이렇게 피커뷰를 룰렛처럼 사용하는 방법에 대해 알아보았습니다.