Protocol과 Delegate Pattern을 이용해 Data를 가져와 표시하는 화면 구성하기. +체크표시 활성화하기

(Macbook Air M1 8-256 Monterey 12.5.1 Xcode 13.1)

 

Why?

 

저번포스팅을 작성하면서 구현해보고 싶은 내용이 있어서 해당 포스팅을 작성하게 되었습니다.

 

저번포스팅에서는 단순히 Data만을 가져왔다면,

이번에는 카테고리 칸에 체크표시를 표시함으로써

좀 더 명확한 기능을 구현해보고자 합니다.

 

 

 

---

 

 

 

 

(1) 체크표시가 들어가야하기 때문에, 일단 임시로 설정해놨던 모델을 분리시켜보도록 합시다.

 

새로운 swift file을 만들어 모델을 설정합니다.

카테고리 이름과 체크표시를 변수로 설정해두고, 함수에 해당 내용을 담습니다.

//CategoryListModel.swift

import Foundation

struct CategoryListModel {
    let categoryListName: String
    var isSelected: Bool
    
    static func categoryList() -> [CategoryListModel] {
    	return [
            CategoryListModel(categoryListName: "Number1", isSelected: false),
            CategoryListModel(categoryListName: "Number2", isSelected: false),
            CategoryListModel(categoryListName: "Number3", isSelected: false),
            CategoryListModel(categoryListName: "Number4", isSelected: false)
            ]
    }
}

- 체크표시를 위해 isSelected 변수를 만들어준 뒤, Bool타입으로 선언해주었습니다.

 

 

 

 

---

 

 

 

 

(2) 모델을 만들었으니 이제 임시배열이였던 testArr를 삭제하고,

새로운 변수를 만들어 카테고리 이름을 넣어줍니다.

//CategoryViewController.swift

var newList = CategoryListModel.categoryList()

 

 

 

---

 

 

 

 

(3) 이제 새로운 변수에 맞게끔 extension부분을 수정해줍니다.

//CategoryViewController.swift

extension CategoryViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return newList.count
        }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as UITableViewCell
        
        cell.textLabel?.text = newList[indexPath.row].categoryListName
        
        return cell
        }
        
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        delegate?.VCdelegate(data: newList[indexPath.row].categoryListName)
        self.navigationController?.popViewController(animated: true)
        }

 

 

 

---

 

 

 

 

 

 

정상적으로 적용이 됬는지 확인해봅니다.

 

 

 

이제 체크표시를 구현하는 코드작업을 해야합니다.

 

 

 

 

 

---

 

 

 

 

(4) 먼저 선택된 내용을 담는 변수와 함수를 구현합니다.

//CategoryViewController.swift

var listName: String?

func checkMark() {
    guard let index = newList.firstIndex(where: {$0.categoryListName == listName}) else { return }
    newList[index].isSelected = true
}

 

 

 

 

---

 

 

 

 

(5) 정의한 함수를 viewDidLoad()에 선언해줍니다.

//CategoryViewController.swift

override func viewDidLoad() {
    .
    .
    .
    
    checkMark()
    
}

 

 

 

---

 

 

 

 

 

(6) 체크표시를 하기 위한 코드를 추가해줍니다.

 

체크표시를 하기 위해 extension cellForRowAt부분을 수정해줘야합니다.

 

//CategoryViewController.swift

cell.accessoryType = newList[indexPath.row].isSelected ? .checkmark : .none

 

 

추가적으로 didSelectRowAt부분도 수정해야합니다

//CategoryViewController.swift

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    for row in 0..<tableView.numberOfRows(inSection: 0) {
        if row == indexPath.row {
            newList[row].isSelected = true
            delegate?.VCdelegate(data: newList[indexPath.row].categoryListName)
            } else { newList[row].isSelected = false }
        }
        
        self.tableView.reloadData()
        self.navigationController?.popViewController(animated: true)
    }

 

 

 

 

---

 

 

 

 

(7) ViewController로 돌아와

buttonTapped action부분에 확인작업을 하는 코드 한 줄만 추가하면 모두 끝납니다.

//ViewController.swift

CategoryVC.listName = button.titleLabel?.text

 

 

 

---

 

 

 

 

정상적으로 실행되는지 확인해봅니다.

 

 

이제 모두 끝났습니다.

정상적으로 체크표시가 되면서 작동하는 것을 볼 수 있네요.

 

 

 

 

---

 

 

 

저번시간의 궁금증을 포스팅을 해보면서 해결했습니다.

 

 

오류가 있거나, 피드백이 있다면 언제든지 댓글로 알려주세요!

감사합니다 :)