2016년 1월 7일 목요일

textfiled 입력을 위한 keyboard , pickerview 에 Cancel, Done 버튼 추가하기

어제의 post 에서 http://mtsparrow.blogspot.kr/2016/01/swift-delegate.html

문제를 처리하기 위해 잘못 접근 했다.

ViewController는 입력 TextField가 있고
Keyboard 대신 PickerView가
그리고 화면은 dimming이 되는 이러한 ViewController를 프로그래밍 하기 위한 방법으로

Storyboard 에 TextField 를 디자인 하고
별도의 여러 View 를 .xib로 생성해서 각각 PickerView를 디자인 하고 배경은  blackColor에 opacity를 80%주어서 만든 커스텀 뷰를 올리고 거기에 Done 버튼과 Cancel 버튼을 delegate로 처리 하려고 했다.
TextField delegate 메서드에서 이 커스텀 뷰를 보이게 사라지게만 처리하면 끝이다.

그런데 헐!

키보드?? 어찌합니까? 어떻게 할까요?



PickerView와 Cancel, Done 버튼을 추가 해서 별도의 View로 만들고 그것을 계속 사용하면 되겠지 하며 디자인 가이드에 다음 페이지를 넘기는 순간 ? 헐 이런 숫자 Keyboard?? 그 위에 Cancel, Done 버튼

그렇다. 문제의 접근을 처음부터 잘못 이해 하고 덤벼 들었다.

iOS에서는 키보드위에 카메라 아이콘부터 많은 여러가지 기능을 추가 하도록 디자인 되어 있다.

키보드는 별도의 컨트롤로 디자인 타임에 할 수 있는 컨트롤이 아니다. 단지  TextField의 속성이다.



숫자 키보드가 나오게 하려면 TextField의 속성을 변경 해 주면 된다.

코드에서 textField의 inputAccessoryView에 toolbar를 붙이면 그게 키보드 위에 Cancel, Done 버튼 같은 것을 언질수 있다.

    func addCancelDoneButton() {
        let keyboardToolbar = UIToolbar()
        keyboardToolbar.sizeToFit()
        
        let cancelBarButton = UIBarButtonItem(barButtonSystemItem: .Cancel,
            target: view, action: Selector("cancelEditing:"))
        let flexBarButton = UIBarButtonItem(barButtonSystemItem: .FlexibleSpace,
            target: nil, action: nil)
        let doneBarButton = UIBarButtonItem(barButtonSystemItem: .Done,
            target: view, action: Selector("endEditing:"))
        keyboardToolbar.items = [cancelBarButton, flexBarButton, doneBarButton]
        excerTextField.inputAccessoryView = keyboardToolbar
    }

  
간단 하게 toolbar에 버튼 2개를 추가하고  excerTextField.inputAccessoryView = keyboardToolbar
를 하면 키보드 위에 버튼이 올라간다.

그럼 PickerView도?


물론 PickerView에 addSubView로 toolbar를 언저 보니 올라 간다.
이렇게 하면 또 삽질을 하는 것이다.
PickerView에 툴바를 붙이는 것도 PickerView.addSubView()로 하고
textFiled에서 PickerView를 보이게 하는 방법 또한 잘못된 접근이다.

textField에서 키보드 대신 pickerview를 보이게 하는 방법은 다음과 같다.
코드로 picker뷰를 생성하고
heightTextField.inputView = picker
마찬가지로 툴바를 생성 하고
heightTextField.inputAccessoryView = toolBar

이렇게 하면 TextField 선택시 pickerView가 나오고 pickerView 위에 cancel , done 버튼이 추가 된다.

단점

단점은 여러 입력 TextField의 각각의 PicekerView가 나와야 한다면
PickerView delegate  함수 내부가 각각의 pickerview에 따라 보여 줘야 하는 데이터부터 처리 하는 내용이 복잡 해지는 단점이 있다.
하지만 하나의 ViewController 클래스에서 모두 처리 가능 하다.

무지에서 시작된 어제의 삽질을 오늘 되돌린다.

마지막 키보드나 피커뷰가 나오면 전체 화면이 dimming 처리 하는 것은 어떻게?


다른 방법이 있을지 도 모르지만 이건 아주 간단하게

전체 화면 dimming  뷰를 만들고 이를 textfiled 편집 시작 시 보이게 하고, textfiled 편집이 종료되면
사라지게 하는 방법을 하면 된다.

var dimmingView : UIView!

viweDidLoad() {
....
dimmingView = UIView(frame: CGRectMake(0, 0, view.frame.width, view.frame.height))
        dimmingView.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.2)
        
        self.view.addSubview(dimmingView)
        dimmingView.hidden = true

func textFieldShouldBeginEditing() {
dimmingView.hidden = false

func textFieldShouldEndEditing() {
dimmingView.hidden = true

댓글 없음: