IOS_Swift_사진촬영_사진저장_Picker

안녕하세요 

생각보다 많은 여러 앱에는 앨범, 사진 등의 기능을 제공하는 앱들이 많이 있습니다. 보통 이러한 앱들을 만들기 위해서는 PickerController를 활용해야 합니다. 

즉 그래서 이번에 작성할 포스팅은 UIPickerController 입니다.

UIPickerController??

 

피커컨트롤러

피커 컨트롤러는 카메라, 앨범 등을 사용자에게 보여주는 컨트롤러이며, NavigationController를 상속받았습니다.

피커 컨트롤러의 대해서 간단히 살펴보면 사진, 동영상들을 포함한 미디어들을 관리하는 라이브러리라고 되어 있습니다.

간단히 살펴보았으니 이제 실제로 어떻게 사용하는지 확인해보겠습니다. 

StoryBoard를 이용한 UI 구성

제일 먼저 Xocde를 켜서 다음과 같이 UI를 구성하겠습니다.

 

UI

내비게이션 컨트롤러로 뷰를 감싸주고 , 이미지 뷰 그리고 각각의 액션들을 행동할 버튼들을 만들어 줍시다.

UI 구성을 맞췄으면 이제 코딩을 본격적으로 시작해봅시다!

코딩하기

제일 먼저 해야 할 것은 picker 컨트롤러를 할당해주셔야 합니다!

피커 컨트롤러는 말 그대로 컨트롤러 이기 때문에 present를 해주어야 합니다. 내비게이션 컨트롤러 델리게이트 그리고 피커 컨트롤러의 델리게이트를 선언해주어야 합니다.

코드의 가독성을 높이기 위해 extension을 통해 델리게이트를 채택해줍시다.

그리고 바로 밑에 보이는 메서드는 피커 컨트롤러의 델리게이트 메서드입니다. 이 메서드가 하는 행동은 사진첩 또는 사진 촬영을 한 후 

실행되는 메서드입니다.  위와 같이 델리게이트를 선언했으면 viewdidload로 돌아가 델리게이트를 채택해줍시다.

델리게이트 채택까지 해준 뒤 각각 버튼들의 액션을 정의해줍시다. 저는 아래와 같이 작성하였습니다.

자 그럼 피커 컨트롤러를 어떻게 이용해야 사진을 찍고, 앨범을 열고 사진을 저장하는지 한번 알아보겠습니다.



애플 레퍼런스를 들어가서 확인해보면 위와 같은 sourceType이라고 있습니다.  본문을 살펴보니 값은 enum으로 되어있고 enum 값에 

따라 화면에 보이는 게 달라지는 것 같습니다.

SourceType에 값이 어떻게 되어 있는지 조금 더 깊게 들어가 확인을 해보겠습니다.

 

camera / photoLibaray 가 되어있습니다. 

포토라이브러리는 앞으로 위의 나와있는 컨트롤러를 사용하라고 합니다. 하지만 이번 포스팅에서는 기존의 포토라이브러리를 사용하겠습니다.( 차 후 포스팅에 위의 컨트롤러를 사용하는 포스팅을 작성하도록 하겠습니다.)

자 이제 확인을 했으니 코드를 보러 가겠습니다.

코드 영역으로 돌아와 아까 선언한 picker.sourceType 에 set을 하기 위해  "."을 눌러 확 이하면 다음과 같은 enum 값  들이 나옵니다.

위의 메서드 이름은 앨범을 보여주는 함수이니 포토라이브러리로 초기화해주도록 합시다.

picker.sourceType을 초기화한 뒤 picker를 프레젠트 해주는 코드를 작성해 줍시다. 

자 다음은 카메라를 열어주는 코드를 작성해보겠습니다.

코드를 한번 보시면 앨범을 오픈해주는 코드랑 조금 다르신 것이 보일 겁니다. 그 이유는 시뮬레이터에서는 카메라가 안되기 때문에 위와 같은 코드를 추가시켜줘야 합니다.

그렇기 때문에 위와 같은 조건문을 만들어 주셔야 합니다. 안 그러면 시뮬레이터 실행 후 카메라를 오픈하면 크래쉬가 나게 됩니다ㅠㅠㅠㅠ 

(위의 메서드는 장치가 지정된 소스 유형(카메라, 포토라이브러 등)을  지원하는지를 확인하는 메서드입니다. 지원을 하면 true 아니면 false입니다.)

자 이제 피커(카메라, 앨범)를 열기 위한 과정은 모두 됐으니 한번 테스트해보도록 해보겠습니다.

 

 

위와 같이 시뮬레이터가 열리고 앨범을 눌러보면!

앨범이 열린다

짜잔! 앨범이 열립니다!! 하지만 여기서 사진을 선택해보면 앨범 창도 안 닫히고 아무런 반응이 없습니다!

버그인가??.. 시뮬이 이상한가?

라고 생각을 할 수 도 있는데 그 이유는 아까 작성한 델리게이트 메서드에서 아무런 코드도 작성 해 주지 않았기 때문입니다. 

자 그럼 다시 델리게이트로 이동해 남은 코딩을 해보도록 하겠습니다.

위와 같이 입력을 하면 앨범에 선택한 사진이 우리가 만든 이미지 뷰에 보이게 됩니다!!

인포에 대해서 간단히 확인해보면 다음과 같습니다. 키값의 따라 사용자에게 키값에 맞는 값을 보여준다고 하는 것 같습니다. 

키의 값들을 그중 우리가 사용한 originalImage 가 있는 것이 보입니다. 값을 살펴보면 유저가 선택한 이미지를 보여준다고 합니다.

이러한 이유들 때문에 우리는 위와 같은 코딩을 하고 다시 UIImage로 타입 캐스팅해준 것입니다!

(**코드 사진에는 빠져있는데 dismiss를 해주셔야 합니다.)

자 이제 다시 시뮬레이터를 켜서 결과를 확인해 봅시다.

자 이제 우리가 원하는 대로 사진이 정상적으로 보입니다.

(아이폰과 직접 연결하신 분들은 사진 촬영도 직접 테스트해보시면 좋을 것 같습니다. 저는 시뮬레이터로 테스트하느라 아래와 같이 아이폰 없다고 나옵니다.)

 사진촬영이 불가

 

이제 우리가 선택한 사진을 저장하는 메서드를 작성하겠습니다.

자 위에 함수는 사진을 저장해주는 함수입니다. 첫 번째 파라미터로는 저장할 이미지 2번째는 호출한 타깃 그냥 self를 넣어주시면 되겠습니다. 그리고 3번째 파라미터는 

위와 같은 폼을 실렉터로 보내야 합니다. 그리고 마지막 파라미터는 completionSelecter에 보내줄 포인터라고 되어있습니다. 

간단히 nil을 주시면 됩니다! 

자 3번째 폼은 어떻게 주어야 하나 아래와 같이 @ojbc용 코드를 하나 만들어 주시고 각각의 맞는 파라미터를 설정해주시면 됩니다!! 

자 이제 모든 소스가 완성됐으니 이제 다시 빌드하고 시뮬레이터를 통해 확인해보겠습니다.

현재 앨범에는 위와 같이 구성되어 있고 신발 사진을 앨범에서 불러와 저장하겠습니다!

 

사진을 불러와 사진 저장을 누르면 위와 같이 사진이 저장되는 것을 확인하실 수 있습니다.

 

**

이번에는 피커 컨트롤러의 기능들과 사진을 저장하는 방법에 대해서 포스팅을 해보았습니다. 

다음에는 더 도움되고 알찬 내용으로 포스팅을 하도록 하겠습니다. 봐주셔서 감사합니다.