3주차_issue

[leewoojye]

⭐️ 3주차 과제 핵심 포인트 ⭐️

• 기능 구현을 위해 2주차때 사용했던 StackView를 TableView, CollectionView를 이용하여 구현하기
• 날씨상세보기 뷰에 주별 날씨를 보여주는 박스 추가하기

🔨 구현 방안 개요 🔨

• 화면전환은 네비게이션 뷰컨트롤러와 delegate 패턴을 이용한 점은 2주차와 동일하다.
• 첫 번째 화면에서는 TableView 하나만 있는 구조이며, 두 번째 화면은 ScrollView위에 차례대로 CollectionView와 TableView가 나란히 배치된 구조이다.
• 두 번째 뷰컨트롤러의 하단바를 스크롤시에도 유지하기 위해 아래의 코드를 사용하였다.

self.view.bringSubviewToFront(bottomview)

📍 핵심 코드 설명 📍

ViewController.swift

    private func setTableViewConfig() {
        self.tableView.register(ItemListTableViewCell.self,
                                forCellReuseIdentifier: ItemListTableViewCell.identifier)
        self.tableView.delegate = self
        self.tableView.dataSource = self
        self.tableView.rowHeight = 117
        self.tableView.separatorStyle = .none
    }

• 테이블뷰를 사용하기 위해 UITableViewDelegate, UITableViewDataSource 프로토콜을 뷰컨트롤러가 각각 채택하게 했으며, 위 코드를 통해 테이블뷰를 상세하게 설정해 주었다. 테이블뷰 내의 각 '셀' 높이의 경우 setLayout()이 아닌 위 코드에서 미리 설정해주었다.

extension ViewController: UITableViewDelegate {
    // 이거 왜 작동안해...
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 10 // 셀 간의 간격을 설정합니다.
    }

• 셀 간 간격을 주기 위해 해당 확장형에 위와 같은 함수를 추가했는데 잘 먹히진 않았다..

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemListData.count 
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: ItemListTableViewCell.identifier,
                                                       for: indexPath) as? ItemListTableViewCell else {return UITableViewCell()}
        cell.delegate = self
        cell.bindData(data: itemListData[indexPath.row])
        
        return cell
    }
}

• 테이블뷰의 각 셀에 데이터를 할당해 주기 위한 코드이다. 첫 함수는 데이터쌍의 개수를 반환하고, 두 번째 함수는 이를 바탕으로 테이블뷰셀을 반환한다. 데이터를 할당, 즉 바인딩해줄 때 화면전환을 위한 delegate 변수도 설정해 주었다.

SecondViewController.swift

extension SecondViewController: UICollectionViewDelegate {}
extension SecondViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageCollectionList.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let item = collectionView.dequeueReusableCell(withReuseIdentifier: ImageCollectionViewCell.identifier,
                                                            for: indexPath) as? ImageCollectionViewCell else {return UICollectionViewCell()}
        item.bindData(data: imageCollectionList[indexPath.row])
        return item
    }
}
extension SecondViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 3
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 3
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: (self.box.bounds.width)/5, height: self.contentview.bounds.height)
    }
}

• 두 번째 뷰컨트롤러에서는 테이블뷰, 컬렉션뷰를 모두 사용했다. 이 중 컬렉션뷰는 시간대별 날씨를 나타내기 위해 사용했다. 또 return CGSize(width: (self.box.bounds.width)/5, height: self.contentview.bounds.height) 부분은 사용자에게 5개의 시간대만큼 날씨를 한번에 보여주기 위해 컬렉션뷰의 가로길이를 지정해준 것이다.