UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果

从图中可以看到这个界面是由UIImageView 和 UITableView 组合而成。在这里UITableView的内容不作为本次讲解的重点，如果对UITableView的使用有疑问的，可以留言给我。下面就进入正题，在头文件创建几个变量。

1 @interface ScrollImageViewController : UIViewController<UIScrollViewDelegate>
2 {
3     BOOL isFromStart;
4 }
5
6 @property(nonatomic, strong)UIScrollView  *scrollView;      //声明一个UIScrollView
7 @property(nonatomic, strong)UIPageControl *pageControl;     //声明一个UIPageControl
8 @property(nonatomic, strong)NSArray  *arrayImages;          //存放图片的数组
9 @property(nonatomic, strong)NSMutableArray *viewController; //存放UIViewController的可变数组
10 @end

下面在.m文件中创建这些声明变量

1 - (void)viewDidLoad
2 {
3     [super viewDidLoad];
4     // Do any additional setup after loading the view.
5
6     self.arrayImages = [NSArray arrayWithObjects:[UIImage imageNamed:@"3201.jpg"],[UIImage imageNamed:@"3202.jpg"],[UIImage imageNamed:@"3203.jpg"],[UIImage imageNamed:@"3204.jpg"], nil];
7
8     _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,ImageHeight)];
9     [_scrollView setPagingEnabled:YES];
10     _scrollView.showsHorizontalScrollIndicator = NO;
11     _scrollView.showsVerticalScrollIndicator = NO;
12     [_scrollView setDelegate:self];
13     [_scrollView setBackgroundColor:[UIColor lightGrayColor]];
14
15     //ContentSize 这个属性对于UIScrollView挺关键的，取决于是否滚动。
16     [_scrollView setContentSize:CGSizeMake(CGRectGetWidth(self.view.frame) * [self.arrayImages count], ImageHeight)];
17     [self.view addSubview:_scrollView];
18
19     _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.scrollView.frame.size.height - 20, 320, 20)];
20     [_pageControl setBackgroundColor:[UIColor blackColor]];
21
22     _pageControl.currentPage = 0;
23     _pageControl.numberOfPages = [self.arrayImages count];
24     [_pageControl addTarget:self action:@selector(chagePage:) forControlEvents:UIControlEventValueChanged];
25     [self.view addSubview:_pageControl];
26
27     _viewController = [[NSMutableArray alloc] init];
28
29     for (NSInteger i = 0; i < [self.arrayImages count]; i++) {
30         [_viewController addObject:[NSNull null]];
31     }
32
33     _timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(scrollPages) userInfo:nil repeats:YES];
34
35     [self loadScrollViewPage:0];
36     [self loadScrollViewPage:1];
37     [self loadScrollViewPage:2];
38     [self loadScrollViewPage:3];
39 }

下面是实现loadScrollViewPage的方法，因为这里用到了定时器的自动滚动，所以在viewDidLoad里面把所有的图片都自动装载进去了。

1 -(void)loadScrollViewPage:(NSInteger)page
2 {
3     if (page >= self.arrayImages.count) {
4         return;
5     }
6
7     UIViewController *imageViewController = [self.viewController objectAtIndex:page];
8     if ((NSNull *)imageViewController == [NSNull null])
9     {
10         imageViewController = [[UIViewController alloc] init];
11         [self.viewController replaceObjectAtIndex:page withObject:imageViewController];
12     }
13
14     if (imageViewController.view.superview == nil) {
15         CGRect frame = self.scrollView.frame;
16         frame.origin.x = CGRectGetWidth(frame) * page;
17         frame.origin.y = 0;
18         imageViewController.view.frame = frame;
19
20         //[self addChildViewController:imageViewController];
21         [self.scrollView addSubview:imageViewController.view];
22         [imageViewController didMoveToParentViewController:self];
23
24         [imageViewController.view setBackgroundColor:[UIColor colorWithPatternImage:(UIImage *)[self.arrayImages objectAtIndex:page]]];
25     }
26 }

接下来的工作就是要实现UIScrollView的委托方法，实现横向滚动来切换到下一图片，以及UIPageControl 切换图片的方法，先看看scrollViewDidEndDecelerating的方法声明吧。

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

然后就是UIPageControl的changePage 方法。

1 - (IBAction)changePage:(id)sender
2 {
3     NSInteger page = self.pageControl.currentPage;
4
5     [self loadScrollViewPage:page - 1];
6     [self loadScrollViewPage:page];
7     [self loadScrollViewPage:page + 1];
8
9     CGRect bounds = self.scrollView.bounds;
10     bounds.origin.x = CGRectGetWidth(bounds) * page;
11     bounds.origin.y = 0;
12     [self.scrollView scrollRectToVisible:bounds animated:YES];
13 }

最后的任务就是要完成在viewDidLoad里面对NSTimer声明的切换图片的方法。

1 -(void)scrollPages{
2     ++self.pageControl.currentPage;
3     CGFloat pageWidth = CGRectGetWidth(self.scrollView.frame);
4     if (isFromStart) {
5         [self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
6         self.pageControl.currentPage = 0;
7     }
8     else
9     {
10         [self.scrollView setContentOffset:CGPointMake(pageWidth*self.pageControl.currentPage, self.scrollView.bounds.origin.y)];
11
12     }
13     if (_pageControl.currentPage == _pageControl.numberOfPages - 1) {
14         isFromStart = YES;
15     }
16     else
17     {
18         isFromStart = NO;
19     }
20 }