使用Swift開發一個貝樂虎啓蒙App - 首頁（二）

這是我參與8月更文挑戰的第6天，活動詳情查看：8月更文挑戰api

前言

上一篇咱們把首頁的導航欄、banner以及圓弧背景處理好了，這篇咱們就開始處理接口數據markdown

請求數據

前面封裝網絡請求的時候已經把首頁的接口寫好了，不過如今請求參數要加age，能夠根據年齡來獲取數據網絡

extension Network {

    enum Home {
        case list(path: String, age: Int)
    }
}
複製代碼

在RecViewController裏面定義一個枚舉，path是請求接口對應的不一樣部分ide

enum RecFrom {
    case rec /// 推薦
    case song /// 唱兒歌
    case animation // 看動畫
    case book /// 讀繪本
    case story /// 聽故事

    var path: String {
        switch self {
        case .rec:
            return "tj3"
        case .song:
            return "eg3"
        case .animation:
            return "dh3"
        case .book:
            return "hb3"
        case .story:
            return "gs3"
        }
    }
}
複製代碼

數據請求post

private func requestData() {
    Network.Home
        .list(path: from.path, age: 1)
        .request()
        .responseData(RecModel.self) { (model) in

    } failure: { (error) in
        Toast.show(info: error.errorMessage)
    }
}
複製代碼

上下拉刷新咱們使用MJRefresh動畫

let header = MJRefreshNormalHeader(refreshingBlock: { [weak self] in
    guard let `self` = self else { return }
    self.requestData()
})
header.lastUpdatedTimeLabel?.isHidden = true
header.stateLabel?.isHidden = true
collectionView.mj_header = header
collectionView.mj_header?.beginRefreshing()
複製代碼

有沒有感受若是每一個地方都這樣寫會有點噁心，並且每次都要import MJRefresh。無論是UICollectionView仍是UITableView，都是繼承UIScrollView，因此咱們給UIScrollView來個extension來達到儘量的簡便spa

extension UIScrollView {

    func mj_headerRefresh(_ handler: @escaping () -> Void) {
        let headerRefresh = MJRefreshNormalHeader()
        headerRefresh.lastUpdatedTimeLabel?.isHidden = true
        headerRefresh.stateLabel?.isHidden = true
        headerRefresh.refreshingBlock = hander
        mj_header = headerRefresh
    }

    func mj_footerRefresh(_ handler: @escaping () -> Void) {
        let footerRefresh = MJRefreshBackStateFooter()
        footerRefresh.refreshingBlock = hander
        mj_footer = footerRefresh
    }

    func beginRefreshing() {
        mj_header?.beginRefreshing()
    }

    func endHeaderRefresh() {
        if let mjHeader = mj_header, mjHeader.isRefreshing {
            mj_header?.endRefreshing()
        }
    }

    func endFooterRefresh() {
        if let mjFooter = mj_footer, mjFooter.isRefreshing {
            mj_footer?.endRefreshing()
        }
    }

    var isHeaderRefresh: Bool {
        if let mjHeader = mj_header {
            return mjHeader.isRefreshing
        }
        return false
    }

    var isFooterRefresh: Bool {
        if let mjFooter = mj_footer {
            return mjFooter.isRefreshing
        }
        return false
    }
}
複製代碼

在RecViewController這樣使用就能夠了，是否是簡便了不少code

collectionView.mj_headerRefresh { [weak self] in
    guard let `self` = self else { return }
    self.requestData()
}
collectionView.beginRefreshing()
複製代碼

接下來分別獲取推薦、唱兒歌、看動、讀繪本、聽故事的數據。top_items就是banner的數據。能夠看出有top_items就會有banner。orm

因此我這邊的作法是：UICollectionView的組數等於more_items.count+2，top_items是一組和icon_items一組，因此是+2繼承

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return dataSource.count + 2
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    /// banner
    if section == 0 {
        return 1
    }
    /// banner下面的5個icon
    if section == 1 {
        return 1
    }
    /// 其餘的cell
    switch dataSource[section - 2].layoutType {
    case .slide:
        return 1
    default:
        return dataSource[section - 2].viewP.itemCount
    }
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    switch indexPath.section {
    case 0: /// banner
        let cell = collectionView.dequeueReusableCell(withClass: RecBannerCell.self, for: indexPath)
        cell.banners = banners
        return cell
    case 1: /// banner下面的5個icon
        let cell = collectionView.dequeueReusableCell(withClass: RecHeaderItemCell.self, for: indexPath)
        cell.items = items
        return cell
    default:
        let model = dataSource[indexPath.section - 2]
        switch model.layoutType {
        case .big:
            let cell = collectionView.dequeueReusableCell(withClass: RecCell.self, for: indexPath)
            cell.update(big: model.data.items[indexPath.item])
            return cell
        case .big_list:
            let cell = collectionView.dequeueReusableCell(withClass: RecBigListCell.self, for: indexPath)
            cell.update(model.data.items[indexPath.item])
            return cell
        case .slide:
            let cell = collectionView.dequeueReusableCell(withClass: RecSlideCell.self, for: indexPath)
            cell.items = model.data.items.prefix(model.viewP.itemCount).map({ $0
            })
            return cell
        case .book:
            let cell = collectionView.dequeueReusableCell(withClass: RecBigListCell.self, for: indexPath)
            cell.update(slide: model.data.items[indexPath.item])
            return cell
        case .store:
            let cell = collectionView.dequeueReusableCell(withClass: RecStoreCell.self, for: indexPath)
            cell.update(model.data.items[indexPath.item])
            return cell
        case .store_list:
            let cell = collectionView.dequeueReusableCell(withClass: RecStoreListCell.self, for: indexPath)
            cell.update(model.data.items[indexPath.item])
            return cell
        case .hot:
            let cell = collectionView.dequeueReusableCell(withClass: RecCell.self, for: indexPath)
            cell.update(hot: model.data.items[indexPath.item])
            return cell
        default:
            let cell = collectionView.dequeueReusableCell(withClass: RecCell.self, for: indexPath)
            cell.update(model.data.items[indexPath.item])
            return cell
        }
    }
}
複製代碼

首頁基本上就結束了，下面看下成果：