前言
上一篇文章我们自定义了UITabBar，把基本的框架搭起来了，这篇我们就开始做首页。现在我们就把所需要的三方库用CocoaPods导进来
Alamofire，网络请求库
SnapKit，布局控件
MJRefresh，刷新控件
FSPagerView，轮播控件
Kingfisher，图片加载控件
Toast-Swift，弹窗控件
JXCategoryView，分类切换滚动视图
分析页面
1、导航栏，此处的背景是一个图片，我们从资源库找到放上去就好了，然后自定义一个左边的
view
2、导航栏下面的推荐、唱儿歌、看动画、读绘本、听故事是一个分类切换滚动视图，这里我们使用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]
}
}
3、接着就是banner后面的圆弧背景，只有
推荐、唱儿歌、听故事有banner，看动画、读绘本是没有的，所以这个圆弧背景还是放在banner里面比较好。找到圆弧背景图片放到工程的Assets里面，选中改图片，点击右下角的Show Slicing，然后对其上下左右拉伸处理
4.1、新建一个
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.2、接着再
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，这里就不展示具体写法了，下一篇我们就开始处理首页的数据
