scrollView和pageControl的搭配使用

    效果图如上图所示，下面介绍一下scrollView和pageControl如何进行搭配使用。

   1、在viewDidLoad中添加如下代码

[plain]  view plain copy

1. //定义scrollView  
2.     scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 180)];  
3.     [scrollView setBackgroundColor:[UIColor blackColor]];  
4.     [scrollView setCanCancelContentTouches:NO];  
5.     scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;  
6.     scrollView.clipsToBounds = YES;     // default is NO, we want to restrict drawing within our scrollview  
7.     scrollView.scrollEnabled = YES;  
8.     scrollView.pagingEnabled = YES;  
9.     scrollView.delegate = self;  
10.     scrollView.tag = 1;  
11.     scrollView.showsHorizontalScrollIndicator = NO;  
12.       
13.     //为scrollView添加手势  
14.     //代码来源：http://stackoverflow.com/questions/5042194/how-to-detect-touch-on-uiimageview-inside-uiscrollview  
15.     UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTapGestureCaptured:)];  
16.     singleTap.cancelsTouchesInView = NO;   
17.     [scrollView addGestureRecognizer:singleTap];     
18.       
19.     //向scrollView中添加imageView  
20.     NSUInteger i;  
21.     for (i = 1; i <= kNumImages1; i++)  
22.     {  
23.         NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i];  
24.         UIImage *image = [UIImage imageNamed:imageName];  
25.         UIImageView *imageView = [[UIImageView alloc] initWithImage:image];  
26.           
27.         //设置frame  
28.         CGRect rect = imageView.frame;  
29.         rect.size.height = kScrollObjHeight1;  
30.         rect.size.width = kScrollObjWidth1;  
31.         imageView.frame = rect;  
32.         imageView.tag = i;    
33.         [scrollView addSubview:imageView];  
34.         [imageView release];  
35.     }  
36.       
37.     [self layoutScrollImages1]; //设置图片格式  
38.     [featureView addSubview:scrollView]; //将scrollView封装到featureView  
39.       
40.     //定义pageControl  
41.     pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 180, 320, 20)];  
42.     [pageControl setBackgroundColor:[UIColor blackColor]];  
43.     pageControl.currentPage = 0;  
44.     pageControl.numberOfPages = kNumImages1;  
45.     [featureView addSubview:pageControl]; //将pageControl封装到featureView  
46.       
47.     //定义显示店铺信息的label  
48.     featureLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 200, 320, 20)];  
49.     featureLabel.textAlignment = UITextAlignmentCenter;  
50.     featureLabel.backgroundColor = [UIColor blackColor];  
51.     featureLabel.textColor = [UIColor whiteColor];  
52.     featureLabel.text = [array objectAtIndex:0];  
53.     [featureView addSubview:featureLabel]; //将label封装到featureView  

2、还有下面的关于设置scrollView和pageControl的委托代码，以及用来设置scrollView分页的代码

[plain]  view plain copy

1. //设置图片的格式  
2. //代码来源：Apple官方例子Scrolling  
3. - (void)layoutScrollImages1  
4. {  
5.     UIImageView *view = nil;  
6.     NSArray *subviews = [scrollView subviews];  
7.       
8.     // reposition all image subviews in a horizontal serial fashion  
9.     CGFloat curXLoc = 0;  
10.     for (view in subviews)  
11.     {  
12.         if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)  
13.         {  
14.             CGRect frame = view.frame;  
15.             frame.origin = CGPointMake(curXLoc, 0);  
16.             view.frame = frame;  
17.               
18.             curXLoc += (kScrollObjWidth1);  
19.         }  
20.     }  
21.       
22.     // set the content size so it can be scrollable  
23.     [scrollView setContentSize:CGSizeMake((kNumImages1 * kScrollObjWidth1), [scrollView bounds].size.height)];  
24. }  
25.   
26.   
27. //UIScrollViewDelegate方法  
28. - (void)scrollViewDidEndDecelerating:(UIScrollView *)sView  
29. {  
30.     if (sView.tag == 1)   
31.     {  
32.         NSInteger index = fabs(sView.contentOffset.x) / sView.frame.size.width;  
33.         //NSLog(@"%d",index);  
34.         [pageControl setCurrentPage:index];  
35.         featureLabel.text = [array objectAtIndex:index];  
36.     }  
37. }  
38.   
39.   
40.   
41. //UIScrollView响应gesture的action  
42. - (void)singleTapGestureCaptured:(UITapGestureRecognizer *)gesture  
43. {   
44.     CGPoint touchPoint=[gesture locationInView:scrollView];  
45.     NSInteger index = touchPoint.x/320;  
46.     shopDetailView = [[ShopDetailViewController alloc] init];  
47.     [self.navigationController pushViewController:shopDetailView animated:YES];  
48.     [shopDetailView release];  
49.   
50. }  

这样就可以实现以下两个功能了：一是scrollView的滑动，二是scrollView下面的Label的文字可以随着scrollView中图片的变化而变化。一般应用的首页都会有一个推荐的功能，用UIScrollView和UIPageControl最好不过了。