新建View文件
image.png
继承UICollectionView
image.png
0.为类新建相应测View文件
image.png
image.png
关联控制器和View
image.png
size设置为Freeform 可以自由调整大小
image.png
设置高度为90
image.png
为了能看到这个view，给view设置一个背景颜色
image.png
1.快速创建类方法 && 设置不跟随父控件的拉伸而拉伸
import UIKit
class RecommentGroupView: UIView {
override func awakeFromNib() {
super.awakeFromNib()
// 让控件不随着父控件的拉伸而拉伸
autoresizingMask = UIViewAutoresizing()
}
}
extension RecommentGroupView{
//提供快速创建类方法
class func recommentGroupView() -> RecommentGroupView{
return Bundle.main.loadNibNamed("RecommentGroupView", owner: nil, options: nil)?.first as! RecommentGroupView
}
}
image.png
2.到对应的控制器中，通过闭包懒加载之前定义的这个View
//懒加载需要创建的View,通过闭包的方式
lazy var groupView:RecommentGroupView = {
//MARK:通过类方法来创建View
let groupView = RecommentGroupView.recommentGroupView()
// groupView.frame =
return groupView
}()
image.png
3.到设置UI方法中将groupView添加到collectionView中
修改前
image.png
修改后
image.png
4.先定义一个groupView 的高度。
在collectionView 添加的groupView后还不能显示，因为还没有设置frame以及调整之前的cycleView 的Y值
//定义 RecommentGroupView的高度
private let kGroupViewH : CGFloat = 90
image.png
5.调整之前轮播的frame的Y值，Y变为 两个容器的高度之和
由原来的
cycleView.frame = CGRect(x: 0, y: - kCycleViewH , width: kScreenW , height: kCycleViewH)
改为：
cycleView.frame = CGRect(x: 0, y: -(kCycleViewH + kGroupViewH), width: kScreenW , height: kCycleViewH)
image.png
6.设置collectionViewron容器偏移量的时候，加上groupView的高度
由原来的：
//4.设置collectionView的内边距
collectionView.contentInset = UIEdgeInsets(top: kCycleViewH , left: 0, bottom: 0, right: 0)
变为：
//4.设置collectionView的内边距
collectionView.contentInset = UIEdgeInsets(top: kCycleViewH + kGroupViewH, left: 0, bottom: 0, right: 0)
image.png
7.设置groupView的Frame
groupView.frame = CGRect(x: 0, y: -kGroupViewH, width: kScreenW, height: kGroupViewH)
运行查看效果：
image.png
8. 给添加好的View 拖入CollectionView控件进行布局
image.png
给推入的CollectionView设置约束
image.png
9.设置collectionView的数据源为自己
image.png
设置后为：
image.png
10.将XIB中的collectionView定义一个collectionView属性
image.png
11.注册Cell
声明一个常量
private let kGroupCellID = "kGroupCellID"
注册Cell
//注册cell
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: kGroupCellID)
12.代码遵守数据源协议
// MARK 遵守Collection数据源协议
extension RecommentGroupView:UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 8
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGroupCellID, for: indexPath)
// MARK :为了能显示Cell，如果是奇数显示蓝色，偶数显示红色
cell.backgroundColor = indexPath.item % 2 == 0 ? UIColor.red : UIColor.blue
return cell
}
}
image.png
运行查看效果：
滚动方向和cell大小不对
image.png
13.设置cell的滚动方式，从上下滚动改为左右滚动
image.png
设置间距为0
image.png
image.png
继续调整：高度和宽度
image.png
隐藏滚动条
image.png
运行查看效果：
image.png
马哥27
14.将之前分组的数据展示到cell中
var groups : [GoodGroupModel]?
image.png
15.回到对应的Controller中将之前请求到的数据传递给groupView
//加载数据源
extension RecommendViewController {
fileprivate func loadData(){
//1.请求推荐数据
recommendVM.requestData {
self.collectionView.reloadData()
}
//2.将数据传递给groupView
self.groupView.groups = self.recommendVM.goodGroup
//2.请求轮播数据
recommendVM.requestCycleData {
self.cycleView.cycleModels = self.recommendVM.cycleModels
}
}
}
image.png
按住Command + self.groupView.groups 中的groups 看是否能跳转到14的定义
16.回到14步的定义，修改为监听数据的改变让collectionView进行重新加载数据
修改前
var groups : [GoodGroupModel]?
修改后
var groups : [GoodGroupModel]? {
didSet{
collectionView.reloadData()
}
image.png
17 ，修改返回值，和动态cell内容
修改前
// MARK 遵守Collection数据源协议
extension RecommentGroupView : UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 6
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGroupCellID, for: indexPath)
cell.backgroundColor = indexPath.item % 2 == 0 ? UIColor.blue : UIColor.red
return cell
}
}
修改后
// MARK 遵守Collection数据源协议
extension RecommentGroupView : UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return groups?.count ?? 0
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGroupCellID, for: indexPath)
let group = groups![indexPath.item]
cell.backgroundColor = indexPath.item % 2 == 0 ? UIColor.blue : UIColor.red
return cell
}
}
image.png
这时候请求的值已经存储在group中，下一步就是要解析这里值，并进行展现
18 自定义view来展现请求的值，新建View
选择view
image.png
继承之UICollectionCell 并勾选创建XIB文件
image.png
19 修改第12步通过XIB来注册
修改前
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: kGroupCellID)
修改后
//注册cell，修改位XIB注册
collectionView.register(UINib(nibName: "CollectionGroupCell", bundle: nil), forCellWithReuseIdentifier: kGroupCellID)
image.png
20. 对第12步，对之前的cell 进行强转
image.png
21.到自定义View中，定义模型属性
image.png
修改前：
let group = groups![indexPath.item]
修改cell的赋值，修改后
cell.group = groups![indexPath.item]
image.png
22 修改XIB自定义view来显示请求到的数值
设置之前cell 定义的高宽
image.png
拖入一个lable进行颜色和约束定位
image.png
给文字设置约束1
image.png
设置约束2
image.png
