ios中间大,两边小的轮播图

首先上图 , 中间大,两边小的轮播图 ,git地址 : https://github.com/guochaoshun/LunBoTu

主要参考代码 : https://github.com/orzzh/WLScrollView , 这个是用scrollview做的,然后自己写的cell复用,觉得有点复杂了,所以我的例子直接用了UICollectionView

里面有几个比较好的点 : 

1. 对timer的使用 , _timer加入的是NSDefaultRunLoopMode,没有加入NSEventTrackingRunLoopMode,所以拖动的时候不需要在停止timer

- (void)setTimerInterval:(CGFloat)timerInterval {
    _timerInterval = timerInterval;
    if (timerInterval <= 0) {
        [_timer invalidate];
        _timer = nil;
        return;
    }
    __weak typeof(self) weakSelf = self;
    _timer = [NSTimer timerWithTimeInterval:timerInterval repeats:YES block:^(NSTimer * _Nonnull timer) {
        
        /*业务代码*/
    }];
    [_timer fire];
    // _timer加入的是NSDefaultRunLoopMode,没有加入NSEventTrackingRunLoopMode,所以拖动的时候不需要在停止timer
    [[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSDefaultRunLoopMode];
    
    
}

2. 手机松开的时候想要立即停止滚动. 重写scrollViewWillEndDragging方法 , 设置targetContentOffset之后就不会有惯性减速了, 对了 , 还有这个属性         _colloectView.decelerationRate = UIScrollViewDecelerationRateFast; 这样设置减速会很快,降低惯性值

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    _startX = scrollView.contentOffset.x;
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
                     withVelocity:(CGPoint)velocity
              targetContentOffset:(inout CGPoint *)targetContentOffset{
    // 设置targetContentOffset之后就不会有惯性减速了
    *targetContentOffset = scrollView.contentOffset;
    _endX = scrollView.contentOffset.x;
    [self scrollToIndex];
    
}

3.动画的实现部分 , 根据距离屏幕中心的偏移距离 , 然后计算出对应的放大倍数 , CGFloat scale = 1-0.1*d ; 这个可以根据需要自行调整


- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGFloat ScreenWidth = [UIScreen mainScreen].bounds.size.width;
    for (UICollectionViewCell * cell in self.colloectView.visibleCells) {
        CGPoint centerPoint = [self convertPoint:cell.center fromView:scrollView];
        
        CGFloat d = fabs(centerPoint.x - ScreenWidth*0.5)/cell.contentView.bounds.size.width;
        // 中间的为1,旁边2个为0.9
        CGFloat scale = 1-0.1*d ;
        cell.layer.transform = CATransform3DMakeScale(scale, scale, 1);
        
        
    }
    
}

4. 轮播的实现 , 这个采用了简单有效的方式 ,NSInteger最大可以放的元素数量是 9*10^18, 数组中可以放的元素也是10^12个 , 所以肯定不会超的

// NSInteger的取值范围是2^63-1,9 223 372 036 854 775 807大约是9*10^18,所以肯定不会超的
// 就算dataSourse里面只有一个元素,1s滑动一次,需要滑动50000次,
// 用户也需要无聊的滑动13多个小时才会滑到最右边,如果对10W还是不放心,那就改成100W
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.dataSourse.count * 100000;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MainADCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MainADCell" forIndexPath:indexPath];
    cell.mainImage.image = [UIImage imageNamed:self.dataSourse[indexPath.item%self.dataSourse.count]];
    cell.tag = indexPath.item%self.dataSourse.count;
    return cell;
}

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以使用 `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. 实现定时器

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值