你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> iOS ScrollView 無限循環

iOS ScrollView 無限循環

編輯:IOS開發基礎

scrollview 做,循環展示,1~10個可以比較簡單,耗能比較少,假設100,1000,等等或者更多,總不能創建這麼多個view。

可以參考這個博客,寫的漂亮,我是在這個基礎上做了點封裝

這篇博客 主要介紹了 用3個view 來顯示無限個 view,主要是通過- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 來計算當前滑動了到第幾個,然後調整 3個view的位置。

我自定義了一個view EndlessLoopShowView

#import @class EndlessLoopShowView;
@protocol EndlessLoopShowViewDelegate @optional
/* 滑動到第幾個位置 **/
- (void)endlessLoop:(EndlessLoopShowView*)showView scrollToIndex:(NSInteger)currentIndex;

@end

@interface EndlessLoopShowView : UIView

/* 返回圖片的顯示,可以傳入 image ,imageName ,url ,自己可以自定義 **/
@property (nonatomic,strong) NSArray * imageDataArr;

@property (nonatomic,weak) id delegate;

@end
//
//  EndlessLoopShowView.m
//  EndlessLoopShowView
//
//  Created by apple on 16/9/26.
//  Copyright ? 2016年 李重陽. All rights reserved.
//

#import "EndlessLoopShowView.h"

/*無限循環的視圖 **/
@interface EndlessLoopShowView ()@property (nonatomic,strong) UIScrollView * scrollView;

@property (nonatomic,strong) UIImageView *leftImageView;
@property (nonatomic,strong) UIImageView *centerImageView;
@property (nonatomic,strong) UIImageView *rightImageView;

@property (nonatomic,assign) NSInteger currentIndex;/* 當前滑動到了哪個位置**/
@property (nonatomic,assign) NSInteger imageCount;/* 圖片的總個數 **/


//http://www.cnblogs.com/kenshincui/p/3913885.html#ImageViewer
@end

@implementation EndlessLoopShowView

#pragma mark - 生命周期

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {

        [self setupView];
    }
    return self;
}

- (void)setupView {

    _currentIndex = -1;
    [self addSubview:self.scrollView];
    //添加圖片控件
    [self addImageViews];
}


- (void)layoutSubviews {

    [super layoutSubviews];

    self.scrollView.frame = self.bounds;
    CGFloat imageW = CGRectGetWidth(self.scrollView.bounds);
    CGFloat imageH = CGRectGetHeight(self.scrollView.bounds);
    self.leftImageView.frame   = CGRectMake(imageW*0, 0, imageW, imageH);
    self.centerImageView.frame = CGRectMake(imageW*1, 0, imageW, imageH);
    self.rightImageView.frame  = CGRectMake(imageW*2, 0, imageW, imageH);
    self.scrollView.contentSize= CGSizeMake(imageW*3, 0);
    self.currentIndex = 0;
    [self setScrollViewContentOffsetCenter];
}


#pragma mark - 私有方法

#pragma mark - get/set方法
- (UIScrollView *)scrollView {

    if (_scrollView == nil) {

        _scrollView=[[UIScrollView alloc]init];
        //設置代理
        _scrollView.delegate=self;
        //設置分頁
        _scrollView.pagingEnabled=YES;
        //去掉滾動條
        _scrollView.showsHorizontalScrollIndicator=NO;
    }
    return _scrollView;
}

/* 重寫 setCurrent 方法 並且賦值 **/
- (void)setCurrentIndex:(NSInteger)currentIndex {

    if (_currentIndex != currentIndex) {

        _currentIndex = currentIndex;

        NSInteger leftImageIndex = (currentIndex+_imageCount-1)%_imageCount;
        NSInteger rightImageIndex= (currentIndex+1)%_imageCount;
        _centerImageView.image =[UIImage imageNamed:self.imageDataArr[currentIndex]];
        _leftImageView.image   =[UIImage imageNamed:self.imageDataArr[leftImageIndex]];
        _rightImageView.image  =[UIImage imageNamed:self.imageDataArr[rightImageIndex]];

        [self setScrollViewContentOffsetCenter];

        if ([self.delegate respondsToSelector:@selector(endlessLoop:scrollToIndex:)]) {

            [self.delegate endlessLoop:self scrollToIndex:currentIndex];
        }

    }
}

#pragma mark 添加圖片三個控件
-(void)addImageViews {

    _leftImageView=[[UIImageView alloc]init];
    _leftImageView.contentMode=UIViewContentModeScaleAspectFit;
    [_scrollView addSubview:_leftImageView];

    _centerImageView=[[UIImageView alloc]init];
    _centerImageView.contentMode=UIViewContentModeScaleAspectFit;
    [_scrollView addSubview:_centerImageView];

    _rightImageView=[[UIImageView alloc]init];
    _rightImageView.contentMode=UIViewContentModeScaleAspectFit;
    [_scrollView addSubview:_rightImageView];
}


/* 把scrollView 偏移到中心位置 **/
- (void)setScrollViewContentOffsetCenter {

    [self.scrollView setContentOffset:CGPointMake(CGRectGetWidth(self.scrollView.bounds), 0) animated:NO];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    CGPoint offset=[_scrollView contentOffset];
    if (offset.x>CGRectGetWidth(scrollView.frame)) { //向右滑動
        self.currentIndex=(self.currentIndex+1)%_imageCount;
    }else if(offset.x

用法

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    EndlessLoopShowView * showView = [[EndlessLoopShowView alloc]initWithFrame:CGRectMake(0, 100, 200, 200)];
    showView.backgroundColor = [UIColor redColor];
    showView.imageDataArr = @[@"1",@"2",@"3",@"4",@"5"];
    showView.delegate = self;
    [self.view addSubview:showView];

}

- (void)endlessLoop:(EndlessLoopShowView *)showView scrollToIndex:(NSInteger)currentIndex {

    NSLog(@"currentIndex = %ld",currentIndex);
}


文章轉自 Mr_Lee_的簡書

Demo鏈接:GitHub


  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved