Do it! 스위프트로 아이폰 앱만들기(5~6장)

5장. Picker View를 사용해 원하는 항목 선택하기

6장. Alert 사용해 경고 메시지 표시하기

# Picker View : 여러 항목 중 하나를 선택하는 화면

 

피커뷰 사용 예시

피커 뷰가 상호작용하려면 피커 뷰에 대한 델리게이트 메소드를 사용해야 합니다. 특정 객체와 상호 작용할 때 메시지를 넘기면 그 메시지에 대한 책임은 델리게이트로 위임됩니다. 즉, 사용자가 객체를 터치했을 때 해야할 일을 델리게이트 메소드에 구현하고 해당 객체가 터치되었을 때 델리게리트가 호출되어 위임 받은 일을 하게 되는 것입니다. 

가. 피커 뷰의 델리게이트 사용을 설정하기 위하여 마우스 오른쪽 버튼으로 피커 뷰를 선택한 후, 위쪽의 뷰 컨트롤러 아이콘 위로 끌어다 놓습니다. 그리고 선택화면이 나오면 'delegate'를 선택합니다. 

맥북 마우스패드의 오른쪽에서 피커뷰를 클릭(누른 상태)하고 위쪽의 뷰 컨트롤러 아이콘 위로 끌어다 놓습니다.

delegate를 선택합니다.

나. 추가로 상속받을 클래스를 선언하고, 필요 pickerView들을 재정의합니다. 

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
	let MAX_ARRAY_NUM = 10
    let PICKER_VIEW_COLUMN = 1 // 한번에 보여질 항목 갯수
    let imageFileName= [ "1.jpg", "2.jpg", ..., "10.jpg"]
    
    var imageArray = [UIImage?]()
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
    	return PICKER_VIEW_COLUMN
    }
    func pickerView(_ pickerView : UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    	return imageFileName.count
    }
    func pickerView(_ pickerView : UIPickerView, titleForRow row : Int, forComponent component:Int) -> String? {
    	return imageFileName[row]
    }
    /* 선택되었을 때 행동 정의 */
    func pickerView(_ pickerView: UIPickerView, didSelectRow row : Int,
         inComponent component : Int) {
         lblImageFileName.text = imageFileName[row]
         imageView.image = imageArray[row]
    }
    
    override func viewDidLoad() {
    	super.viewDidLoad()
        
        for i in 0 ..< MAX_ARRAY_NUM {
        	let image = UIImage(named: imageFileName[i])
            imageArray.append(image)
        }
        lblImageFileName.text = imageFileName[0]
        imageView.image = imageArray[[0]
    }    
}

다. 피커뷰 룰렛에 파일명 대신 이미지를 출력한다면, 다른 pickerView를 정의해야 합니다.

// 중략
	let PICKER_VIEW_HEIGHT : CGFloat = 80

	//타이틀을 표기하는 pickerView를 우선 주석 처리
    //func pickerView(_ pickerView : UIPickerView, titleForRow row : Int, forComponent component:Int) -> String? {
    //	return imageFileName[row]
    //}
    
	func pickerView(_ pickerView: UIPicker/view, viewForRow row: int, forComponent component : int, reusing view: UIView?) -> UIView {
    	let imageView = UIImageView(image:imageArray[row])
        imageView.frame = CGRect(x:0, y:0, width : 100, height : 150)
        return imageView
    }
    
    // 표시할 이미지의 높이 설정 
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
    	return PICKER_VIEW_HEIGHT
    }    

// 생략

# Alert를 사용해서 경고 메시지 표시하기

Alert, Action을 정의한 후 Alert에 Action을 하단에 붙여서 present한다고 생각하면 됩니다.

let lampOnAlert = UIAlertController(title:"경고", message: "현재 on 상태입니다.", preferredStyle : UIAlertController.Style.alert)

let onAction = UIAlertAction(title:"네, 알겠습니다.", style: UIAlertAction.Style.default, handler:nil)

lampOnAlert.addAction(onAction)

present(lampOnAlert, animated:true, completion:nil)

위부분이 Alert문구, 아랫부분이 Action문구

네, 아니오에 대항 행동(Action) 정의하기

네, 아니오에 대한 액션을 정의한후, Alert에 추가합니다. 액션에 대한 정의를 클로저(Closer)로 정의해서 handler에 대입합니다.  

let lampOffAlert = UIAlertController(title:"램프 끄기", message: "램프를 끄시겠습니까?", preferredStyle : UIAlertController.Style.alert)

let offAction = UIAlertAction(title:"네", style: UIAlertAction.Style.default, handler: {
                ACTION in self.imgLamp.image = self.imgOff
                self.isLampOn = false
            })
        
let cancelAction = UIAlertAction(title:"아니오", style: UIAlertAction.Style.default, handler:nil)

lampOffAlert.addAction(offAction)
lampOffAlert.addAction(cancelAction)

present(lampOffAlert, animated: true, completion: nil)

요약 : 
- 피커 뷰는 delegate를 설정한 후, pickerView라고 타이핑하면 나오는 함수들 중에서 필요한 것을 재정의하면 됩니다. 
- Alert창은 alert, action을 정의해서 합친 이후 필요시 action에 따른 동작(이벤트)을 handler에 연결시켜주면 됩니다.