I. Introduction

Picture carousel is the most common function in App, which is generally placed at the top and middle of the homepage.

The most basic functions of the picture carousel are as follows: ① infinite rolling in regular cycle; ② dragging and rolling; ③ clicking and jumping.

2, Realization ideas

There are many ways to implement the image carousel. In this paper, we will adopt the simplest and understandable way: one UIScrollView + multiple uiimageviews or uibuttons.

1. First, configure according to the incoming data. Suppose that three pictures [A, B, C] are passed in, and the array is configured as [C, A, B, C, A]. It feels like it's end-to-end.

2. Create UIImageView or UIButton according to the configured array and add it to UIScrollView.

3. Load PageControl.

4. Implement timer auto scrolling: set the content offset of UIScrollView = current content offset + width of a picture.

5. Implement in scrollViewDidScroll of UIScrollViewDelegate: obtain the current ContentOffset and the maximum ContentOffset to judge each time you scroll. When the current ContentOffset is 0, the figure displayed is [C, A, B, C, A], then set the ContentOffset of UIScrollView to [C, A, B, C, A]. Similarly, when the current ContentOffset is the maximum ContentOffset On behalf of the figure displayed at this time is [C, A, B, C, A], set the content offset of UIScrollView to [C, A, B, C, A]. Note that when content offset is set in two places, the animation effect animated cannot be used, so that the seamless replacement of the head and tail can be realized, and it feels like an infinite loop.

Attach all the codes and copy them for use.

#import <UIKit/UIKit.h>

@interface GearSetView : UIScrollView

@property (nonatomic, copy) NSMutableArray *imgArr;//Accept data interface

@end

#import "GearSetView.h"

#define Self_Height self.bounds.size.height
#define Self_Width self.bounds.size.width

#define STWhiteColor [UIColor colorWithRed:255/255.0f green:255/255.0f blue:255/255.0f alpha:0.7]


@interface GearSetView () <UIScrollViewDelegate>

@property(nonatomic, weak) NSTimer *timer;//Timed scrolling

@property(nonatomic, strong) UIPageControl *pageControl;//Page controller

@property(nonatomic, strong) UIScrollView *scrollView;

@end

@implementation GearSetView

#pragma mark - override initWithFrame and layoutSubviews methods
-(instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        [self initScrollViewBase];
    }
    return self;
}

-(void) layoutSubviews {
    [super layoutSubviews];
}

#pragma mark - ScrollView basic settings
-(void) initScrollViewBase {
    
    self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, Self_Width, Self_Height)];
    
    self.scrollView.scrollEnabled = YES;
    self.scrollView.pagingEnabled = YES;
    self.scrollView.bounces = NO;
    
    self.scrollView.alwaysBounceHorizontal = YES;
    self.scrollView.alwaysBounceVertical = NO;
    self.scrollView.showsVerticalScrollIndicator = NO;
    self.scrollView.showsHorizontalScrollIndicator = NO;

    self.scrollView.delegate = self;
    
    [self addSubview:self.scrollView];
}

#pragma mark - rewrite external data interface Set
-(void) setImgArr:(NSMutableArray *)imgArr {
    
    //Array: last + passed in array + first, it feels like it's end-to-end.
    _imgArr = [NSMutableArray array];
    [_imgArr addObject:imgArr[imgArr.count-1]];
    [_imgArr addObjectsFromArray:imgArr];
    [_imgArr addObject:imgArr[0]];
    
    //Set the content of the carousel display after obtaining the data
    [self loadImageView];
    
    [self loadPageControl];
    
    [self openTimer];
}

#pragma mark - load control
-(void) loadImageView {
    
    self.scrollView.contentSize = CGSizeMake(Self_Width*_imgArr.count, Self_Height);
    
    for (int i=0; i<_imgArr.count; i++) {
        //btn can be used for display or imgView, depending on the situation
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(Self_Width*i, 0, Self_Width, Self_Height);
        [btn setImage:[UIImage imageNamed:_imgArr[i]] forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(chickToWeb) forControlEvents:UIControlEventTouchUpInside];
        [self.scrollView addSubview:btn];
    }
    
    self.scrollView.contentOffset = CGPointMake(Self_Width, 0);
}

-(void) loadPageControl {
    
    self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, Self_Height-24, Self_Width, 24)];
    self.pageControl.numberOfPages = _imgArr.count-2;//Real quantity, minus first and last two
    self.pageControl.currentPage = 0;
    self.pageControl.pageIndicatorTintColor = STWhiteColor;
    self.pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    
    [self addSubview:self.pageControl];
}

#pragma mark - switch timer
-(void) openTimer {
    self.timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(automaticRolling) userInfo:nil repeats:YES];
}

-(void) stopTimer {
    if (self.timer != nil) {
        [self.timer invalidate];
        self.timer = nil;
    }
}

#pragma mark - click jump event
-(void) chickToWeb {
    //TODO: click event
    NSLog(@"Jump!");
}

#pragma mark - timer auto scroll event
-(void) automaticRolling {
    //Next offset = current offset + width
    CGFloat contentOffsetX = self.scrollView.contentOffset.x + Self_Width;
    [self.scrollView setContentOffset:CGPointMake(contentOffsetX, 0) animated:YES];
}

#pragma mark - UIScrollViewDelegate agent
-(void) scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGFloat contentoffsetX = self.scrollView.contentOffset.x;//Current x offset
    
    CGFloat max = Self_Width * (self.imgArr.count-1);//The maximum offset, if there are five graphs, then the maximum offset is the X coordinate of the five graphs
    
    //Scroll left. When the offset is 0, reset the offset to the next to last sheet
    if (contentoffsetX <= 0) {
        CGFloat willOffsetX = Self_Width * (self.imgArr.count-2);
        [self.scrollView setContentOffset:CGPointMake(willOffsetX, 0) animated:NO];
    }
    //Scroll to the right. When the offset is the maximum, reset the offset to the second ordinal sheet
    else if (contentoffsetX >= max) {
        [self.scrollView setContentOffset:CGPointMake(Self_Width, 0) animated:NO];
    }
    
    //Set the current number of pages based on the offset
    self.pageControl.currentPage = self.scrollView.contentOffset.x/Self_Width - 1;
}

-(void) scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    //Start drag stop timer
    [self stopTimer];
}

-(void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    //Stop dragging, turn off timer before turning on timer
    [self stopTimer];
    [self openTimer];
}

-(void)dealloc {
    self.delegate=nil;
    
    [self stopTimer];
}


@end