美文网首页视图控件
SDCycleScrollView图片轮播器

SDCycleScrollView图片轮播器

作者: 搬砖行家 | 来源:发表于2017-08-20 22:53 被阅读246次

    SDCycleScrollView 是一个简单好用的第三方框架
    GitHub链接地址:https://github.com/gsdios/SDCycleScrollView

    使用原理:

    采用UICollectionView的重用机制和循环滚动的方式实现图片的无限轮播,播放非常顺畅,解决了UISCrollView使用时从最后一张跳到第一张时的生硬状态。

    SDCycleScrollView使用方法:

    使用cocopods导入,pod 'SDCycleScrollView','~> 1.64',如果发现pod search SDCycleScrollView 搜索出来的不是最新版本,需要在终端执行cd转换文件路径命令退回到desktop,然后执行pod setup命令更新本地spec缓存(可能需要几分钟),然后再搜索就可以了。
    当然你也可以把demo下载下来,手动把需要的库SDCycleScrollView导入目标工程。

    SDCycleScrollView处理图片时用到了SDWebImage做图片缓存,所以工程中需要导入第三方库SDWebImage。把准备工作做完后,接下来就相当爽了,只需要调用几行代码,一个图片轮播器便可以轻松搞定。废话不多说直接上代码:

    #import "ViewController.h"  
    #import "SDCycleScrollView.h"  
    
    @interface ViewController () <SDCycleScrollViewDelegate>  
    
    @end  
    
    @implementation ViewController  
    
    - (void)viewDidLoad {  
    [super viewDidLoad];  
      
    self.view.backgroundColor = [UIColor colorWithRed:0.98 green:0.98 blue:0.98 alpha:0.99];  
    UIImageView *backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"005.jpg"]];  
    backgroundView.frame = self.view.bounds;  
    [self.view addSubview:backgroundView];  
      
    UIScrollView *demoContainerView = [[UIScrollView alloc] initWithFrame:self.view.frame];  
    demoContainerView.contentSize = CGSizeMake(self.view.frame.size.width, 1200);  
    [self.view addSubview:demoContainerView];  
      
    self.title = @"轮播Demo";  
    
      
    // 情景一:采用本地图片实现  
    NSArray *imageNames = @[@"h1.jpg",  
                            @"h2.jpg",  
                            @"h3.jpg",  
                            @"h4.jpg",  
                            @"h7" // 本地图片请填写全名  
                            ];  
      
    // 情景二:采用网络图片实现  
    NSArray *imagesURLStrings = @[  
                           @"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=a4b3d7085dee3d6d2293d48b252b5910/0e2442a7d933c89524cd5cd4d51373f0830200ea.jpg",  
                           @"https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=a41eb338dd33c895a62bcb3bb72e47c2/5fdf8db1cb134954a2192ccb524e9258d1094a1e.jpg",  
                           @"http://c.hiphotos.baidu.com/image/w%3D400/sign=c2318ff84334970a4773112fa5c8d1c0/b7fd5266d0160924c1fae5ccd60735fae7cd340d.jpg"  
                           ];  
      
    // 情景三:图片配文字  
    NSArray *titles = @[@" ",  
                        @"感谢您的支持,如果下载的",  
                        @"如果代码在使用过程中出现问题",  
                        @"您可以发邮件到wanghuitong@yousails.com"  
                        ];  
      
    CGFloat w = self.view.bounds.size.width;  
      
      
    
    // >>>>>>>>>>>>>>>>>>>>>>>>> demo轮播图1 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
      
    // 本地加载 --- 创建不带标题的图片轮播器  
    SDCycleScrollView *cycleScrollView = [SDCycleScrollView cycleScrollViewWithFrame:CGRectMake(0, 64, w, 180) shouldInfiniteLoop:YES imageNamesGroup:imageNames];  
    cycleScrollView.delegate = self;  
    cycleScrollView.pageControlStyle = SDCycleScrollViewPageContolStyleAnimated;  
    [demoContainerView addSubview:cycleScrollView];  
    cycleScrollView.scrollDirection = UICollectionViewScrollDirectionVertical;  
    //         --- 轮播时间间隔,默认1.0秒,可自定义  
    //cycleScrollView.autoScrollTimeInterval = 4.0;  
      
      
    // >>>>>>>>>>>>>>>>>>>>>>>>> demo轮播图2 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
      
    // 网络加载 --- 创建带标题的图片轮播器  
    SDCycleScrollView *cycleScrollView2 = [SDCycleScrollView cycleScrollViewWithFrame:CGRectMake(0, 280, w, 180) delegate:self placeholderImage:[UIImage imageNamed:@"placeholder"]];  
      
    cycleScrollView2.pageControlAliment = SDCycleScrollViewPageContolAlimentRight;  
    cycleScrollView2.titlesGroup = titles;  
    cycleScrollView2.currentPageDotColor = [UIColor whiteColor]; // 自定义分页控件小圆标颜色  
    [demoContainerView addSubview:cycleScrollView2];  
      
    //         --- 模拟加载延迟  
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{  
        cycleScrollView2.imageURLStringsGroup = imagesURLStrings;  
    });  
      
    /* 
     block监听点击方式 
      
     cycleScrollView2.clickItemOperationBlock = ^(NSInteger index) { 
        NSLog(@">>>>>  %ld", (long)index); 
     }; 
      
     */  
      
      
    // >>>>>>>>>>>>>>>>>>>>>>>>> demo轮播图3 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
      
    // 网络加载 --- 创建自定义图片的pageControlDot的图片轮播器  
    SDCycleScrollView *cycleScrollView3 = [SDCycleScrollView cycleScrollViewWithFrame:CGRectMake(0, 500, w, 180) delegate:self placeholderImage:[UIImage imageNamed:@"placeholder"]];  
    cycleScrollView3.currentPageDotImage = [UIImage imageNamed:@"pageControlCurrentDot"];  
    cycleScrollView3.pageDotImage = [UIImage imageNamed:@"pageControlDot"];  
    cycleScrollView3.imageURLStringsGroup = imagesURLStrings;  
      
    [demoContainerView addSubview:cycleScrollView3];  
      
    }  
    
    
    #pragma mark - SDCycleScrollViewDelegate  
    
    - (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index  
    {  
    NSLog(@"---点击了第%ld张图片", (long)index);  
      
    [self.navigationController pushViewController:[NSClassFromString(@"DemoVCWithXib") new] animated:YES];  
    }  
    
    
    /* 
    
    // 滚动到第几张图回调 
    - (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollToIndex:(NSInteger)index 
    { 
    NSLog(@">>>>>> 滚动到第%ld张图", (long)index); 
    } 
    
     */  
    
    @end  
    

    具体实现还需要你自己去实践,这篇文章如果对你有帮助或启发,可以留言一起交流。
    当然也可以给我发邮件:wanghuitong@yousails.com

    相关文章

      网友评论

      • bee57f311984:切换界面 banner会出现滚动不完全的情况
        搬砖行家:@我没有那么严重啊 你的轮播图 是加在 控制器的View上 还是tableView 的cell上 还是其他控件上
        bee57f311984:@王小祺Shawn banner 区头
        搬砖行家:你的轮播图 是加在什么位置

      本文标题:SDCycleScrollView图片轮播器

      本文链接:https://www.haomeiwen.com/subject/ebjqdxtx.html