iOS 高效轮播图实现

要达到的效果如下:
在这里插入图片描述

  解释:
  诶,这个轮播图呢是做一个相册demo时的一部分,就是点击任何一张图片,就从该图片位置放大到整个屏幕显示这张图片,然后可以滚动并显示其他图片,然后如果单击图片,就会弹出提示框用于退出轮播视图.

  分析:
  主要是核心部分的实现逻辑,即高效;一般要显示n张图片时,就要创建n个UIImageView添加到scrollView上面来做显示,但事实上最有效的方式只需要三个UIImageView就足够了:
逻辑如下:
在这里插入图片描述
  如上图,在一个UIScrollView上面添加的三个UIImageView,设一个UIImageView的宽度为w。每次向左或向右滚动后,立即回到b界面(设置UIScrollView的contentOffset.x始终为w),即滚动后将三个UIImageView上的图片重置,由于重置时间极短,所以看起来就像是在向一个方向不停滚动。

核心代码:主要有两个方法:
其一:每次传入当前要显示图片的位置索引index,根据索引设置三个位置的图片显示,注意第一张和最后一张要单独判断

/**
 根据当前页判断加载的图片
 _imgs[]是存储所有图片的数组
 */
-(void)loadImgsByIndex:(NSInteger)index{
    if (index == 0) {
         //如果是最左边
        _leftView.image = [UIImage imageNamed:_imgs[0]];
        _centerView.image = [UIImage imageNamed:_imgs[1]];
        _scrollView.contentOffset = CGPointZero;
    }else if (index == (_imgs.count - 1)) {
        //最后一张
        _rightView.image = [UIImage imageNamed:_imgs[index]];
        _centerView.image = [UIImage imageNamed:_imgs[index - 1]];
        _scrollView.contentOffset = CGPointMake(2 * zWidth, 0);
    }else{
        //处于中间
        _leftView.image = [UIImage imageNamed:_imgs[index - 1]];
        _centerView.image = [UIImage imageNamed:_imgs[index]];
        _rightView.image = [UIImage imageNamed:_imgs[index + 1]];
        _scrollView.contentOffset = CGPointMake(zWidth, 0);
    }
}

然后是每次滚动后要改变index的值,第一张和最后一张也要单独判断

//每次滑动后的判断
//这是UIScrollViewDelegate的方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    if (scrollView.contentOffset.x == 0) {
        //向左边滑动
        if (_presentPage != 0) {
            _presentPage -- ;
        }
    }else if (scrollView.contentOffset.x == 2*zWidth){
        //向右滑动
        if (_presentPage != (_imgs.count - 1)) {
            //如果不是最后一页
            _presentPage ++;
        }
    }if (scrollView.contentOffset.x == zWidth) {
        //如果是最后一页或者最前一页
        if (_presentPage == (_imgs.count - 1)) {
            _presentPage --;
        }else if (_presentPage == 0){
            _presentPage ++;
        }
    }
    [self loadImgsByIndex:_presentPage];
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 `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. 实现定时器

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值