The implementation principle of infinite carousel images and the principle of carousel Images

The implementation principle of infinite carousel images and the principle of carousel Images

Infinite carousel images are believed to be a common feature of many developers. Here we will summarize the implementation principles of the two commonly used methods.

I. Use UIScrollview for unlimited carouselUse UIScrollView to add three uiimageviews to the scrollView to display the previous image, the current image, and the next image. ScrollView always displays the current image (the second image), that is, contentOffset = CGPointMake (scrollViewW, 0) without moving. When sliding, You can preview the previous or next image. Now we use sliding left as an example. Because three images have been set, we can slide left to see a part of the next image (at this time, the screen shows part of the current image and part of the next image ). If you move to the left, change the image displayed on the three uiimageviews in the proxy method scrollViewDidEndDecelerating of UIScrollView (subscript + 1 at a time ), in this case, the second imageView displays the image on the third imageView, and finally pulls the scrollView offset back to the second image. [scrollView setContentOffset: CGPointMake (bannerScrollViewW, 0) animated: NO]

-(Void) scrollViewDidEndDecelerating :( UIScrollView *) scrollView

{

NSInteger leftIndex;

NSInteger rightIndex;

If (scrollView. contentOffset. x = bannerScrollViewW * 2 ){

/** Slide to the left to calculate the subscript index on the left and right */

LeftIndex = self. centerIndex % self. imageNames. count;

Self. centerIndex = (self. centerIndex + 1) % self. imageNames. count;

RightIndex = (self. centerIndex + 1) % self. imageNames. count;

// NSLog (@ "sliding to the left ");

} Else if (scrollView. contentOffset. x = 0 ){

/** Slide to the Right to calculate the subscript index on the left and right */

RightIndex = self. centerIndex;

Self. centerIndex = (self. centerIndex-1) <0? (Self. imageNames. count-1) :( self. centerIndex-1 );

LeftIndex = (self. centerIndex-1) <0? (Self. imageNames. count-1) :( self. centerIndex-1 );

// NSLog (@ "slide right ");

} Else {

// Do nothing without slide. return directly

Return;

}

/** Set the image */

Self. leftImageView. image = [UIImage imageNamed: self. imageNames [leftIndex];

Self. centerImageView. image = [UIImage imageNamed: self. imageNames [self. centerIndex];

Self. rightImageView. image = [UIImage imageNamed: self. imageNames [rightIndex];

/** Set pageControl currentPage because the middle image is always displayed, so currentPage = centerIndex */

Self. pageControl. currentPage = self. centerIndex;

// Pull bannerScrollView back to the center image position to display the image

[ScrollView setContentOffset: CGPointMake (bannerScrollViewW, 0) animated: NO];

}

Ii. Use UICollectionView for unlimited carouselFor N photos, set contentsSize to the width of N + 2 images. For example, fill the two ends. When the two ends are at one end and are about to enter the cyclic state, for example, the second figure, slide from status 1 to status 2. When the slide ends, the current position is directly transferred to status 3 and setContentOffset is visually cyclical. Note: This cannot be used. - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;When we slide the cell, we cannot trigger this function. Although it can be triggered after the animation ends, it refers to the system native animation, such as our manual sliding, this function cannot be triggered. Source: http://www.jianshu.com/p/7123a07cc552