iOS之旅--用CollectionView实现轮播图效果+封装方法

用CollectionView实现轮播图效果

思路:使用Section来实现,每一组的数据都一样,默认设置N组(正常情况下50-100即可,除非有人很无聊),然后添加定时器,使CollectionView滚动到相应的地方,手动拖拽是collectionView本身就具备的。

https://github.com/shijinliang/KSDemo/tree/CollectionView轮播图
https://github.com/shijinliang/KSDemo里面的 一个分支,之后会合并到主分支,所以clone下来的master上会有一个文件夹“CollectionView轮播图”
【欢迎star】

封装方法:

typedef void(^selectImageBlock)(NSInteger index);

@interface CollectionImageView : UIView
/**
 *  封装collectionView实现轮播图
 *
 *  @param frame      传入轮播图的frame
 *  @param imageArray 图集数组表示
 *  @param block      点击图片的方法用block公开出去
 *
 *  @return
 */
- (instancetype)initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray selectImageBlock:(selectImageBlock) block;

集成“CollectionView封装”文件夹的代码,调用如下代码即可实现效果:

NSArray *images = @[@"icc1",@"icc2",@"icc3",@"icc4",@"icc5"];
CollectionImageView *view =
 [[CollectionImageView alloc]initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, 300) 
 imageArray:images 
 selectImageBlock:^(NSInteger index) {
        NSLog(@"点击的是第%d个",index);
    }];
[self.view addSubview:view];

小注:关于上面说的设置N组,在定时器状态下,有一个优化,可以使其在计算下一页的时候,先重算位置,无动画滚动到中间的那组。然后再滚动到下一页,这样collectionView只要2组就足够,但是拖拽的时候出问题了,会出现拖拽到屏幕外时可能返回当前页,未移动到目标页面。
主要因为 NSIndexPath *currentPath = [[self.collectionView indexPathsForVisibleItems] lastObject]; 这部分代码导致,
[self.collectionView indexPathsForVisibleItems] 此方法返回一个数组,有的时候返回一个NSIndexPath,有的时候返回的是两个,当返回两个的时候,手动拖拽可能会出现:
我打印的是数组里面NSIndexPath的row,【1,2】 【2,1】,可能会出现这两种结果,所以拖拽的时候没有使用重算位置这个方法。

哪位童鞋有好的办法欢迎指导

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用 `UICollectionView` 或 `UIPageViewController` 来实现 iOS 图片轮播。 使用 `UICollectionView` 实现方法如下: 1. 在您的视图控制器,创建一个 `UICollectionView` 实例,并将其作为子视图添加到您的视图控制器的视图。 2. 使用自定义布局实现循环滚动。可以参考以下代码: ``` class LoopCollectionViewFlowLayout: UICollectionViewFlowLayout { override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { guard let collectionView = collectionView else { return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity) } let collectionViewSize = collectionView.bounds.size let proposedContentOffsetCenterX = proposedContentOffset.x + collectionViewSize.width * 0.5 let proposedRect = CGRect(x: proposedContentOffset.x, y: 0, width: collectionViewSize.width, height: collectionViewSize.height) guard let layoutAttributes = layoutAttributesForElements(in: proposedRect) else { return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity) } let centerX = proposedContentOffsetCenterX let offset = CGPoint(x: proposedContentOffset.x + nearestTargetOffset(for: layoutAttributes, with: centerX), y: proposedContentOffset.y) return offset } private func nearestTargetOffset(for layoutAttributes: [UICollectionViewLayoutAttributes], with centerX: CGFloat) -> CGFloat { let targetAttributes = layoutAttributes.sorted { abs($0.center.x - centerX) < abs($1.center.x - centerX) } let nearestAttribute = targetAttributes.first return nearestAttribute?.center.x ?? 0 - centerX } } ``` 3. 创建自定义 `UICollectionViewCell` 类,并在其添加一个 `UIImageView` 用于显示图片。 4. 实现 `UICollectionViewDataSource` 协议方法,用于设置图片数据源和自定义的 `UICollectionViewCell`。 5. 实现定时器
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值