iOS APP - 메모 앱 #1

longlivedrgn·2022년 8월 12일
post-thumbnail

Navigation Controller 생성

  • Navigation Controller를 추가.
  • Bar button item도 추가.
  • Prefer large title


Memo Class 생성하기

  • 새로운 Swift 파일을 생성하여 아래와 같이 Memo Class를 생성해준다.
class Memo {
    var content: String
    var insertDate: Date

    init(content: String) {
        self.content = content
        insertDate = Date()
    }
    static var dummyMemoList = [
    Memo(content: "Lorem Ipsum"),
    Memo(content: "Subscribe + 👍 = ♥️")
    ]
}

메모 목록 구현

  • Table View Cell의 Style을 Subtitle로 바꿔준다.

  • 그러면 아래와 같이 변하게 된다.

  • TableViewController를 생성해준다.
class MemoListTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
        // self.navigationItem.rightBarButtonItem = self.editButtonItem
    }
  • tableview와 연결해 준다.

  • 또한, tableviewCell에 identfier를 "cell"로 지정하자.

  • tableViewController에서 셀의 갯수를 dummyMemoList의 갯수만큼으로 설정을 하자.
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return Memo.dummyMemoList.count
    }
  • tableViewController에서 deque하는 cell은 앞서 identifier를 설정한 "cell"로 설정을 한다.
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

        // Configure the cell...
        let target = Memo.dummyMemoList[indexPath.row]
        cell.textLabel?.text = target.content
        cell.detailTextLabel?.text = target.insertDate.description

		return cell
    }

DateFormatter 사용해보기

  • formatter를 추가해주기
class MemoListTableViewController: UITableViewController {
    
    let formatter: DateFormatter = {
       let f = DateFormatter()
        f.dateStyle = .long
        f.timeStyle = .short
        f.locale = Locale(identifier: "Ko_kr")
        return f
    }()
  • formatter 적용해보기
        // Configure the cell...
        let target = Memo.dummyMemoList[indexPath.row]
        cell.textLabel?.text = target.content
        cell.detailTextLabel?.text = formatter.string(from: target.insertDate)

새 메소 쓰기 화면 추가

-> + barbuttonItem을 누르면 새로운 메모 쓰기 화면이 추가되게 하기

  • 아래와 같이 새로운 viewcontroller를 추가해주고, navigation controller를 embed in 해주기

  • navigation view와 + barbuttonItem를 present modally로 연결해주기.

  • 아래와 같이 barbutton item 두개와 text view를 추가해준다.

  • 새 메모 뷰의 view controller를 생성해준다.

class ComposeViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
  • 아래와 같이 viewController와 새 메모 view를 연결해준다.

취소 기능 구현

  • cancel barbuttonitem을 ComposeViewController에 action으로 추가해준다. (close함수)

  • 아래와 같이 modal을 닫는 dismiss 코드를 추가해준다.

    @IBAction func close(_ sender: Any) {
        dismiss(animated: true, completion: nil)
    }

메모 저장 기능 구현

  • 위와 같이 Save 버튼을 action으로 이어준다.
    @IBAction func save(_ sender: Any) {
    }
  • 그리고 textview의 outlet을 생성해준다.

  • 그리고 save를 할 때에 textview에 text가 있는 지 없는 지를 확인하구, 없을 경우 경고창을 띄우기로 하자

  • 경고창을 띄우는 코드를 따로 swift file로 만들자

extension UIViewController {
    func alert(title: String = "알림", message : String){
        let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
        
        let okAction = UIAlertAction(title: "확인", style: .default, handler: nil)
        alert.addAction(okAction)
        
        present(alert, animated: true, completion: nil)
    }
}
  • 그리고 마저 save 코드를 완성해주자.
    @IBAction func save(_ sender: Any) {
        // memoTextView에 있는 text를 newMemo로 저장!
        guard let memo = memoTextView.text, memo.count > 0 else {
            alert(message: "메모를 입력하세요")
            return
        }
        let newMemo = Memo(content: memo)
        Memo.dummyMemoList.append(newMemo)
        
        // 새 메모 창을 닫기
        dismiss(animated: true, completion: nil)
    }

0개의 댓글