[Swift] TextField, PickerView 가 있는 Alert 창 만들기

 

IoS의 장점 아닌 장점은 너무나 깔끔한 UI를 자랑한다는 것 입니다.

 

뭐랄까 독특한 방식으로 기존의 UI들을 대채하고 있는데 왜 다르게 했을까 하면서도 막상 사용하면 불편하지 않은 그런느낌? 

 

아마도 그런느낌이 더 Swift라는 언어로 개발을 하는데 매력적인 부분으로 다가오는 것 같다.

 

 

안드로이드에서 커스텀Alert을 만드는건 너무나 쉬웠다. 그래서 이것저것 다 집어넣는게 쉬웠는데

 

왠지 모르게 IOS에서는 이것저것 집어넣는 Alert창을 만드는건 쉽지 않았다....

 

차라리 하나의 컨트롤러를 만들어서 해버리면 쉬웠지만 내가 생각한 그런느낌은 아니었다...

 

결국 이 모든건 본인들의 라이브러리를 쓰라는 뜻이 아닐까 싶은데... 생각해보니 기존 IOS 앱들을 보면 다들 비슷하게 IOS고유의 스타일을 가지고 있는것 같다는 생각을 했고 결국 순응하기로 하였다...

 

 

 

Alert이 그냥 알림! 확인~ 만 하는게 아니라 값을 입력하고 그 입력한 값들을 가지고 선택해서 가져오는 뷰를 만들어 보고 싶었다.

 

예를들어

 

이러한 ViewController에서 초기에 테이블 값들이 없고 추가를 하거나 삭제를 하여 테이블 뷰를 갱신해주는 UI를 구성하려고 한다.

 

여기서 추가하기를 누르면 TextField가 담긴 알럿창이 나와야하므로 

 

 

//TextField Alert
    public func alertControllerWithTf(_ alertTitle : String,_ keyFlag : Int){
        let dialogMessage = UIAlertController(title: alertTitle, message: nil, preferredStyle: .alert)
        
        //성공 버튼과 리스너 
        let create = UIAlertAction(title: "저 장", style: .default, handler: { [self] (action) -> Void in
            if let userInput = self.roomTextField!.text {
                let label = UILabel(frame: CGRect(x: 0, y: 40, width: 270, height:18))
                label.textAlignment = .center
                label.textColor = .red
                label.font = label.font.withSize(12)
                dialogMessage.view.addSubview(label)
                label.isHidden = true
                if userInput == ""{
                    label.text = "파일명을 입력해 주십시오."
                    label.isHidden = false
                    self.present(dialogMessage, animated: true, completion: nil)
                }else{
                    print("\(keyFlag) 변경")
                    appDelegate.scenarioList.append(userInput)
                    
                    //이전 테이블뷰 컨트롤러의 값이 바뀌었다고 Noti해주기 
                    NotificationCenter.default.post(name: NSNotification.Name(rawValue: "reloadScenario"), object: appDelegate.scenarioList)
                }
            }
        })
        //취소 버튼과 리스너
        let cancel = UIAlertAction(title: "취 소", style: .default) { (action) -> Void in
            print("취소 버튼")
        }
        
        //액션을 더하기 
        
        dialogMessage.addAction(cancel)
        dialogMessage.addAction(create)
        
        // TextField를 넣기
        dialogMessage.addTextField { (textField) -> Void in
            self.roomTextField = textField
            self.roomTextField?.placeholder = "\(alertTitle)을 입력하시오"
        }
        // 띄우기
        self.present(dialogMessage, animated: true, completion: nil)
    }
    

막 이해하기 힘든 이론이 들어있거나 딱히 설명이 필요한 부분은 없고 복붙하고 활용하는게 효율적일것 같다.

 

 

 

이제 이러면 TableViewController의 테이블에는 새로운 값이 저장되어 있을겁니다.

 

그리고 삭제를 하려면 하나를 골라야 겠다는 생각으로 PickerView 를 생각했습니다.

 

 

약간 라디오 박스와 비슷한 개념같긴한데 뭔가 더 이쁘다. 라디오 박스나 피커뷰나 둘다 하나만 선택이 가능하다는 점이 비슷한거 같아서 

 

새롭게 피커뷰가 달려있는 Alert창을 만들어 보았다.

 

 

 public func alertControlWithPv(_ title : String,_ confirmText : String,_ flag : Int ) {
        let ac = UIAlertController(title: title , message: "\n\n\n\n\n\n\n\n\n\n", preferredStyle: .alert)
        pickerView = UIPickerView(frame: CGRect(x: 10, y: 50, width: 250, height: 150))
        
        pickerView.delegate = self
        pickerView.dataSource = self

        //하단에 Pickerview 생성
        ac.view.addSubview(pickerView)

        ac.addAction(UIAlertAction(title: confirmText, style: .default, handler: { [self] _ in
            let pickerValue = self.pickerData[self.pickerView.selectedRow(inComponent: 0)]

			//재활용할때 구분할 구분자(flag)  
            switch flag {
            case 0:
         
         		break
            case 1:
         
                break
            default :
                break
            }
            //pickerValue를 return 하도록 하는 액션(버튼)
            print("Picker value: \(pickerValue) was selected")
        }))
        ac.addAction(UIAlertAction(title: "취소", style: .cancel, handler: nil))
        present(ac, animated: true)
    }

 

이렇게 만들어진 데이터들 중에서 삭제할 것을 삭제하고 또 Noti를 주어서 Reload 테이블 시켜준다면

초기 TableView는 갱신되어 있을 것이다.