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

来源:互联网 发布:社交网络界面设计 pdf 编辑:程序博客网 时间:2024/04/30 04:53



    效果图如上图所示,下面介绍一下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 scrollviewscrollView.scrollEnabled = YES;scrollView.pagingEnabled = YES;    scrollView.delegate = self;    scrollView.tag = 1;    scrollView.showsHorizontalScrollIndicator = NO;        //为scrollView添加手势    //代码来源:http://stackoverflow.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中添加imageViewNSUInteger 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];        //设置frameCGRect 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 fashionCGFloat 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最好不过了。








原创粉丝点击