OC - 31.通过封装的自定义布局快速实现商品展示
2024-08-28 15:36:07
概述
实现效果
设计思路
- 采用MVC架构,即模型—视图-控制器架构
- 使用MJExtension框架实现字典转模型
使用MJRefresh框架实现上拉和下拉刷新
- 上拉刷新,加载新的数据
- 下拉刷新,加载更多的数据
使用SDWebImage框架加载图片
模型
商品模型需要包含以下属性
/**商品控件宽度*/
@property (nonatomic, assign) CGFloat w;
/**商品控件高度*/
@property (nonatomic, assign) CGFloat h;
/**商品图片*/
@property (nonatomic, copy) NSString *img;
/**商品价格*/
@property (nonatomic, copy) NSString *price;
视图
通过xib来实现自定义cell(继承自UICollectionViewCell),xib的结构如图
视图的代码实现
包含商品模型属性
/**商品模型*/
@property (nonatomic, strong) LYPShop *shop;引用xib中的控件
//展示商品图片
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
//显示商品价格
@property (weak, nonatomic) IBOutlet UILabel *priceLabel;重写商品模型的setter,使xib中的控件显示乡音的内容
- (void)setShop:(LYPShop *)shop
{
_shop = shop; //使用SDWebImage设置商品图片
[self.imageView sd_setImageWithURL:[NSURL URLWithString:shop.img] placeholderImage:[UIImage imageNamed:@"loading"]];
//设置商品价格
self.priceLabel.text = shop.price;
}
控制器
创建展示商品的容器,即UICollectionView对象,并初始化
- (void)setupCollectionView
{
//通过封装的自定义布局,创建布局
LYPWaterFlowLayout *layout = [[LYPWaterFlowLayout alloc] init]; //设置layout的代理
layout.delegate = self; //创建collectionView
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
self.collectionView = collectionView; //设置数据源
collectionView.dataSource = self;
//将collectionView添加到控制器的view中
[self.view addSubview:collectionView];
}注册通过xib自定义的cell
/**设置cell的重用标示*/
static NSString *const LYPShopID = @"shop";
- (void)registerCell
{
//注册cell
[self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([LYPShopCell class]) bundle:nil] forCellWithReuseIdentifier:LYPShopID];
}设置商品模型数组
添加成员属性
/**所有的商品模型数组*/
@property (nonatomic, strong) NSMutableArray *shops;通过懒加载的方式,初始化模型数组
- (NSMutableArray *)shops
{
if (_shops == nil)
{
_shops = [NSMutableArray array];
}
return _shops;
}
实现刷新功能
刷新的业务逻辑,如图
设置上拉刷新和下拉刷新控件
- (void)setupRefresh
{
//下拉刷新控件
self.collectionView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewShops)];
//view加载完毕,开始下拉刷新
[self.collectionView.header beginRefreshing]; //上拉刷新控件
self.collectionView.footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreShops)];
//一开始隐藏footer
self.collectionView.footer.hidden = YES;
}实现加载数据功能
/**下拉刷新*/
- (void)loadNewShops
{
//通过该函数模拟网络延迟
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ //将字典转成模型
NSArray *shops = [LYPShop objectArrayWithFilename:@"1.plist"]; //清空之前所有的商品模型信息
[self.shops removeAllObjects];
//将最新的商品模型信息添加到模型数组中
[self.shops addObjectsFromArray:shops]; //刷新数据
[self.collectionView reloadData];
//结束刷新
[self.collectionView.header endRefreshing];
});
}
/**上拉刷新*/
- (void)loadMoreShops
{
//通过该函数模拟网络延迟
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
//通过该函数模拟网络延迟
NSArray *shops = [LYPShop objectArrayWithFilename:@"1.plist"];
//将新加载的商品模型信息添加到模型数组中
[self.shops addObjectsFromArray:shops]; //刷新数据
[self.collectionView reloadData];
//结束刷新
[self.collectionView.footer endRefreshing];
});
}
设置collectionView的数据源
- 遵守协议UICollectionViewDataSource
设置cell的个数
- (NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
//设置上拉刷新控件的状态,无商品时不显示
self.collectionView.footer.hidden = self.shops.count == 0;
//返回cell的个数
return self.shops.count;
}创建indexPath位置的cell
- (UICollectionViewCell *)collectionView:(nonnull UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
//通过重用标示从缓存池中取,若取不到,则自动创建
LYPShopCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:LYPShopID forIndexPath:indexPath]; //给视图cell的模型赋值,使其设置cell中控件的显示内容
cell.shop = self.shops[indexPath.item]; return cell;
}
实现layout的代理方法,定制布局
设置每个cell的高度
- (CGFloat)waterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout heightForItemAtIndex:(NSInteger)index itemWith:(CGFloat)itemWith
{
LYPShop *shop = self.shops[index];
//通过比例计算cell的高度
return itemWith * shop.h / shop.w;
}设置列数
- (NSInteger)columnCountInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
{
return 2;
}设置行间距
- (CGFloat)rowMarginInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
{
return 20;
}设置列间距
- (CGFloat)columnMarginInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
{
return 40;
}设置内边距
- (UIEdgeInsets)edgeInsetsInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
{
return UIEdgeInsetsMake(20, 10, 10, 30);
}
改变布局
可以简单地通过改变返回列数的代理方法,来改变布局
- (NSInteger)columnCountInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
{
//返回3列
return 3;
}效果如图
最新文章
- WebService -- Java 实现之 CXF ( 使用:Spring+CXF+Tomcat发布webService)
- MemSQL分布式架构介绍(一)
- eclipse maven新建springMVC项目(原创)
- 在winform中添加普通右键菜单
- 关于hive的存储格式
- 怎么用CorelDRAW插入、删除与重命名页面
- HDU 4407 Sum 容斥原理
- ScriptTransformer
- CMD获取当前目录的绝对路径
- Flask01 路由控制(转换器)、反转、请求方法控制
- shopxx------list列表回显修改尝试
- ubuntu14.04 python2.7 安装配置OpenCV3.0
- List Leave
- Laravel 5.6: Specified key was too long error
- HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法
- composer修改成国内镜像
- File not found 错误 nginx
- [Canvas]RPG游戏雏形 (地图加载,英雄出现并移动)
- 深度学习-Caffe编译测试的小总结
- poll 从应用层到内核实现解析
热门文章
- Android中的音频处理------SoundPool,MediaRecorder,MediaPlayer以及RingStone总结
- Android 用代码来实现selector
- Selenium 处理模态对话框
- [IoLanguage]Io Programming Guide[转]
- Git error: hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused b
- mysql 引擎区分
- select、poll、epoll三组IO复用
- 【Lucene3.6.2入门系列】第15节_SolrJ高亮
- 使用JavaScript扫描端口
- java 打包插件