美文网首页UIScrollView常用组件网站制作
循环展示广告的控件:SLAdsSliderView

循环展示广告的控件:SLAdsSliderView

作者: 一声雷 | 来源:发表于2016-02-23 18:34 被阅读466次

    一、效果展示(无限循环)

    效果展示.gif

    二、原码下载地址

    SLAdsSliderView控件的原码上传在我的github上。
    下载地址:https://github.com/SLconst/SLAdsSliderView

    三、如何使用

    1.快速创建

    - (void)viewDidLoad {
    // 创建广告滚动的控件
        SLAdsSliderView *adsSliderView = [[SLAdsSliderView alloc] init];
        adsSliderView.frame = CGRectMake(0, 0, 375 , 200);
        adsSliderView.images = @[
                                 [UIImage imageNamed:@"image0"],
                                 [UIImage imageNamed:@"image1"],
                                 [UIImage imageNamed:@"image2"],
                                 [UIImage imageNamed:@"image3"],
                                 [UIImage imageNamed:@"image4"]
                                 ];
        [self.view addSubview:adsSliderView];
    }
        // 设置代理(可以用代理方法监听图片的点击)
        adsSliderView.delegate = self;
        
    

    2.设置图片的滚动方向

        // 设置图片的滚动方向(默认是水平方向滚动)
        adsSliderView.direction = SLAdsSliderViewDirectionVertical;
    

    3.监听是点击了哪张图片(代理协议:SLAdsSliderViewDelegate

        // 设置代理(可以用代理方法监听图片的点击)
        adsSliderView.delegate = self;
        
      // 实现代理方法
       -(void)adsSliderView:(SLAdsSliderView *)adsSliderView   didSelectItemAtIndex:(NSInteger)index
       {
            NSLog(@"%ld",(long)index);
       }
    

    4.关于pageControl

    1.如果是想设置pageControl的某些样式,我提供了pageControl属性的接口
           adsSliderView.pageControl.××× 
    2.如果是想改变pageControl的frame,就继承自我这个控件,在layoutSubviews中修改
            - (void)layoutSubviews
           {
               [super layoutSubviews];
               self.pageControl.frame = CGRectMake(0, 0, 100, 25);
            }
    

    四、如何实现无限滚动的思路

    层级图

    监听scrollview的滚动,每当滚动结束后,同时完成以下两步:

    1.重置scrollView.contentOffset.x 等于 scrollview控件的宽度。
    2.更改三个imageview上显示的图片。

    比如我设置了image0、image1、image2、image3、image4、image5、image6一共7张图片。contentOffset如上图。
    左边显示:image1
    中间显示:image2
    右边显示:image3
    那么此时我们屏幕上显示的是image2,当我们向右慢慢滚动时 -->, 右边显示的image3会慢慢出现在我们眼前。

    向右滑动
    当右边显示的image3即将完全显示在眼前的时候,
    立刻将scrollView.contentOffset.x置为scrollview的宽度,
    并立马改变三个图片显示的内容。
    左边显示:image2
    中间显示:image3
    右边显示:image4
    那么这个时候显示在我们眼前的就是image3的图片。
    如此往复执行下去,就实现了无限滚动的效果。

    相关文章

      网友评论

      本文标题:循环展示广告的控件:SLAdsSliderView

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