IOS uses Uiscrollview to achieve infinite scrolling effect _ios

Objective

It is well known that Uiscrollview's infinite scrolling is mainly used in picture carousel, welcome interface and other scenes. The idea is to add a picture before and after the picture that you want to display, which is the last picture before the first one. In the last picture after the first picture, and then scroll to the edge of the time, a clever transition can be "deception", "genuine" caused by the illusion of infinite scrolling. The network has a lot of only three or two pictures to achieve the method, the efficiency is higher than this method, but to achieve a little bit of trouble, interested can go to in-depth study.

Implementation steps

1, according to the needs of the preparation of several pictures, on the internet to find 5 pictures, named Img_01,img_02,img_03,img_04,img_05 respectively.

2, code implementation, mainly divided into: add Uiscrollview, add display pictures, add Uipagecontrol, and then listen to Uiscrollview scrolling, according to the location of the scroll to set Uipagecontrol, The most important thing is to have a special handle when scrolling to two edges.

The code is as follows:

#import "ViewController.h"//Screen width #define Screen_width [uiscreen mainscreen].bounds.size.width//Picture height #define Img_heigh 

T 180//Total number of pictures to display #define Max_size 7 #import "ViewController.h" @interface Viewcontroller () <UIScrollViewDelegate>
Scrolling view @property (strong, nonatomic) Uiscrollview *loopscrollview;
Indicator @property (strong, nonatomic) Uipagecontrol *pageindicator;

To show the array of images @property (strong, nonatomic) Nsmutablearray *imgarray; @end @implementation Viewcontroller//Lazy Load array-(Nsmutablearray *) Imgarray {if (_imgarray = = nil) {_imgarray = [[N
    Smutablearray Alloc]initwithcapacity:max_size];
    In the 5 pictures to be displayed before and after each add a picture, the first front plus the fifth, fifth after the first [_imgarray addobject:[uiimage imagenamed:@ "img_05.jpg"]];
      for (int i = 1; i< max_size-1; i++) {NSString *imgname = [[NSString alloc]initwithformat:@ ' img_0%d.jpg ', I];
    [_imgarray Addobject:[uiimage Imagenamed:imgname]];

  [_imgarray addobject:[uiimage imagenamed:@ "img_01.jpg"]];
return _imgarray;
}

-(void) viewdidload {[Super viewdidload];
  [Self setupscrollview];

[Self Setuppagecontrol]; /** * Create Uiscrollview and set its properties/-(void) Setupscrollview {Uiscrollview *SC = [[Uiscrollview alloc]initwithframe:cgrect

  Make (0, Screen_width, img_height)]; Create Uiimageview and add to Uiscrollview for (int i = 0; i< max_size; i++) {Uiimageview *img = [[Uiimageview ALLOC]INITW
    Ithimage:[self.imgarray Objectatindex:i]];
    Img.frame = CGRectMake (screen_width * I, 0, screen_width, img_height);
  [SC addsubview:img];
  }//Set Uiscrollview Properties Sc.contentsize = Cgsizemake (Screen_width * self.imgArray.count, img_height);
  Sc.showshorizontalscrollindicator = NO;
  sc.pagingenabled = YES;


  At the beginning should scroll to the second display, because the first one is actually the last picture [SC setcontentoffset:cgpointmake (screen_width, 0) Animated:no];
  Set up the proxy and add it to the current view sc.delegate = self;

  [Self.view ADDSUBVIEW:SC];
Self.loopscrollview = SC; /** * Create Uipagecontrol and set its properties/-(void) Setuppagecontrol {//Note frame, this setting can be centered UipagEcontrol *pc = [[Uipagecontrol alloc]initwithframe:cgrectmake (self.view.center.x-50, CGRectGetMaxY (
  Self.loopScrollView.frame)-25, 100, 25)];
  Sets the properties of the Uipagecontrol and adds it to the current view pc.numberofpages = Max_size-2;
  pc.currentpage = 0;
  Pc.pageindicatortintcolor = [Uicolor Redcolor];

  [Self.view addsubview:pc];

Self.pageindicator = PC;
//uiscrollview Proxy method that changes the Uipagecontrol in this method and handles edge scrolling-(void) scrollviewdidenddecelerating: (Uiscrollview *) ScrollView
  {//Get the current Uiscrollview position cgpoint offset = [ScrollView contentoffset];
  Calculates the scroll to the first few pages int currentpage = offset.x/screen_width;
  Set Uipagecontrol self.pageIndicator.currentPage = currentPage-1;
    For the last one and the first one to be special treatment//1, if it is the first if (currentpage = = 0) {//The following two methods optional one can achieve the effect, but note that the animation must be set to no, otherwise there will be visual will have the feeling of spicy eyes//Method 1
    [Self.loopscrollview Setcontentoffset:cgpointmake (Screen_width * (max_size-2), 0) Animated:no]; Method 2, the method requires the setting of contentsize, either direction even if not scrolling can not be 0, otherwise invalid//[self.loopscrollview scrollrecttovisible:cgrectmake (screen_WIDTH * (max_size-2), 0, Screen_width, img_height) Animated:no];
  Self.pageIndicator.currentPage = max_size-2; }//2, if the last else if (currentpage = = max_size-1) {[Self.loopscrollview Setcontentoffset:cgpointmake (Screen_wid
    TH, 0) Animated:no];
    [Self.loopscrollview scrollrecttovisible:cgrectmake (screen_width, 0, Screen_width, img_height) Animated:NO];
  self.pageIndicator.currentPage = 0; }} @end

Implementation effect

Summarize

Well, the above is the entire content of this article, in fact, the best way to achieve the carousel now is to use Uicollectionview, because it is implemented using a reuse mechanism, performance will be much better, code writing similar. I hope the content of this article for everyone's study or work can bring certain help, if there is doubt you can message exchange.