SeSAC TIL - 22.07.19

1. 오늘 배운 내용

• 과제를 같이 수행해보면서 배열에 담긴 데이터를 열거형 타입의 데이터로 변경하는 리팩토링을 해보았습니다.
• 커스텀 타입의 테이블 뷰에 대해 배우고 UI를 구성하는 방법에 대해 배웠습니다.
• Extension을 활용하여 다양한 파일에서 동일한 기능을 구현하는 방법에 대해 배웠습니다.

---

2. Checklist

2-1. TableView ReloadData

셀에 있는 데이터를 변경 후에는 항상 ReloadData() 메서드를 통해 화면을 갱신해주어야 합니다. 해당 메서드는 셀 및 섹션 등을 모두 리로드하는 메서드이고 셀과 섹션 등만 따로 리로드하는 메서드도 있습니다.

---

2-2. Custom TableViewCell

테이블 뷰 셀에서 제공하는 기본적인 스타일을 사용하지 않고 자유롭게 구성하는 스타일입니다. 헤더 및 후터도 뷰를 넣어서 커스터마이징할 수 있습니다. 

---

2-3. Enum CaseIterable

열거형의 모든 케이스를 배열로 담을 수 있도록 해주는 키워드입니다. 이를 활용해서 열거형에 들어있는 모든 타입을 배열처럼 활용할 수 있고 indexPath와 같이 사용할 경우 반복문없이 편하게 셀을 구현할 수 있습니다.

---

2-4. Extension

클래스를 확장하여 입맞에 맞는 메서드를 생성하여 여러 파일에서 사용할 수 있게 해줍니다. 계산 속성도 사용할 수 있고 새로운 스타일의 생성자도 구현할 수 있습니다. 그러나 기존에 존재하는 메서드를 override하여 사용할 수 없습니다. 

---

3. 과제 및 실습

커스텀 테이블 뷰 셀을 활용하여 쇼핑리스트 및 검색 화면 만들기

• 인터넷을 통해 체크박스와 즐겨찾기 버튼의 액션의 애니메이션 효과를 주는 코드를 찾아 적용해보았습니다. 
• 현재 문제는 체크박스와 즐겨찾기 체크된 항목이 해당 셀에 있지 않고 추가 및 삭제시 움직인다는 점 입니다. 이 점은 아직 해결 못했으며 앞으로 해결해봐야할 것 같습니다..

class TrendTableViewController: UITableViewController {

    // MARK: - Properties
    
    var list = ["테스트 출력", "쇼핑리스트 출력"]

    // MARK: - Init
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // MARK: - Table View Functions
    
    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 1
    }
    
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        if section == 0 {
            return 1
        } else {
            return list.count
        }
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        if indexPath.section == 0 {
            
            let cell = tableView.dequeueReusableCell(withIdentifier: "TextFieldTableViewCell", for: indexPath) as! TextFieldTableViewCell
            
            cell.addButton.setTitle("추가", for: .normal)
            cell.addButton.clipsToBounds = true
            cell.addButton.layer.cornerRadius = 3
            cell.addButton.backgroundColor = .systemGray4
            cell.addButton.setTitleColor(.black, for: .normal)

            cell.actionBlock = {
                self.list.append(cell.shoppingTextField.text!)
                tableView.reloadData()
            }
            
            cell.shoppingTextField.placeholder = "무엇을 구매하실 건가요?"
            cell.shoppingTextField.backgroundColor = .systemGray5
            cell.shoppingTextField.borderStyle = .none
            
            cell.actionBlock = {
                self.list.append(cell.shoppingTextField.text!)
                tableView.reloadData()
            }
            
            return cell
            
        } else if indexPath.section == 1 {
            
            let cell = tableView.dequeueReusableCell(withIdentifier: "TrendTableViewCell", for: indexPath) as! TrendTableViewCell
            
            cell.shoppingListLabel.text = list[indexPath.row]
            cell.shoppingListLabel.font = .systemFont(ofSize: 18)
            
            cell.checkboxButton.tintColor = .black
            cell.favouriteButton.tintColor = .black
            
            return cell
            
        } else {
           
            let cell = tableView.dequeueReusableCell(withIdentifier: "TrendTableViewCell", for: indexPath) as! TrendTableViewCell
            
            cell.shoppingListLabel.text = list[indexPath.row]
            cell.shoppingListLabel.font = .systemFont(ofSize: 18)
            
            return cell
            
        }

    }
    
    override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
        return true
    }
    
    override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            list.remove(at: indexPath.row)
            tableView.reloadData()
        }
    }
    
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.section == 0 {
            return 70
        } else {
            return 40
        }
    }
}

class TrendTableViewCell: UITableViewCell {

    @IBOutlet weak var checkboxButton: UIButton! {
        didSet{
            checkboxButton.setImage(UIImage(systemName: "square"), for: .normal)
            checkboxButton.setImage(UIImage(systemName: "checkmark.square"), for: .selected)
        }
    }
    
    
    @IBOutlet weak var favouriteButton: UIButton! {
        didSet{
            favouriteButton.setImage(UIImage(systemName: "star"), for: .normal)
            favouriteButton.setImage(UIImage(systemName: "star.fill"), for: .selected)
        }
    }
    
    
    @IBOutlet weak var shoppingListLabel: UILabel!
    
    
    @IBAction func checkboxButtonTapped(_ sender: UIButton) {
        sender.checkboxAnimation {
            print("I'm done")
            //here you can also track the Checked, UnChecked state with sender.isSelected
            print(sender.isSelected)
        }
    }
    
    @IBAction func favouriteButtonTapped(_ sender: UIButton) {
        sender.checkboxAnimation {
            print("I'm done")
            //here you can also track the Checked, UnChecked state with sender.isSelected
            print(sender.isSelected)
        }
    }
}

class TextFieldTableViewCell: UITableViewCell {
    
    @IBOutlet weak var shoppingTextField: UITextField!
    
    @IBOutlet weak var addButton: UIButton!
    
    var actionBlock: (() -> Void)? = nil
    
    @IBAction func shoppingTextFieldFilled(_ sender: UITextField) {
        actionBlock?()

    }

    @IBAction func addButtonTapped(_ sender: UIButton) {
        actionBlock?()
    }
}

• 그리고 테이블 뷰 셀을 두 개 활용하여 추가버튼 부분과 목록 부분을 나누어서 구현하였습니다.
• 하지만 첫번째 셀에서 액션을 활용할 때가 좀 어려웠습니다. 이를 해결하기 위해 버튼을 누르면 함수를 실행하도록 테이블 뷰 셀에서 구현하고 테이블 뷰 컨트롤러에서 CellForRowAt 메서드 내에서 클로저를 통해 액션을 구현하였습니다. 

---

4. 자료 출처

구글 검색어: Reloaddata swift -> https://developer.apple.com/documentation/uikit/uitableview/1614862-reloaddata