你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> iPhone開發筆記 (5) scrollView和pageControl的搭配使用

iPhone開發筆記 (5) scrollView和pageControl的搭配使用

編輯:IOS開發綜合


    效果圖如上圖所示,下面介紹一下scrollView和pageControl如何進行搭配使用。

   1、在viewDidLoad中添加如下代碼
[plain] 
//定義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://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中添加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分頁的代碼
[plain]
//設置圖片的格式 
//代碼來源: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最好不過了。

 

 


 

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved