1. 程式人生 > >使用UIScrollView和UIPageControl做一個能夠用手勢來切換圖片的效果

使用UIScrollView和UIPageControl做一個能夠用手勢來切換圖片的效果

file ide ole sed 圖片 self. ech wsh object

利用UIScrollView的滾動效果來實現,先上圖:

技術分享



實現過程是:在viewController裏先增加UIScrollView和UIPageControl:

-(void) loadView {
    [super loadView];
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320,480)];
    UIPageControl* pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 438, 320, 42)];
    self.scrollView = scrollView;
    self.pageControl = pageControl;
    self.pageControl.opaque = 1;
    [self.pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    
    [self.view addSubview:self.scrollView];
    [self.view addSubview:self.pageControl];

}


然後來初始化UIScrollView:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.contentList = [NSArray arrayWithObjects:@"1",@"2",@"3",@"4",@"5", nil];
    NSMutableArray* controllers = [[NSMutableArray alloc] init];
    for (unsigned i = 0 ; i < kNumberOfPages; i++) {
        [controllers addObject:[NSNull null]];
    }
    
    self.viewControllers = controllers;
    self.scrollView.pagingEnabled = YES;
    
    //contentSize是內容的寬度
    self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width*kNumberOfPages,
                                             self.scrollView.frame.size.height);

    
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.showsVerticalScrollIndicator = NO;
    self.scrollView.scrollsToTop = NO;
    self.scrollView.delegate = self;
    
    self.pageControl.numberOfPages = kNumberOfPages;
    self.pageControl.currentPage = 0;
    
    [self loadScrollViewWithPage:0];
    [self loadScrollViewWithPage:1];
    // Do any additional setup after loading the view.
}

//UserImageViewController裏僅僅有一個UIImageView
-(void) loadScrollViewWithPage:(int)page{
    if (page < 0) {
        return;
    }else if(page >= kNumberOfPages) {
        //do some thing,like jump to other screen
        
        CalendarViewExample* calendarView = [[CalendarViewExample alloc] init];
        [self presentViewController:calendarView animated:YES completion:^{}];
        return;
    }
    
    UserImageViewController* controller = [self.viewControllers objectAtIndex:page];
    if ((NSNull*)controller == [NSNull null]) {
        controller = [[UserImageViewController alloc] init];
        [self.viewControllers replaceObjectAtIndex:page withObject:controller];
    }
    
    if (controller.view.superview == nil) {
        CGRect frame = self.scrollView.frame;
        frame.origin.x = frame.size.width * page;
        frame.origin.y = 0;
        controller.view.frame = frame;
        [self.scrollView addSubview:controller.view];
        
        
        NSString* name =[self.contentList objectAtIndex:page];
        NSString *path = [[NSBundle mainBundle] pathForResource:name ofType:@"jpg"];
        controller.numberImage.image = [UIImage imageWithContentsOfFile:path];
       
        
    }
}


假設用手指來滾動的時候:

-(void) scrollViewDidScroll:(UIScrollView *)scrollView{
    if (pageControlUsed) {
        
        return;
    }
    
    CGFloat pageWidth = scrollView.frame.size.width;
    //page表示當前滾動哪一頁的標識
    int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth)+1;
    
    self.pageControl.currentPage = page;
    
    [self loadScrollViewWithPage:page-1];
    [self loadScrollViewWithPage:page];
    [self loadScrollViewWithPage:page+1];
    
}

-(void) scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {
    pageControlUsed = NO;
}

-(void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    pageControlUsed = NO;
}

然後假設切換到下一頁:

-(void) changePage:(id)sender{
    int page = self.pageControl.currentPage;
    NSLog(@"chanepage page=%d",page);
    
    [self loadScrollViewWithPage:page-1];
    [self loadScrollViewWithPage:page];
    
    
    CGRect frame = self.scrollView.frame;
    frame.origin.x = frame.size.width*page;
    frame.origin.y = 0;
    [self.scrollView scrollRectToVisible:frame animated:YES];
    
    pageControlUsed = YES;
}
代碼能夠在http://download.csdn.net/detail/baidu_nod/7547659下載


使用UIScrollView和UIPageControl做一個能夠用手勢來切換圖片的效果