[iOS] 메모 저장기능 구현

메모저장 기능 구현

네비게이션 컨트롤러를 통해 네비게이션 뷰의 전환을 만들어낸다.

네비게이션 뷰 이전화면으로 전환하기 : pop
모달 뷰 이전화면으로 전환하기 : dismiss

Object Library 에서 Bar Button 을 추가하여 오른쪽 상단에 추가한다.

해당 버튼을 클릭하고 Attribute Inspector를 조정하도록 한다.

System Item을 Add로 변경하면 위 그림과 같이 + 모양으로 변경이 된다.

그 외 많은 아이템들을 살펴보면 우리가 흔히 핸드폰에서 볼 수 있었던 버튼의 모양들을 살펴볼 수 있다.

이후에 segue를 이용하여 화면 전환을 만들어낸다.

+ 버튼을 컨트롤 드래그하여 다음 화면(NavigationView Controller)에 드랍해준다. 이때 애니메이션 방식은 modally 를 선택한다.

세그가 정상적으로 연결되면 위와같은 그림을 확인할 수 있다.

이제 화면전환까지는 확인했다.

이후에 다음 뷰 컨트롤러에 상단바 Title 을 New Memo 등으로 설정해주고 Bar button 을 상단바 양 옆으로 배치시켜준다.

이후 각각의 버튼 System Item을 왼쪽 버튼은 Cancel , 오른쪽 버튼은 Save 로 변경해준다.

정상적으로 변경시 위 그림과 같이 버튼의 모양이 변경될 것이다.

이제 버튼은 모두 구성이 되었고 '메모장'을 구성해야한다.

Object Library 를 열어서 Text를 검색해본다.

만일 한줄만 입력받겠다면 Text Field를,
다량의 줄을 입력받겠다면 Text View를 추가해준다.

필자는 당연히 넉넉한 메모공간을 제공하기 위해 Text View를 배치했다.

인터페이스 빌더로 구성해야 할 것 들은 모두 끝났다.

슬슬 메모장의 느낌이 물씬 난다..!!

이제는 코드를 작성하여 Action 기능을 구현하도록 한다.

우리가 구현해야 할 기능은 아래와 같다.

1. Cancel 버튼 클릭시 이전페이지로 이동
2. Save 버튼 클릭시 메모내용 저장

Cancel 버튼 기능부터 구현하도록 해보자.

해당 뷰 컨트롤러를 제어하는 스위프트 파일로 이동하여 코드를 작성한다.

우리는 해당 버튼이 클릭되면 실행할 액션을 정의해야한다.

Cancel 버튼을 ctrl 드래그하여 해당 뷰 컨트롤러제어 파일에 @IBAction 함수를 생성한다.

modalPresentationStyle
내용을 참고한다.

위 내용이 우리가 진행하고자 하는 기능의 적합한 문서인지는 정확히 모르겠으나 이를 참고해서도 기능을 구현할 수 있다.

인스턴스의 프로퍼티인 modalPresentationStyle 이다.

뷰 컨트롤러에 보여지는 modally의 스타일에 관련된 문서이다.

선언부는 아래와 같다.

var modalPresentationStyle: UIModalPresentation Style { get set }

우리는 지금 모달 뷰를 내리는 방법을 알고싶다.

관련 내용을 찾아보도록 한다.

dismiss 메서드에서 우리가 찾고있던 기능을 제공하는것 같다.

func dismiss(animated: Bool, completion: (() -> Void)?)

Dismisses the view controller that was presented modally by the view controller

뷰 컨트롤러에 모달리 스타일로 보여주던 뷰 컨트롤러를 없애버리는 기능을 제공한다고 한다.

아까 cancel 버튼을 드래그하여 만든 @IBAction 함수에 해당 함수를 넣는다.

@IBAction func cancelBtn(_ sender: Any) {
    // 모달 하면을 닫을때는 dismiss
    // 네비게이션 하면을 닫을때는 pop
    dismiss(animated: true, completion: nil)
}

인자로 전달된 animated는 해당 함수 수행시 애니메이션 여부를 의미하고 completion은 성공적으로 함수가 끝난 이후에 진행할 것을 의미한다.

모달을 내린 이후 따로 진행할 것은 없으니 nil을 기재하도록 한다.

그리고 정상적으로 작동하는지 확인한다.

정상적으로 작동한다면 다음으로 save 기능을 구현하도록 한다.

메모 내용은 현재 Memo 클래스의 dummyMemoList 배열로 선언되어있다.

따라서, 여기에 내용을 저장해야한다.

import Foundation

class Memo {
    // 메모 클래스에는 내용과 날짜를 저장한다.

    var content: String     // 메모 내용
    var insertDate: Date    // 날짜

    init(content: String) {
        self.content = content
        self.insertDate = Date()
//        insertDate = Date()
    }

    // 테이블 뷰에 표시할 더미데이터
    static var dummyMemoList = [
        Memo(content: "Dummy List"),
        Memo(content: "Yeojaeng")
    ]
}

save 버튼을 ctrl 드래그하여 @IBAction 함수를 만든다.

또한 TextView에 레퍼런스를 위해 @IBOutlet 변수도 만든다.

만일 메모의 내용이 존재하지 않으면 경고창을 띄우도록 구현해보자.

일단은 alert 함수를 만들어내야한다.

UIAlertController
와 UIAlertAction
를 참고하도록 한다.

경고창을 만들기 위해 관련 공식 문서 UIAlertController를 참고하자.

UIAlertController는 UIViewController 클래스를 상속하고 있다.

이는 사용자에게 경고창 메세지를 출력해주는 객체라고 한다. 제대로 찾아온 것 같다..!

예시 코드를 한번 살펴보자.

let alert = UIAlertController(title: "My Alert", message: "This is an alert.", preferredStyle: .alert) 
alert.addAction(UIAlertAction(title: NSLocalizedString("OK", comment: "Default action"), style: .default, handler: { _ in 
NSLog("The \"OK\" alert occured.")
}))
self.present(alert, animated: true, completion: nil)

상수로 alert 인스턴스를 생성하고 addAction 메서드를 통해 더해준다. (Gesture Recognizer랑 뭔가 비슷하다.)

이후 present 메서드를 통해 출력시킨다.

자 이제 이것을 참고해서 직접 만들어보자.

//UIViewController+Alert.swift

import UIKit

// UIViewController 클래스 확장
extension UIViewController {
    func alert(title: String = "알람", message: String) {

        // alert 인스턴스 생성
        let alert = UIAlertController(title: title, message: message, preferredStyle: .style)

        // OK버튼 클릭시 Action
        let okAction = UIAlertAction(title: "확인", style: .default, handler: nil)

        alert.addAction(okAction)

        present(alert, animated:true, completion:nil)
    }
}

위 공식문서를 참고하면 만들수 있다.
message 값은 caller에서 전달받도록 한다.
(참고해도 어렵다.. 문서를 참고하는 습관을 기르자.)

@IBOutlet weak var memoTextView: UITextView!

@IBAction func saveBtn(_ sender: Any) {
    // 메모는 model.swift에 저장한다.
    // 클래스 내 배열 = dummyMemoList

    guard let memo = memoTextView.text, memo.count > 0 else {
        alert(message: "메모를 입력하세요.")

    // guard문을 이용해 메모값의 부재를 확인하며 가독성을 챙긴다!
    }

    let newMemo = Memo(content: memo)
    // 텍스트 값을 저장하기 위해 메모 클래스의 인스턴스를 만든다. 
    Memo.dummyMemoList.append(newMemo)
    // 실질적으로 메모값이 저장되어 있는 `dummyMemoList` 배열에 해당 값을 append 한다.

}

memo에 내용이 없을경우 만들었던 alert 함수를 호출하도록 코드를 작성하고 그외 의 경우 메모 내용을 저장하기 위해 Memo 클래스의 dummyMemoList에 추가하도록한다.

이후 정상작동 하는지 확인해보자.

메모장에 내용을 비우고 Save 버튼을 클릭하면 아주 멋있는 alert창이 띄워지며 메모 저장 기능도 정상적으로 작동한다.