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

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

前言

上一篇文章咱們自定義了UITabBar，把基本的框架搭起來了，這篇咱們就開始作首頁。如今咱們就把所須要的三方庫用CocoaPods導進來

Alamofire，網絡請求庫
SnapKit，佈局控件
MJRefresh，刷新控件
FSPagerView，輪播控件
Kingfisher，圖片加載控件
Toast-Swift，彈窗控件
JXCategoryView，分類切換滾動視圖

分析頁面

一、導航欄，此處的背景是一個圖片，咱們從資源庫找到放上去就行了，而後自定義一個左邊的view
二、導航欄下面的推薦、唱兒歌、看動畫、讀繪本、聽故事是一個分類切換滾動視圖，這裏咱們使用oc版的 JXCategoryView，這個比較好用。觀察發現，推薦、唱兒歌、看動畫、讀繪本、聽故事這五個分類所用的cell都差很少，並且接口請求的數據結構相同，因此五個分類創建一個RecViewController控制器就行了，而後在RecViewController裏面定義一個枚舉，用來區分推薦、唱兒歌、看動畫、讀繪本、聽故事。裏面的內容的話就用UICollectionView

下面是HomeViewController裏面的代碼

import JXCategoryView

class HomeViewController: BaseViewController {

    private var controllers = [RecViewController]()
    private let titles = ["推薦", "唱兒歌", "看動畫", "讀繪本", "聽故事"]

    private lazy var navLeftView: HomeNavView = {
        let view = HomeNavView()
        return view
    }()

    private lazy var titleView: JXCategoryNumberView = {
        let lineView = JXCategoryIndicatorLineView()
        lineView.indicatorColor = .titleColor
        lineView.indicatorHeight = 4
        let titleView = JXCategoryNumberView()
        titleView.defaultSelectedIndex = 0
        titleView.delegate = self
        titleView.indicators = [lineView]
        titleView.titles = titles
        titleView.titleColor = .titleColor
        titleView.titleSelectedColor = .titleColor
        titleView.titleFont = 14.boldFont
        titleView.titleSelectedFont = 18.boldFont
        titleView.isTitleColorGradientEnabled = true
        titleView.backgroundColor = .yellowColor
        titleView.isAverageCellSpacingEnabled = true
        titleView.cellSpacing = 0
        return titleView
    }()
    
    private lazy var listContainerView: JXCategoryListContainerView = {
        let listContainerView = JXCategoryListContainerView(type: .scrollView, delegate: self)
        listContainerView?.setDefaultSelectedIndex(0)
        return listContainerView!
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
       
        setupNav()
        addSubviews()
        configVC()
    }

    private func setupNav() {
        navigation.bar.setBackgroundImage("nav_bg_all_88".image, for: .default)
        navigation.item.leftBarButtonItem = UIBarButtonItem(customView: navLeftView)
    }

    private func addSubviews() {
        automaticallyAdjustsScrollViewInsets = false
        view.addSubview(titleView)
        view.addSubview(listContainerView)

        titleView.snp.makeConstraints { (make) in
            make.left.right.equalToSuperview()
            make.top.equalTo(topLayoutGuideBottom)
            make.height.equalTo(40.fit)
        }

        listContainerView.snp.makeConstraints { make in
            make.left.right.equalToSuperview()
            make.top.equalTo(titleView.snp.bottom)
            make.bottom.equalTo(safeAreaLayoutGuideBottom)
        }
        
        titleView.contentScrollView = listContainerView.scrollView
    }

    private func configVC() {
        let rec = RecViewController(from: .rec)
        let song = RecViewController(from: .song)
        let animation = RecViewController(from: .animation)
        let book = RecViewController(from: .book)
        let story = RecViewController(from: .story)
        controllers = [rec, song, animation, book, story]
    }
}

// MARK: JXCategoryViewDelegate
extension HomeViewController: JXCategoryViewDelegate {

    func categoryView(_ categoryView: JXCategoryBaseView!, didClickSelectedItemAt index: Int) {
        listContainerView.didClickSelectedItem(at: index)
    }
}

// MARK: JXCategoryListContainerViewDelegate
extension HomeViewController: JXCategoryListContainerViewDelegate {
    
    func number(ofListsInlistContainerView listContainerView: JXCategoryListContainerView!) -> Int {
        return titles.count
    }

    func listContainerView(_ listContainerView: JXCategoryListContainerView!, initListFor index: Int) -> JXCategoryListContentViewDelegate! {
        return controllers[index]
    }
}
複製代碼

三、接着就是banner後面的圓弧背景，只有推薦、唱兒歌、聽故事有banner，看動畫、讀繪本是沒有的，因此這個圓弧背景仍是放在banner裏面比較好。找到圓弧背景圖片放到工程的Assets裏面，選中改圖片，點擊右下角的Show Slicing，而後對其上下左右拉伸處理

4.一、新建一個RecBannerCell繼承UICollectionViewCell，增長一個bgImageView，由於下拉的時候圓弧背景會放大，因此其高度設置足夠大

private lazy var bgImageView: UIImageView = {
    let view = UIImageView()
    view.image = "banner_bg_yellow".image
    view.isHidden = true
    return view
}()

bgImageView.snp.makeConstraints { (make) in
    make.top.equalToSuperview().offset(-1000)
    make.left.equalToSuperview().offset(-space)
    make.right.equalToSuperview().offset(space)
    make.height.equalTo(1130)
}
複製代碼

4.二、接着再import FSPagerView，新增pagerView和pageControl

private lazy var pagerView: FSPagerView = {
    let pagerView = FSPagerView()
    pagerView.dataSource = self
    pagerView.delegate = self
    pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "FSPagerViewCell")
    pagerView.isInfinite = true
    pagerView.scrollDirection = .horizontal
    pagerView.removesInfiniteLoopForSingleItem = true
    pagerView.automaticSlidingInterval = 5
    pagerView.backgroundColor = .clear
    pagerView.corner(radii: 8.fit)
    return pagerView
}()

private lazy var pageControl: FSPageControl = {
    let pageControl = FSPageControl()
    pageControl.hidesForSinglePage = true
    pageControl.contentHorizontalAlignment = .center
    pageControl.setFillColor(.white, for: .selected)
    pageControl.setFillColor(UIColor.c999999, for: .normal)
    pageControl.currentPage = 0
    pageControl.interitemSpacing = 12
    pageControl.backgroundColor = .clear
    return pageControl
}()

extension RecBannerCell: FSPagerViewDataSource {
    /// 設置banner數量
    public func numberOfItems(in pagerView: FSPagerView) -> Int {
        return banners.count
    }

    /// 設置數據，跟UITableView同樣使用
    public func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "FSPagerViewCell", at: index)
        cell.backgroundColor = .clear
        return cell
    }
}

extension RecBannerCell: FSPagerViewDelegate {
    /// pagerView和pageControl聯動起來
    public func pagerViewDidScroll(_ pagerView: FSPagerView) {
        pageControl.currentPage = pagerView.currentIndex
    }

    /// 點擊banner事件
    public func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int) {
        pagerView.deselectItem(at: index, animated: false)
    }
}
複製代碼

輪播圖以及後面的圓弧背景已經處理好，下面都是一些常規的cell，這裏就不展現具體寫法了，下一篇咱們就開始處理首頁的數據