iOS ) imagePicker 간단한 예제 연습 :) / 모달 뷰(modal view)

안녕하세요!! 오늘은 Udacity에 있는 https://www.udacity.com/course/uikit-fundamentals--ud788를 보면서 따라한 예제들 몇가지 보여드릴려고 해요 ㅎㅎ

예제를 설명하기에 앞서서 혹시 Modal View에 대해서 아시나요?

Apple iOS Human Interface Guidelines에도 나와있답니다. 

이 modal View는 설명으로 들으시는 것 보다 

직접 보면 바로 이해하실 수  있답니다 :)

Apple 공식 홈페이지에서 들고온 사진인데요, 

바로 이런 View들이 전부 modal View라고 할 수 있어요.

modal View는 사람들로 하여금 

메세지나 뷰들을 닫을 때까지 다른일들을 하지 못하도록 해요.

저 modal View가 떠 있는 상태로는 원래 저희가 하던 일을 할 수 없겠죠?

modal View가 스크린 위로 나타나면, 

유저는 반드시 버튼이나 다른 종료버튼을 눌러 modal View를 꺼야해요.

우리가 자주 쓰는 '카카오톡'에도 modal View들이 많답니다.

그 중 하나만 말씀드리면, 

저 카메라 버튼을 누르면, 밑에서 위로 카메라가 올라오게 되죠? 이것도 modal View라고 볼 수 있답니다 XD

자 그럼 간단하게 예제를 통해 만들어 볼까요?

우리가 만들 예제는 버튼을 클릭하면 

imagePickerView가 밑에서 위로 올라오는( modal View ) 

간단한 예제를 만들려고 해요 :)

완성본을 먼저 보여드리자면,

저 Click버튼을 누르게 되면, 

사진 상으로는 안보이지만 오른쪽 이미지를 선택하는 뷰가 

밑에서 위로 나타나게 된답니다. 

간단한 예제이니 잘 따라오실 수 있을거에요. 

먼저 프로젝트를 만들어주신 후,

버튼과 저 함수를 연결해주시고 코드를 따라 쳐주세요 ㅎㅎ

(저도 아직 배우는 입장이라 ㅠㅠ 코드의 설명이 정확하지 않을 수도 있습니다. 최대한 찾아보고 설명하는 것이지만 틀린점이 있다면 지적해주세요.)

let nextController = UIImagePickerController()

이 코드는 무엇을 의미할까요? 

음..대충 이미지를 고르는 컨트롤러 변수를 선언한 것 같아요. 

self.present(nextController, animated: true, completion: nil)

이 코드는 무엇을 의미 할까요?

self는 ViewController를 의미하는 것 같으니 ViewController가 관장하는 View에서 present. 즉 뭘 나타내주겠다는 함수같네요.

인자들을 보기전에 이 present함수의 원형을 같이 볼까요?

이제, 인자들을 한번 봅시다.

(nextController, animated: true, completion: nil)

첫번째 인자부터 봅시다. 

저기 원형을 보시면 

'나타낼 ViewController를 적어줘'라는 것 같네요.

우리가 적어준 nextController는 방금 위에서 선언해준 UIImagePickerController네요. 

'나는 UIImagePickerController를 나타내게 하고싶어'라는 말이 첫번째 인자에 들어가있는 것 같아요 :)

그리고 두번째 인자를 봅시다.

animated: true

이 animated에 대해서 잘 안나와 있네요ㅠㅠ

추측해본건데, animated이게 '뭘 어떻게 나타낼건지'를 뜻하는 것 같아요. 이 부분은 잠시 뒤에 비교를 통해 설명할게요 :) 

세번째 인자인 completion: nil은 대부분 nil로 설정한다고 해요.

자 세번째 인자에 대해서 설명드리겠습니다! 원형을 한번 다시 봐볼까요? 

completion : (() -> Void)? 이게 무슨뜻일까요? 

completion은 완성, 완료..뭐 그런뜻 같네요. 코드상에서는 '완료'라고 해석하는 것이 더 맞을 것 같아요 :) 

그리고 (() -> Void)?은 무슨뜻일까요? 

" -> 타입명 "은 리턴타입을 적어주는 형식이죠? 

그렇다면 이 뜻은 파라미터는 없는데 

리턴타입이 Void인 함수를 넘겨주겠다 라는 뜻같네요.

이 completion의 기능을 더 자세히 볼게요. 

간단히 해석해 볼까요? presentation..즉 

'뭘 보여주는 것이 끝난 후에 실행할 블록' 이라는 것 같네요. 

계속 읽어볼까요? 

이 블록은 리턴타입이 없어도 되고 (즉 Void) , 

파라미터를 가지지 않아도 됩니다. 

이 파라미터에 nil이라고 명시해줄 수도 있습니다

(이 말 때문에 (() -> Void)?에서 ?라는 옵셔널 기호가 붙게 된 것이겠죠?) 

즉 저 completion에서는 내가 present를 하고 난 후에 

실행될 어떤 액션 등을 실행시킬 수 있답니다. 

이렇게 해주면 내 코드의 flow를 잘 알 수 있게되고, 

액션이 겹친다거나 이럴 일이 줄어들겠죠? 

이 클로저에 대해서는 저도 처음부터 공부를 해봐야 할 것 같아요 :) 

자 이제 실행해볼까요?

하지만 잠깐!! 

저희가 지금 만드는게 UIImagePickerController를 이용하는 예제이죠?

그러면 저희는 이 앱이 내 사진에 접근할 '권한'을 줘야 한답니다.

먼저 그 권한을 설정해볼게요 :)

Into.plist에 들어가셔서 Information Property List에 +버튼을 눌러줍니다.

그리고 Privacy - Photo Library Usage Description를 선택해주세요.

value에는 그냥 just testing이라고 써주었습니다 ㅎㅎ

그리고 실행시켜 볼까요?

잘 나오셨나요? 위 완성본과 같은 간단한 앱이 만들어졌죠?

여기서 저는 animated의 기능이 궁금해서 

self.present(nextController, animated: true, completion: nil)

이 부분에서 animated를 false로 만들어줘보았답니다 

사진 상으로는 아까와 같아보이시죠? 

하지만 오른쪽 imagePickerView가 나타나는 방식이 다르답니다.

true일때는 밑에서 위로 나왔지만, false일때는 밑에서 위로 나오는 애니메이션 없이 그냥 바로 저 imagePickerView로 전환이 된답니다. 이런 소소한 차이가 있네요 ㅎㅎ

 

도움이 되셨으면 좋겠어요 🙏