System View Controller: 스위프트 Swift 해석가이드

안녕하세요. 애플앤마블입니다.

오늘 만들어 볼 어플은 사진을 공유하고, Safari를 열고, 사진을 등록하고 이메일로 보낼 수 있는 어플을 만들어 보는 시간입니다.

아래 동영상 먼저 보고 올게요!

위 동영상과 똑같은 어플을 함께 만들어 볼까요?

iBooks에 무료로 배포되어있는 책을 참고하셔서 책과 함께 따라오면 더욱 좋습니다.

Apple Education. ‘App Development with Swift.’ Apple Inc. - Education, 2017. iBooks. https://itun.es/kr/SoKQib.l

581p~598p

            기본틀

Xcode실행 후 Sigle View Application 템플릿의 이름은 "SystemViewController"로 설정해주세요.

Main.storyview에 있는 View Controller안에 'Image View'와 'Horizontal Stack View' 그리고 'Button'네 개를 끌어와 넣어주세요.

여기서 4개의 Button은 Horizontal Stack View안에 넣어 주셔야 합니다!

아래 사진처럼 얘들을 배치해주세요.

(참고로 저의 imageView의 크기는 320*320입니다.)

Stack View의 위치를 다음처럼 8,10,10,195로 설정해주고 Add 4 Constraints.

그리고 Stack View의 Attribute inspector의 Distribution을 Fill에서 Fill Equally로 바꿔주세요.

다음 image View의 위치를 94,10,10,8로 변경 후 Add 4 Constraints.

네개의 버튼들의 이름을 바꿔주는게 좋겠죠?

각각의 이름들을 'Share', 'Safari', 'Camera', 'Email'로 바꿔주세요.

이제 Assistant editor과 Control + Drag를 이용하여 4개의 버튼에는 IBAction을, image View에는 IBOutlet을 지정하겠습니다.

imageView는 Outlet을, 4개의 버튼에는 Action에 Type은 UIButton(책에는 Any로 되어 있는데 잘 못 되어있는거에요._.)

각각 버튼의 이름은 'shareButtonTapped', 'safariButtonTapped', 'photoButtonTapped', 'emilButtonTapped'로 설정해주세요.

다 하시면 아래와 같아요.

여기까지가 어플의 기본 모양틀입니다. 잘 따라오셨다면 다음으로 넘어갈게요~

            Share With The Activity Controller

이번 단원은 생각보다 매우 간단해요. 요령은 코드를 넣어보고 코드를 읽으면서 어떤 코드인지 학습해 보는게 좋다고 생각하구요. 저는 제가 하면서 잘 안됐던 부분에 대해서 짚어주는 역할을 하는게 좋을 것 같다고 항상 생각하고 있으면서 해석가이드를 진행하고 있어요. 디테일한 설명들은 교재를 보면 훨씬 만족감을 느낄거에요.

ViewController.swift에 들어가 @IBAction shareButtonTapped 안에 다음과 같이 코딩해주세요.

교재에서는 여기서 어플을 실행해보라고 하는데 이 때는 아무것도 안되더라구요. 그래도 뒤에 가서 몇몇 설정을 바꾸고 나면 정상적으로 실행되요!

            Use Safari Services to Display Web Content

Safari 버튼을 누르면 특정한 인터넷 페이지가 열리는 기능을 코딩해줄게요.

코트 위쪽을 보면 import UIKit이 있는데 그 밑에 import SafariServices 코드를 넣어주세요. 이 코드는 새로운 장비(API)를 사용하겠다는 코드에요.

그 다음엔 아래와 같이 @IBAction func safariButtonTapped 안에 코딩해주세요.

밑줄 체크친 부분에 개인 홈페이지나 원하는 페이지의 url을 넣으면 그 페이지로 넘어갑니다. 간단하지 않나요?

이제까지 보다는 조금 복잡한 코드 두 부분을 할 차례입니다. 복잡하진 않는데 책에서 설명을 조금 부족하게 했더라구요....! 제 가이드를 따라와 주세요.

           Access the Camera

이제 Camera 버튼을 눌렀을 때 사진첩에 있는 사진들을 선택하고 그 사진이 imageView에 표출되는 코드입니다.

그전에 책에서 p.588 ~ p.590 부분, Present An Allert Controller 부분은 이론 같은 부분이기 때문에 해보시는것도 좋은데 뒤에 올바른 코드에 지우고 수정해야하는 과정에서 햇깔릴 수 있기 때문에 넘어가서 Access the Camera로 바로 들어가도 무관합니다.

Class에 다음과 같이 UIImagePickerControllerDelegate, UINavigationControllerDelegate를 추가해주세요.

이제 @IBAction func photoButtonTapped안에 다음과 같이 코딩해주세요.

하지만 여기서 앱을 실행했을 때 제대로 실행이 안될거에요. 그거는 이 어플에게 photoLibrary에 대한 권한을 주지 않아서 생기는 오류에요.

Info.plist를 열어주세요.

위 사진을 보면 붉은색으로 체크되어 있는 +버튼을 눌러 항목을 추가해주시고 원표시로 되어있는 화살표를 눌러 Privacy- Photo Library Usage...를 누른 후 오른쪽에 설명을 적어주세요.

그 후 바로 다음에 위와 같은 fuction을 추가한 뒤 앱을 실행해 보세요. 사진 어플에서 사진을 추가하면 imageView에 나타나는 것을 볼 수 있습니다.

이제, 마지막 단계입니다!

           Send Email From Your App

이제 imageView에 나타나게한 사진을 mail로 전송하는 기능을 하는 'Email Button'에 대한 코드입니다.

import MessageUI를 추가해주세요.

class에 MFMailComposeViewControllerDelegate를 추가해 주세요. 그 후 @IBAction func emailButtonTapped안에 코딩을 하고 그 아래 func를 추가해주세요.

이제, 앱을 실행해보세요. 완성입니다! 

이번 System View Controller는 생각보다 아주 간단한 과정이었고, 해석할 때도 무리는 없었는데 설명이 잘 되어있지 않은 부분이있었습니다.

 그래도 따라오신다고 고생하셨습니다.