UIScrollView,UIPageControl,UIImageView 實現圖片輪播的效果

上一篇博客介紹了如何將XCode創立的項目提交到Git版本控制,這次就直接做一個圖片輪播的展示demo，剛好可以把UIScrollView、UIPageControl、UIImageView這三個控件講解分析一下。先上效果，這樣比較直觀。

從圖中可以看到這個界面是由UIImageView 和 UITableView 組合而成。在這里UITableView的內容不作為本次講解的重點，如果對UITableView的使用有疑問的，可以留言給我。下面就進入正題，在頭文件創建幾個變量。

@interface ScrollImageViewController : UIViewController<UIScrollViewDelegate>
{
    BOOL isFromStart;
}

@property(nonatomic, strong)UIScrollView  *scrollView;      //聲明一個UIScrollView
@property(nonatomic, strong)UIPageControl *pageControl;     //聲明一個UIPageControl
@property(nonatomic, strong)NSArray  *arrayImages;          //存放圖片的數組
@property(nonatomic, strong)NSMutableArray *viewController; //存放UIViewController的可變數組
@end

下面在.m文件中創建這些聲明變量

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.arrayImages = [NSArray arrayWithObjects:[UIImage imageNamed:@"3201.jpg"],[UIImage imageNamed:@"3202.jpg"],[UIImage imageNamed:@"3203.jpg"],[UIImage imageNamed:@"3204.jpg"], nil];
    
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,ImageHeight)];
    [_scrollView setPagingEnabled:YES];
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.showsVerticalScrollIndicator = NO;
    [_scrollView setDelegate:self];
    [_scrollView setBackgroundColor:[UIColor lightGrayColor]];
    
    //ContentSize 這個屬性對於UIScrollView挺關鍵的，取決於是否滾動。
    [_scrollView setContentSize:CGSizeMake(CGRectGetWidth(self.view.frame) * [self.arrayImages count], ImageHeight)];
    [self.view addSubview:_scrollView];
    
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.scrollView.frame.size.height - 20, 320, 20)];
    [_pageControl setBackgroundColor:[UIColor blackColor]];
    
    _pageControl.currentPage = 0;
    _pageControl.numberOfPages = [self.arrayImages count];
    [_pageControl addTarget:self action:@selector(chagePage:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:_pageControl];
    
    _viewController = [[NSMutableArray alloc] init];
    
    for (NSInteger i = 0; i < [self.arrayImages count]; i++) {
        [_viewController addObject:[NSNull null]];
    }
    
    _timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(scrollPages) userInfo:nil repeats:YES];
    
    [self loadScrollViewPage:0];
    [self loadScrollViewPage:1];
    [self loadScrollViewPage:2];
    [self loadScrollViewPage:3];
}

下面是實現loadScrollViewPage的方法，因為這里用到了定時器的自動滾動，所以在viewDidLoad里面把所有的圖片都自動裝載進去了。

-(void)loadScrollViewPage:(NSInteger)page
{
    if (page >= self.arrayImages.count) {
        return;
    }
    
    UIViewController *imageViewController = [self.viewController objectAtIndex:page];
    if ((NSNull *)imageViewController == [NSNull null])
    {
        imageViewController = [[UIViewController alloc] init];
        [self.viewController replaceObjectAtIndex:page withObject:imageViewController];
    }
    
    if (imageViewController.view.superview == nil) {
        CGRect frame = self.scrollView.frame;
        frame.origin.x = CGRectGetWidth(frame) * page;
        frame.origin.y = 0;
        imageViewController.view.frame = frame;
        
        //[self addChildViewController:imageViewController];
        [self.scrollView addSubview:imageViewController.view];
        [imageViewController didMoveToParentViewController:self];
        
        [imageViewController.view setBackgroundColor:[UIColor colorWithPatternImage:(UIImage *)[self.arrayImages objectAtIndex:page]]];
    }
}

接下來的工作就是要實現UIScrollView的委托方法，實現橫向滾動來切換到下一圖片，以及UIPageControl 切換圖片的方法，先看看scrollViewDidEndDecelerating的方法聲明吧。

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    CGFloat pageWidth = CGRectGetWidth(self.scrollView.frame);
    NSInteger page = floor((self.scrollView.contentOffset.x -pageWidth/2)/pageWidth) +1;
    self.pageControl.currentPage = page;
    
    [self loadScrollViewPage:page-1];
    [self loadScrollViewPage:page];
    [self loadScrollViewPage:page+1];
}

然后就是UIPageControl的changePage 方法。

- (IBAction)changePage:(id)sender
{
    NSInteger page = self.pageControl.currentPage;
    
    [self loadScrollViewPage:page - 1];
    [self loadScrollViewPage:page];
    [self loadScrollViewPage:page + 1];
    
    CGRect bounds = self.scrollView.bounds;
    bounds.origin.x = CGRectGetWidth(bounds) * page;
    bounds.origin.y = 0;
    [self.scrollView scrollRectToVisible:bounds animated:YES];
}

最后的任務就是要完成在viewDidLoad里面對NSTimer聲明的切換圖片的方法。

-(void)scrollPages{
    ++self.pageControl.currentPage;
    CGFloat pageWidth = CGRectGetWidth(self.scrollView.frame);
    if (isFromStart) {
        [self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
        self.pageControl.currentPage = 0;
    }
    else
    {
        [self.scrollView setContentOffset:CGPointMake(pageWidth*self.pageControl.currentPage, self.scrollView.bounds.origin.y)];
        
    }
    if (_pageControl.currentPage == _pageControl.numberOfPages - 1) {
        isFromStart = YES;
    }
    else
    {
        isFromStart = NO;
    }
}

以上就是實現效果圖中所需要的代碼了。制作這個demo的時候參照了SDK里面的PageControl的代碼，然后自己動手加工完成的。

參考文獻：

https://developer.apple.com/library/ios/#samplecode/PageControl/Introduction/Intro.html