Feat [#11] CreateChallenge - pickerView 구현

[kim-seonwoo]

👾 작업 내용

• presentation - createChallenge 폴더를 생성하였습니다. Challenge 뷰와의 중복을 고려하여 명명하였습니다.
• TotalTimePickerView를 구현하였습니다. 한 개의 column으로 작동되는 총 이용시간 피커뷰 입니다.
• SpecificTimePickerView를 구현하였습니다. 두 개의 column으로 작동되는 개별 앱 이용시간 피커뷰 입니다.

TotalTimePickerView

• UIPickerViewDataSource관련 함수를 작성하여, 선택된 수에 대하여 다른 스타일이 적용되게 하였습니다.

    var selectedRow: Int {
        return self.selectedRow(inComponent: 0)
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        self.reloadComponent(component)
    }
    
    func pickerView(_ pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {
        var color = UIColor.gray3
        var font = UIFont.iosText1Medium22
        
        if row == selectedRow {
            color = UIColor.whiteText
            font = UIFont.iosText1Medium22
        }
        
        let attributes: [NSAttributedString.Key: Any] = [
            NSAttributedString.Key(rawValue: NSAttributedString.Key.foregroundColor.rawValue): color,
            NSAttributedString.Key(rawValue: NSAttributedString.Key.font.rawValue): font
        ]
        
        return NSAttributedString(string: hours[row], attributes: attributes)
    }

SpecificTimePickerView

• 2개의 column이 있다는 점만 다르고 동일한 처리를 하였습니다.

    var selectedRow: Int {
        return self.selectedRow(inComponent: 0)
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        self.reloadComponent(component)
    }
    
    func pickerView(_ pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {
        var color = UIColor.gray3
        var font = UIFont.iosText1Medium22
        
        if component == 0 && row == pickerView.selectedRow(inComponent: 0) {
            color = UIColor.whiteText
            font = UIFont.iosText1Medium22
        }
        
        if component == 1 && row == pickerView.selectedRow(inComponent: 1) {
            color = UIColor.whiteText
            font = UIFont.iosText1Medium22
        }
        
        let attributes: [NSAttributedString.Key: Any] = [
            NSAttributedString.Key(rawValue: NSAttributedString.Key.foregroundColor.rawValue): color,
            NSAttributedString.Key(rawValue: NSAttributedString.Key.font.rawValue): font
        ]
        
        if component == 0 {
            return NSAttributedString(string: hours[row], attributes: attributes)
        } else {
            return NSAttributedString(string: minutes[row], attributes: attributes)
        }
    }

🚀 PR Point

• self.delagete의 위치가 적절한지 궁금합니다.

    private func configurePickerView() {
        self.backgroundColor = .clear
        self.delegate = self
        self.dataSource = self
    }

• 아직 레이아웃에 대한 확정이 나지 않아서 임의로 설정해 놓았습니다.
• iOS 기본 퓨커뷰의 특성상 다이얼이 중앙정렬되서 나옴
• 기본 패딩 값이 존재함.

📸 스크린샷

구현 내용	스크린샷
피커뷰 사용예

✅ Issue

Resolved #11

[Zoe0929]

굳굳 ~ 고생하셨습니다 :)

[Zoe0929]

P3. 저는 개인적으로 Picker의 UI를 결정하는 코드만 configurePickerView()에 포함되게 하고
setDelegate()라는 함수를 따로 만들어서 delegate를 관리하는 게 더 좋을 것 같은데 이 부분은 저희끼리 한번 논의해봅시다!
datasource는 이곳에 있는 게 알맞아보여요

[kim-seonwoo]

오옹 setDelegate로 도입해보겠습니다~!

[boyeon0119]

나이스네요

[boyeon0119]

p5.기가 막히네요 고생하셧슴니다~~

[boyeon0119]

나이스네요