美文网首页
ScrollView的图片无限循环实现

ScrollView的图片无限循环实现

作者: hunterzhu | 来源:发表于2016-07-16 13:25 被阅读119次

ScrollView中的图片无限循环一直是现在APP中常用的构造。
.h文件中

#import <UIKit/UIKit.h>

@interface ScrollView : UIView

@property(nonatomic,strong) NSArray *imageArray;

@end

.m文件

#import "ScrollView.h"
//屏幕的宽度
#define kScreenW [UIScreen mainScreen].bounds.size.width
//设置UIScrollView的代理
@interface ScrollView () <UIScrollViewDelegate>{
    
    //UIScrollView 滑动视图
    UIScrollView *_scrollView ;
    //页面控制器视图
    UIPageControl *_pageControl;
    
    /**
     *  三张图片视图,左 中 右 
        实现无限循环
     */
    
    UIImageView *_middleImage;
    UIImageView *_leftImage;
    UIImageView *_rightImage;
    
    //索引值 就当做是数组的下标
    NSInteger _index;
}

@end

@implementation ScrollView

//覆写initWithFrame
- (instancetype)initWithFrame:(CGRect)frame {
    
    //设置初始下标
    _index = 0;
    self = [super initWithFrame:frame];
    if (self != nil) {
        
    }
    
    return self;
}

//这里是获取数据的
- (void)setImageArray:(NSArray *)imageArray {
    
    _imageArray = imageArray;
    //创建View
    [self loadImage];
}



- (void)loadImage {
    //本视图的高度--》将来是要被ViewController调用的
    CGFloat height = self.frame.size.height;
    
    //大小 位置
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, height)];
    //分页功能
    _scrollView.pagingEnabled = YES;
    //隐藏滑块
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.showsVerticalScrollIndicator = NO;
    //代理,都懂的
    _scrollView.delegate = self;
    //滑动区域,因为只有三个imageView所以只需要三个屏幕宽度
    _scrollView.contentSize = CGSizeMake(3*kScreenW, height);
    //增加一个屏幕的宽度为第一次看到的视图刚好是中间视图
     _scrollView.contentOffset = CGPointMake(kScreenW, 0);
  
    [self addSubview:_scrollView];
    
    //页面控制的基本设置
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, height - 35, kScreenW, 35)];
    _pageControl.numberOfPages = _imageArray.count;
    _pageControl.currentPage = 0;
    
    //设置三个imageView
    _leftImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, height)];
    
    _middleImage = [[UIImageView alloc] initWithFrame:CGRectMake(kScreenW, 0, kScreenW, height)];
    
    _rightImage = [[UIImageView alloc] initWithFrame:CGRectMake(kScreenW *2, 0, kScreenW, height)];
    [_scrollView addSubview:_leftImage];
    [_scrollView addSubview:_rightImage];
    [_scrollView addSubview:_middleImage];
    
    
    [self addSubview:_pageControl];
    //设置图片
    [self loadImageView];
    
    
}
- (void)loadImageView {
    
    //上一张
    NSInteger leftIndex = (_index - 1 + _imageArray.count) % _imageArray.count;

    _leftImage.image = [UIImage imageNamed:_imageArray[leftIndex]];
    
    //当前页图片
    _middleImage.image = [UIImage imageNamed:_imageArray[_index]];
    
    //下一张
    NSInteger rightIndex = (_index + 1) %_imageArray.count;
    
    _rightImage.image = [UIImage imageNamed:_imageArray[rightIndex]];
    
    
    
}

//当完成滑动减速调用的方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    //往左滑 --> 下一张
    if (scrollView.contentOffset.x > kScreenW) {
        //数组下标
        _index =(_index + 1) %_imageArray.count;
        //往右滑
    }else if(scrollView.contentOffset.x < kScreenW){
        
        _index = (_index - 1 + _imageArray.count) % _imageArray.count;
    }
    
    //重新设置图片
    [self loadImageView];
    //设置偏移区间
    scrollView.contentOffset = CGPointMake(kScreenW, 0);
    
    //页面控制器的点点的变化
    _pageControl.currentPage = (_index ) %_imageArray.count;
    
}
@end

相关文章

网友评论

      本文标题:ScrollView的图片无限循环实现

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