iPhone开发笔记 (5) scrollView和pageControl的搭配使用

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

1、在viewDidLoad中添加如下代码

//定义scrollView scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 180)]; [scrollView setBackgroundColor:[UIColor blackColor]]; [scrollView setCanCancelContentTouches:NO]; scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite; scrollView.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview scrollView.scrollEnabled = YES; scrollView.pagingEnabled = YES; scrollView.delegate = self; scrollView.tag = 1; scrollView.showsHorizontalScrollIndicator = NO; //为scrollView添加手势 //代码来源：http://*.com/questions/5042194/how-to-detect-touch-on-uiimageview-inside-uiscrollview UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTapGestureCaptured:)]; singleTap.cancelsTouchesInView = NO; [scrollView addGestureRecognizer:singleTap]; //向scrollView中添加imageView NSUInteger i; for (i = 1; i <= kNumImages1; i++) { NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i]; UIImage *image = [UIImage imageNamed:imageName]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; //设置frame CGRect rect = imageView.frame; rect.size.height = kScrollObjHeight1; rect.size.width = kScrollObjWidth1; imageView.frame = rect; imageView.tag = i; [scrollView addSubview:imageView]; [imageView release]; } [self layoutScrollImages1]; //设置图片格式 [featureView addSubview:scrollView]; //将scrollView封装到featureView //定义pageControl pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 180, 320, 20)]; [pageControl setBackgroundColor:[UIColor blackColor]]; pageControl.currentPage = 0; pageControl.numberOfPages = kNumImages1; [featureView addSubview:pageControl]; //将pageControl封装到featureView //定义显示店铺信息的label featureLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 200, 320, 20)]; featureLabel.textAlignment = UITextAlignmentCenter; featureLabel.backgroundColor = [UIColor blackColor]; featureLabel.textColor = [UIColor whiteColor]; featureLabel.text = [array objectAtIndex:0]; [featureView addSubview:featureLabel]; //将label封装到featureView
2、还有下面的关于设置scrollView和pageControl的委托代码，以及用来设置scrollView分页的代码

//设置图片的格式 //代码来源：Apple官方例子Scrolling - (void)layoutScrollImages1 { UIImageView *view = nil; NSArray *subviews = [scrollView subviews]; // reposition all image subviews in a horizontal serial fashion CGFloat curXLoc = 0; for (view in subviews) { if ([view isKindOfClass:[UIImageView class]] && view.tag > 0) { CGRect frame = view.frame; frame.origin = CGPointMake(curXLoc, 0); view.frame = frame; curXLoc += (kScrollObjWidth1); } } // set the content size so it can be scrollable [scrollView setContentSize:CGSizeMake((kNumImages1 * kScrollObjWidth1), [scrollView bounds].size.height)]; } //UIScrollViewDelegate方法 - (void)scrollViewDidEndDecelerating:(UIScrollView *)sView { if (sView.tag == 1) { NSInteger index = fabs(sView.contentOffset.x) / sView.frame.size.width; //NSLog(@"%d",index); [pageControl setCurrentPage:index]; featureLabel.text = [array objectAtIndex:index]; } } //UIScrollView响应gesture的action - (void)singleTapGestureCaptured:(UITapGestureRecognizer *)gesture { CGPoint touchPoint=[gesture locationInView:scrollView]; NSInteger index = touchPoint.x/320; shopDetailView = [[ShopDetailViewController alloc] init]; [self.navigationController pushViewController:shopDetailView animated:YES]; [shopDetailView release]; }

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