iOS realizes the packaging of the infinite loop image roaster

  • 2020-05-24 06:14:42
  • OfStack

Many times in the project will encounter this requirement, to achieve the infinite cycle of multiple pictures, done before, several places in the project are used, there was no encapsulation, several places are copied almost 1 kind of code, code reuse is not good, today there is nothing to encapsulate 1, easy to use.

First of all, tell me the implementation cycle image thought, in UIScrollView added three UIImageView, arranged side by side, we see only the second UIImageView forever, in this way, you can direct to the left, right, when you slide to the left, is this your slide at the end of the day 1 UIImageView can't slide to the left, then, I will quietly behind the second UIImageView set to the current picture to display images, adjust the UIScrollView contentOffset attributes, such as:

[_contentScrollView setContentOffset: CGPointMake (self. bounds. size. width, 0) animated: NO] (users don't feel out this change) so, at this point, you can see it is the second UIImageView, so at this point you can slide to the left again, when you slide to the right when dealing with similar, lead to the result you can to the left and the right pictures the wireless cycle.

JGCirculateSwitchImgView. h header files


@interface JGCirculateSwitchImgView : UIView
@property(nonatomic,strong)NSArray *imgUrlArr;
@end

There is only one member variable imgUrlArr array that you need to set in the header file, which is the array that you want to display the image path to, which will access the image.

JGCirculateSwitchImgView m file


typedef NS_ENUM(NSInteger, SwitchDirection)

{

// Unsuccessful rotation 
 SwitchDirectionNone = -1,
// Rotate the picture to the right 
 SwitchDirectionRight = 0,
// Turn the picture to the left 
SwitchDirectionLeft = 1,

};

An SwitchDirection enumeration is defined to indicate that the image rotates left, right, or nothing.


// The default 5 Second training transfer pictures 1 time , It can be changed as needed 
#define WiatForSwitchImgMaxTime 5
#import "JGCirculateSwitchImgView.h"
#import "UIImageView+WebCache.h"
@interface JGCirculateSwitchImgView ()

// At the bottom of the UIScrollView
@property(nonatomic,weak)UIScrollView *contentScrollView;
// Showing the page number UIPageControl controls 
@property(nonatomic,weak)UIPageControl *pageControlView;
// Save the current UIPageControl Control displays the current location 
@property(nonatomic,assign)NSInteger currentPage;
// Used to save the current display image in the image urlArr Index in array 
@property(nonatomic,assign)NSInteger currentImgIndex;
//UIScrollView On the 3 a UIImgaView Here by 3 a UIImageView Realize infinite loop picture rotation 
@property(nonatomic,weak)UIImageView *imgView1;
@property(nonatomic,weak)UIImageView *imgView2;
@property(nonatomic,weak)UIImageView *imgView3;
@property(nonatomic,assign)BOOL isDragImgView;
//SwitchDirection Type to hold the direction of the slide 
@property(nonatomic,assign)SwitchDirection swDirection;

@end


-(id)initWithFrame:(CGRect)frame

{

  if (self = [super initWithFrame:frame])
  {
    [self createContentScrollView];
    [self createPageControlView];
   // By default the first 1 page 
   _currentPage = 0;
   // Default display control 1 image 
   _currentImgIndex = 0;
   _isDragImgView = NO;
   _swDirection = SwitchDirectionNone;

  }

   return self;

}

Create UIScrollView code


-(void)createContentScrollView

{

  UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
  scrollView.delegate = self;
  scrollView.showsHorizontalScrollIndicator = NO;
  scrollView.shouldGroupAccessibilityChildren = NO;
  scrollView.pagingEnabled = YES;
  [self addSubview:scrollView];
  _contentScrollView = scrollView;

}

Create UIPageControl


-(void)createPageControlView

{

  UIPageControl *pageControlVw = [[UIPageControl alloc] init];
  pageControlVw.frame = CGRectMake(0, 0, 80, 20);
  pageControlVw.center = CGPointMake(self.center.x, self.bounds.size.height - 20);
  pageControlVw.backgroundColor = [UIColor redColor];
  _pageControlView.pageIndicatorTintColor = [UIColor yellowColor];
  _pageControlView.currentPageIndicatorTintColor = [UIColor purpleColor];
  [self addSubview:pageControlVw];
  _pageControlView = pageControlVw;

}

//value right Count modulus , And it's guaranteed to be positive 

// It's important here, it's important to have an infinite loop 1 Step, for example, now shows the first 1 Image, _currentImgIndex=0, Swipe left to display _currentImgIndex+1 A picture, but _currentImgIndex+1 Possible return greater than _imgUrlArr An array of count I'm going to take the modulus here, and then I'm going to make sure that it's positive, for example, if I slide it to the right, it'll show up _currentImgIndex-1 Image, _currentImgIndex-1 I could have taken a negative number, and now I'm going to add it count It's guaranteed to be positive 

-(NSInteger)switchToMValue:(NSInteger)value Count:(NSInteger)count

{

  NSInteger result = value % count;
  return result >=0 ? result : result + count;

}

Override the set method for imgUrlArr


-(void)setImgUrlArr:(NSArray *)imgUrlArr

{

  _imgUrlArr = [imgUrlArr copy];
  NSInteger count = imgUrlArr.count;
  if (count <= 0 )
  {
   return;
  }

  // If you only show 1 image , So there's no rotation 
  if (count == 1)

  {

    UIImageView *imgView = [[UIImageView alloc]init];
    imgView.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
   [_contentScrollView addSubview:imgView]; 
   _pageControlView.numberOfPages = 1; 
   _pageControlView.currentPage = 0;
   _contentScrollView.contentSize = CGSizeMake(self.bounds.size.width, self.bounds.size.height);
   NSURL *imgUrl = [NSURL URLWithString:imgUrlArr[0]];
   [imgView sd_setImageWithURL:imgUrl placeholderImage:nil];
   return;

  }

  if (count > 1)

  {

     // I'm just gonna use 3 a ImgView Rotate multiple pictures, quantity 2,3,4,5,6...
     for(int i = 0; i < 3 ;i++)
     {

       UIImageView *imgView = [[UIImageView alloc] init];
       imgView.frame = CGRectMake(i * self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height);
       imgView.layer.masksToBounds = YES;
       NSString *urlStr = urlStr = _imgUrlArr[[self switchToValue:i-1 Count:count]];
       NSURL *imgUrl = [NSURL URLWithString:urlStr];
       [imgView sd_setImageWithURL:imgUrl placeholderImage:nil];
       if (i == 0)

       {

         _imgView1 = imgView; 

        }

        else if (i == 1)

       {

         _imgView2 = imgView;

       }

       else if (i == 2)

       {

         _imgView3 = imgView; 

       }

       [_contentScrollView addSubview:imgView];

     }

    _pageControlView.numberOfPages = count; 
    _pageControlView.currentPage = 0;
    _contentScrollView.contentSize = CGSizeMake(self.bounds.size.width * 3,  self.bounds.size.height);
    _currentImgIndex = 0;
    [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];
   dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
      // Cycle the picture 
      [self switchImg];

   });

  }

}

Rotate the image in 5 seconds


-(void)switchImg

{

   while (1)

   {

     [NSThread sleepForTimeInterval:WiatForSwitchImgMaxTime];
     // If you are dragging the image, this time will be invalid  
      if (_isDragImgView) {
        continue;

      }

      _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];
      dispatch_async(dispatch_get_main_queue(), ^{
         _pageControlView.currentPage = _currentPage;
         _contentScrollView.contentOffset = CGPointMake(2 * self.bounds.size.width, 0);
         [self reSetImgUrlWithDirection:SwitchDirectionLeft];

     });

   }

}

When manually rotating the image


-(void)switchImgByDirection:(SwitchDirection)direction

{

   if (direction == SwitchDirectionNone) {
     return;
   }
   [self reSetImgUrlWithDirection:direction];
   [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];

}

After rotating the image, readjust the contents of the three UIImageView displays, as described in the implementation idea


typedef NS_ENUM(NSInteger, SwitchDirection)

{

// Unsuccessful rotation 
 SwitchDirectionNone = -1,
// Rotate the picture to the right 
 SwitchDirectionRight = 0,
// Turn the picture to the left 
SwitchDirectionLeft = 1,

};

0

Implement UIScrollVie3 proxy methods


typedef NS_ENUM(NSInteger, SwitchDirection)

{

// Unsuccessful rotation 
 SwitchDirectionNone = -1,
// Rotate the picture to the right 
 SwitchDirectionRight = 0,
// Turn the picture to the left 
SwitchDirectionLeft = 1,

};

1

The above is the implementation code, now see how to use, for example:


typedef NS_ENUM(NSInteger, SwitchDirection)

{

// Unsuccessful rotation 
 SwitchDirectionNone = -1,
// Rotate the picture to the right 
 SwitchDirectionRight = 0,
// Turn the picture to the left 
SwitchDirectionLeft = 1,

};

2

You can see that after encapsulation, the code is highly reusable and easy to use, so four lines of code can realize the infinite rotation of the picture.

The above is the entire content of this article, I hope to help you with your study.


Related articles: