[iOS] 메모 앱 만들기 " Let's start !"

2024년 3월 20일 수요일

 

Todo List 화면 만들기 (TodoListViewController)

키워드 : UIButton, UITableView

---

1. Storyboard를 활용하여 기본 Todo List 화면 UI를 구성
   • UI는 자유롭게 구성해도 된다. 다만,  아래 요구사항은 지키기
2. UIButton과 UITableView을 활용하여 화면 구성
   • Todo 추가하기 UIButton 
   • Todo List 보여주기 UITableView
3. Todo에 필요한 데이터를 구성
   • 할일에 대한 데이터 구성
     • 할일 데이터의 고유값인 “id (Int)”
     • 할일 제목인 “Title (String)”
     • 완료 여부를 확인할 “isCompleted (Bool)”

---

 

스토리보드를 사용하며 다시 정리한 개념

 

Outlet : code에서 storyboard로 object를 연결하는 것

Actions : storyboard의 controls에서 swift code로 연결시키는 것

 

object를 클릭하고 control 키를 누르고 마우스로 Assistant code에 드래그앤드롭으로 연결시켜주면 된다.

viewDidLoad()를 기준으로 IBOutlet은 위에, IBAction은 아래에 연결시키는 것이 보편적?

---

 

일단 오늘은 아래와 같이 ViewController에서 코드를 짜고,

추가적으로 EntryView와 TaskView Controller를 코코아터치클래스로 추가해서

각 역할을 custom class 로 지정해주고, ID를 설정했다.

이렇게 정리하니 storyboard에서 4개의 화면을 확인하며 왔다갔다 작업하기 훨씬 수월하다. 

 

But 라이브러리에 있는 bar button 으로 Add 버튼을 우상단에 넣으려고 하는데 드래그앤드롭이 좌하단에만 적용되어 신기하고 난감했다. 내일 튜터님에게 여쭤봐야겠다. 아무튼 오늘은 여기까지. 

import UIKit



class ViewController: UIViewController {

    @IBOutlet var tableView: UITableView!
    
    var tasks = [String]()

    override func viewDidLoad() {
        super.viewDidLoad()
       
        // Get all current saved tasks
    }
    
    @IBAction func didTapAdd () {
        
        let vc = storyboard?.instantiateViewController(identifier:"entry") as! EntryViewController
        vc.title = "New Task"
        navigationController?.pushViewController(vc, animated: true)    }
}

extension ViewController: UITableViewDelegate {
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
    }
}

extension ViewController: UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tasks.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        
        cell.textLabel?.text = tasks[indexPath.row]
        
        return cell
    }
}