UICollectionView用法补充(照片轮播墙)
来源:互联网 发布:java整形转化为字符串 编辑:程序博客网 时间:2024/06/10 20:18
一 总体功能图和实现思路
1 完整的功能图:
2 实现功思路:
1> 流水布局(实现UICollectionView必须要的条件)
2> 自定义cell(实现UICollectionView必须要的条件)
3> 自定义流水布局
4> 如果想冲缓存池中取,那么必须采用注册的方法
5> 照片缩放
6> 照片移动后自动定位功能
7> 一种新的封装思路
二 流水布局
1 包括以下部分:
—> 1> cell的大小
—> 2> 滚动方向
—> 3> 实现照片墙的额外滚动区域
—> 4> 每个cell之间的距离
2 以下是未封装的代码:
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; //最小水平距离 layout.minimumInteritemSpacing = XFJ_space; //每一个cell的大小 layout.itemSize = CGSizeMake(XFJ_sizeXY, XFJ_sizeXY); //设置额外的滚动数 CGFloat margin = (XFJ_screenW - XFJ_sizeXY) * 0.5; ////左边和右边空出来的额外滚动区域 layout.sectionInset = UIEdgeInsetsMake(XFJ_zero, margin, XFJ_zero, margin); //设置滚动方向(水平) layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
三 UICollectionView对象创建与相关设置
1 包括以下部分:
—> 1> UICollectionView对象的尺寸,位置
—> 2> 背景颜色
—> 3> 设置代理
2 以下是未封装的代码:
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; //bounds collectionView.bounds = CGRectMake(XFJ_zero, XFJ_zero, self.view.bounds.size.width, 200); //center collectionView.center = self.view.center; //隐藏底部的滚动条 collectionView.showsHorizontalScrollIndicator = NO; //设置背景颜色 collectionView.backgroundColor = [UIColor brownColor]; //添加到控制器的view中 [self.view addSubview:collectionView]; //设置代理 collectionView.dataSource = self;
四 数据源方法
1 包括以下部分:
—> 1> 总共几组
—> 2> cell的个数
—> 3> cell中的内容
2 代码部分:
#pragma mark - 数据源方法(组数,不写默认为一组)- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return 1;}#pragma mark - cell的个数- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return 20;}#pragma mark - 每个cell的内容- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ //去缓存池中找 XFJFlowCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath]; NSString *imageName = [NSString stringWithFormat:@"%zd",indexPath.row + 1]; cell.image = [UIImage imageNamed:imageName]; return cell;}
五 自定义cell
1 自定义的时候同时创建一个xib
2 定义一个图片属性
@property (nonatomic, strong) UIImage *image;
3 通过从xib中拖线的方式,拿到UIImageView对象,用来设置图片
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
4 重写定义好的属性的set方法
- (void)setImage:(UIImage *)image{ _image = image; self.imageView.image = image;}
5 将设置cell内容中的cell类型改为自定义的类型,让程序加载的时候,直接加载自定义的类型
六 注册
1 注意: 运用UICollectionView的时候,如果想从缓存池中取,那么必须要采用注册的方法,采用一般的方法是不可以的.
2 代码部分:
//注册 [collectionView registerNib:[UINib nibWithNibName:@"XFJFlowCell" bundle:nil] forCellWithReuseIdentifier:ID];
七 自定义流水布局
1 自定义原因: 如果想要达到整个app运行的效果图,那么传统的流水布局是无法实现的,那么我们就需要自定义.以后再开发中也是这样,在开发中大多数的功能,系统是无法实现的,那么我们就需要自定义.
2 创建自定义流水布局(继承系统的类)
3 照片的缩放
3.1 必须要知道的事: 我们通过观察效果图知道,并不是所有的cell都需要缩放,只是在我们视线范围内的图片需要缩放.
3.2 如何计算缩放比例?
3.3 根据什么来进行缩放的?
代码部分:
//给定个区域,返回这个区域内所有cell的布局- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{ //获取显示的cell的布局 NSArray *atts = [super layoutAttributesForElementsInRect:self.collectionView.bounds]; //获取collectionView的宽度 CGFloat width = self.collectionView.bounds.size.width; //获取collectionView的偏移量 CGFloat offsetX = self.collectionView.contentOffset.x; //遍历所有的cell for (UICollectionViewLayoutAttributes *att in atts) { //计算离中心点的距离 CGFloat delta = fabs(att.center.x - (width * 0.5 + offsetX)); //缩放比例 CGFloat scal = 1 - delta / (width * 0.5) * 0.25; att.transform = CGAffineTransformMakeScale(scal, scal); } return atts;}
4 照片定位功能
4.1 当我们用手指拖动照片,然后停止的时候,照片会定位到中心点的位置
4.2 实现思路: 计算出中心点,然后通过与中心点的距离做比较,离中心点近的图片,就自动定位到中心位置
4.3 明确: 如果用户快速拖动,并且停止的时候,照片会有缓冲,要知道如何计算偏移量.
具体的代码:
//手指离开,拖动完成的时候调用- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{ //获取collectionView的宽度 CGFloat width = self.collectionView.bounds.size.width; //获取最终显示区域 CGRect targetR = CGRectMake(proposedContentOffset.x, 0, width, MAXFLOAT); //获取最终显示的cell NSArray *atts = [super layoutAttributesForElementsInRect:targetR]; //获取cell离中心点的距离 //定义一个变量记录最小的中心距离 CGFloat minDelta = MAXFLOAT; for (UICollectionViewLayoutAttributes *att in atts) { //获取中心距离 CGFloat delta = att.center.x - (width * 0.5 + proposedContentOffset.x); //判断 if (fabs(delta) < fabs(minDelta)) { minDelta = delta; } } //最终的偏移量加上离中心点的距离 proposedContentOffset.x += minDelta; //判断,如果最终的偏移量小于0 if (proposedContentOffset.x < 0) { proposedContentOffset.x = 0; } return proposedContentOffset;}
5 将系统的流水布局,改为自定义的流水布局.
八 前提
注意: 在实现上面对照片的缩放,和自动定位功能的方法的前提下,我们必须要实现下面的代码,如果不实现,是无法达到效果的.会出现问题.
1 只要滚动就会刷新
//滚动的时候是否刷新布局- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{ return YES;}
九 新的封装方法
1 思路:运用到了C语言中的思路,下面的代码中值等于最后一个.
int a = ({ int b = 2; int c = 3; int d = 4; a = b + c + d; 5;});
2 具体对流水布局和创建UICollectionView对象的封装代码:
2.1 封装代码块一:
//封装一: //流水布局 XFJFlowLayout *layout = ({ XFJFlowLayout *layout = [[XFJFlowLayout alloc] init]; //最小水平距离 layout.minimumInteritemSpacing = XFJ_space; //每一个cell的大小 layout.itemSize = CGSizeMake(XFJ_sizeXY, XFJ_sizeXY); //设置额外的滚动数 CGFloat margin = (XFJ_screenW - XFJ_sizeXY) * 0.5; ////左边和右边空出来的额外滚动区域 layout.sectionInset = UIEdgeInsetsMake(XFJ_zero, margin, XFJ_zero, margin); //设置滚动方向(水平) layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; //取的是最后的值 layout; });
2.2 封装代码块二:
//封装二: //创建UICollectionView UICollectionView *collectionView = ({ UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; //bounds collectionView.bounds = CGRectMake(XFJ_zero, XFJ_zero, self.view.bounds.size.width, 200); //center collectionView.center = self.view.center; //隐藏底部的滚动条 collectionView.showsHorizontalScrollIndicator = NO; //设置背景颜色 collectionView.backgroundColor = [UIColor brownColor]; //添加到控制器的view中 [self.view addSubview:collectionView]; //设置代理 collectionView.dataSource = self; //取的是最后的值 collectionView; });
3 封装的好处
1> 能很快的找到对应的位置.比如:如果是流水布局需要修改,就能直接找到流水布局的代码块;同理也很快的找到UICollectionView中的代码块进行修改
2> 给阅读代码的人眼前一种新鲜的感觉,感觉很高大上.同时也可能会影响一部分人对代码不容易读懂(C语言知识比较薄弱).
十 总结
1 该文简单的对UICollectionView的用法进行了补充,里面涉及到了比较多的数学运算,调理还算是比较清晰
2 该文给大家提供了一种新的封装思想
3 希望能帮到大家,提高大家,大家有什么意见,麻烦请留言,如果你觉得还满意的话,请关注我的官方博客,谢谢!!!!
2 0
- UICollectionView用法补充(照片轮播墙)
- UICollectionView的补充
- iOS swift-UICollectionView实现照片浏览
- 通过UICollectionView实现横向滚动照片效果
- ios UICollectionView 的用法
- UICollectionView 高级用法
- UICollectionView 基本用法
- UICollectionView的基本用法
- UICollectionView的基本用法
- UICollectionView用法总结
- UICollectionView的用法
- UICollectionView的用法小结
- UICollectionView的基础用法
- iOS UICollectionView的用法
- UICollectionView的基础用法
- iOS-UICollectionView用法
- [Swift 开发] UICollectionView的用法
- MsgBox函数用法补充
- Android之ScrollView
- 单链表的应用2(单向循环链表变双向循环链表)
- R or Python,为了处理数据到底该学哪个?
- Ant入门学习资料
- ListView优化
- UICollectionView用法补充(照片轮播墙)
- JavaScript基础——数组方法使用
- Android Studio删除无用的资源文件
- 递归(斐波那契数列)
- android----登陆界面
- 在php中使用redis cluster 集群
- 搭建Android开发环境和构建第一个Android程序(Android Studio版)
- “*** error 65: access violation at 0x0000000C : no 'read' permission”错误的解决
- Jfreechart入门使用