#26 實作 Table View | 模仿AppStore

實作表格的基本功能和定義 UITableViewDataSource 的相關 function

這次作業模仿了AppStore的畫面，來練習Table View的應用~

⬇️ 成品預覽

✏️ 使用到的功能

1. TableViewController
2. Scroll View
3. SegmentController，搭配switch-case及reloadData

✏️ 程式說明

1. 先在Main.storyboard把畫面上所需的資訊先設計出來
   ➡️ 以AppStore中的App主頁面為主，以及大家都在用與免費App排行的次頁面，三個畫面皆使用TableViewController設計
   ➡️ App主頁面使用Static Cells，大家都在用與免費App排行則使用Dynamic Prototypes
   ➡️ 點選顯示全部的按鈕，進入下一頁

2. 準備要顯示的資料
先開一個新的file，將變數名稱寫在struct裡，再把資訊填入assay中

利用for-in迴圈將assay中的資訊一一帶入設計好的畫面中，可在這邊同步設定文字大小及顏色等
下方程式碼為最頂端的畫面，範例共有三個畫面

func setupTopPage(){
        for i in 0...2{
            nameLable[i].text = topAppInfo[i].name
            nameLable[i].font = nameLable[i].font.withSize(26)
            
            infoLable[i].text = topAppInfo[i].info
            infoLable[i].textColor = .gray
            infoLable[i].font = infoLable[i].font.withSize(20)
            
            picImage[i].image = UIImage(named: topAppInfo[i].picName)
        }
    }

3. cell中的元件拉好IBOulet

4. 定義 Table view data source的相關內容

以下為 次頁面-大家都在用 的程式碼

• 這次畫面只使用1個Section，故 numberOfSection回傳1即可
• numberOfRowsInSection 利用.count，讀取array中的數量
• cellForRowAt，利用guard let 讀取tableView的內容，並用 as? 將tableView轉型為tableViewCell後，將內容存入cell

 override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return showMultiUseApp.count
    }

    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "\(multiUseTableViewCell.self)", for: indexPath) as? multiUseTableViewCell
        else{
            fatalError("dequeueReusableCell multiUseTableViewCell failed")
        }
                
        let multiUse = showMultiUseApp[indexPath.row]
        cell.appNameLable.text = multiUse.name
        cell.appNameLable.font.withSize(30)
        
        cell.classInfoLable.text = multiUse.classInfo
        cell.classInfoLable.textColor = .gray
        cell.classInfoLable.font.withSize(15)
        
        cell.iconImageView.image = UIImage(named: multiUse.picName)

        cell.getBtn.setTitle("取得", for: .normal)
        cell.getBtn.layer.cornerRadius = 18
        cell.getBtn.backgroundColor = UIColor(cgColor: CGColor(red: 178/255, green: 179/255, blue: 181/255, alpha: 0.4))

        return cell
    }

• dequeueReusableCell 傳入 cell reuse id的方法有很多種，如上方為使用 string interpolation ” \(multiUseTableViewCell.self) ”，另一頁練習另一種方法使用extension，先在新的file中寫好extension，後續帶入就不怕打字錯誤囉！

extension UITableViewCell {
    static var reuseIdentifier: String { "\(Self.self)" }
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let freeApp = freeRanks[indexPath.row]
        let paidApp = paidRanks[indexPath.row]
        
        switch rankSegmentControl.selectedSegmentIndex {
        case 0:
            let cell = tableView.dequeueReusableCell(withIdentifier: RankAppTableViewCell.reuseIdentifier, for: indexPath) as! RankAppTableViewCell
            cell.rankImageView.image = UIImage(named: freeApp.picName)
            cell.rankTitleLable.text = freeApp.name
            cell.rankTitleLable.font = cell.rankTitleLable.font.withSize(20)
            cell.rankSubtitleLable.text = freeApp.classInfo
            cell.rankSubtitleLable.font = cell.rankSubtitleLable.font.withSize(15)
            cell.rankSubtitleLable.textColor = .gray
            cell.rankBtn.setTitle("取得", for: .normal)
            cell.rankBtn.backgroundColor = UIColor(cgColor: CGColor(red: 178/255, green: 179/255, blue: 181/255, alpha: 0.4))
            cell.rankBtn.layer.cornerRadius = 18
            
            return cell
            
        case 1:
            let cell = tableView.dequeueReusableCell(withIdentifier: RankAppTableViewCell.reuseIdentifier, for: indexPath) as! RankAppTableViewCell
            cell.rankImageView.image = UIImage(named: paidApp.picName)
            cell.rankTitleLable.text = paidApp.name
            cell.rankTitleLable.font = cell.rankTitleLable.font.withSize(20)
            cell.rankSubtitleLable.text = paidApp.classInfo
            cell.rankSubtitleLable.font = cell.rankSubtitleLable.font.withSize(15)
            cell.rankSubtitleLable.textColor = .gray
    
            return cell
            
        default:
            return UITableViewCell()
        }

5. 程式啟動後，發現兩條不透明的線條，上下都有，要記得調整這個地方，將header/footer的estimate 設定為0，就可以拿掉了

🔆 GitHub

GitHub - shelleyhsieh/imitateAppSrote

📝 參考來源

#51 實作 Table View 的基本功能

iOS 15 的 Static Cells 的 section header / footer 顯示問題