title: UIImageViews overlapping each other in a paging UIScrollView
body: <p>I have tried to make a ScrollView similar to the one in the Photos app in iOS but after writing the following lines of code i still seem to be having some problems</p>
  
  <pre><code>    #import "ViewController.h"
  
     @interface ViewController ()&lt;UIScrollViewDelegate&gt;
     @property (strong,nonatomic) NSArray * ContentList;
     @property (strong,nonatomic) NSMutableArray * pageViews;
     @property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
     @property (weak, nonatomic) IBOutlet UIPageControl *PageControl;
  
     @end
  
  @implementation ViewController
  -(NSArray *)ContentList
  {
  if (!_ContentList) {
      _ContentList = @[[UIImage imageNamed:@"Photo_1"],[UIImage imageNamed:@"Photo_2"],[UIImage imageNamed:@"Photo_3"],[UIImage imageNamed:@"Photo_4"],[UIImage imageNamed:@"Photo_5"],[UIImage imageNamed:@"Photo_7"]];
  }
  return _ContentList;
  }
  
  - (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view, typically from a nib.
    [self ContentList];
    NSUInteger numOfpages = _ContentList.count;
  
  NSMutableArray * views = [[NSMutableArray alloc]init];
  for (NSUInteger i = 0; i &lt; numOfpages; i++) {
      [views addObject:[NSNull null]];
  }
  
  self.pageViews = views;
  
  self.scrollView.pagingEnabled = YES;
  self.scrollView.contentSize =
  CGSizeMake(CGRectGetWidth(self.scrollView.frame) * numOfpages, CGRectGetHeight(self.scrollView.frame));
  self.scrollView.showsHorizontalScrollIndicator = NO;
  self.scrollView.showsVerticalScrollIndicator = NO;
  self.scrollView.scrollsToTop = NO;
  self.scrollView.delegate = self;
  
  
  _PageControl.numberOfPages = numOfpages;
  _PageControl.currentPage = 0;
  
  NSLog(@"the number of objects in the array is %lu",_ContentList.count);
  NSLog(@"the number of objects in the mutable array is %lu",_pageViews.count);
  
  [self LoadScrollViewWithPage:0];
  [self LoadScrollViewWithPage:1];
  
      }
  
    -(void)LoadScrollViewWithPage:(NSInteger)page
   {
  if (page &gt;= self.ContentList.count ||page &lt; 0)
      return;
  
  // replace the placeholder if necessary
  UIView * view = [self.pageViews objectAtIndex:page];
  if ((NSNull *)view == [NSNull null])
  {
      UIImageView * newView = [[UIImageView alloc]initWithImage:[_ContentList objectAtIndex:page]];
  
      CGRect frame = self.scrollView.frame;
      frame.origin.x = CGRectGetWidth(frame) * page;
      frame.origin.y = 0;
      newView.frame = frame;
      newView.clipsToBounds = YES;
      newView.contentMode = UIViewContentModeScaleAspectFit;
  
      [self.scrollView addSubview:newView];
  
      [_pageViews replaceObjectAtIndex:page withObject:newView];
  
  
  }
  
  }
  
    -(void)PurgePage:(NSInteger)page
  {
  if (page &lt; 0 || page &gt; _ContentList.count) {
      return;
  
  }
  
  UIView * view = [_pageViews objectAtIndex:page];
  if ((NSNull *)view != [NSNull null]) {
      [view removeFromSuperview];
      [_pageViews replaceObjectAtIndex:page withObject:[NSNull null]];
  }
  
  }
  
   - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
   {
  // switch the indicator when more than 50% of the previous/next page is visible
  CGFloat pageWidth = CGRectGetWidth(self.scrollView.frame);
  NSUInteger Currentpage = floor((self.scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
  self.PageControl.currentPage = Currentpage;
  
  
  NSInteger PagebeforeCurrentPage = Currentpage - 1;
  NSInteger PageAfterCurrentPage = Currentpage + 1;
  // load the visible page and the page on either side of it (to avoid flashes when the user starts scrolling)
  
  
  // a possible optimization would be to unload the views+controllers which are no longer visible
  
  self.scrollView.contentOffset = CGPointMake(self.scrollView.contentOffset.x, 0);
  
  for (NSInteger i = 0; i &lt; PagebeforeCurrentPage; i++) {
      [self PurgePage: i];
  }
  
  [self LoadScrollViewWithPage:PagebeforeCurrentPage];
  [self LoadScrollViewWithPage:Currentpage];
  [self LoadScrollViewWithPage:PageAfterCurrentPage];
  
  for (NSInteger p = PageAfterCurrentPage; p &lt; _pageViews.count; p++)
  {
      [self PurgePage:p];
  }
    }
  </code></pre>
  
  <ol>
  <li>The first 2 views in the scrollviews are larger than they are supposed to be even though i set their content mode to UIViewContentModeAspectFit.</li>
  <li>You cannot see the next page you are scrolling to until you are fully on that page i.e the view only appears when you are on that page</li>
  <li>The 3rd view is overlapping, it is on top on the 2nd view</li>
  <li>The 1st and the 2nd view shrink back to their normal sizes after you've scrolled past the 3rd view</li>
  <li>You can still scroll after the last view and if you scroll after that you get an NSRangeException saying "-[__NSArrayM objectAtIndex:]: index 6 beyond bounds [0 .. 5]"</li>
  </ol>
  
  <p>please help </p>