[iOS]通過UIScrollView和UIPageControl實現滑動切換的效果 – iPhone手機開發技術文章 iPhone軟體開發教學課程

UIPageControl是自帶的控件，可以查看官方文檔，下載官方示例學習。

如果對Xcode自帶的文檔不熟悉可以參見：蘋果Xcode幫助文檔閱讀指南

接下來是我學習筆記，使用Storyboard實現滑動切換的效果。

—————————————————————————–

新建一個項目，拖上一個UIScrollView和UIPageControl，並且建立關聯：

新建一個ContentViewController，作為頁面切換的內容視圖：

vcD48cD7Ssr7NysfLtaOstbG7rLavxsHEu8fQu7u1xMqxuvKjrMbkyrW+zcrHtuC49kNvbnRlbnRWaWV3Q29udHJvbGxlctTax9C7u6GjPC9wPjxwPjxiciAvPjwvcD48cD67+bG+veG5ucrHo7o8L3A+PHA+PGltZyBzcmM9″https://www.aiwalls.com/uploadfile/Collfiles/20140716/20140716085249107.png” alt=”\” />

在主頁面，我們首先初始化一些設置：

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    // 初始化page control的內容
    _contentList = [NSArray arrayWithObjects:@"1",@"2",@"3",@"4", nil];
    
    
    // 一共有多少頁
    NSUInteger numberPages = self.contentList.count;
    
    // 存儲所有的controller
    NSMutableArray *controllers = [[NSMutableArray alloc] init];
    for (NSUInteger i = 0; i < numberPages; i++)
    {
		[controllers addObject:[NSNull null]];
    }
    self.viewControllers = controllers;
    
    // 一個頁面的寬度就是scrollview的寬度
    self.myScrollView.pagingEnabled = YES;  // 自動滾動到subview的邊界
    self.myScrollView.contentSize =
    CGSizeMake(CGRectGetWidth(self.myScrollView.frame) * numberPages, CGRectGetHeight(self.myScrollView.frame));
    self.myScrollView.showsHorizontalScrollIndicator = NO;
    self.myScrollView.showsVerticalScrollIndicator = NO;
    self.myScrollView.scrollsToTop = NO;
    self.myScrollView.delegate = self;
    
    _numberOfPages = numberPages;
    _myPageControl.numberOfPages = numberPages;
    _currentPage = 0;
    
    
    [self loadScrollViewWithPage:0];
    [self loadScrollViewWithPage:1];
    
}

接下來，我們需要一個函數，來加載ContentView頁面上的元素：

// 加載ScrollView中的不同SubViewController
- (void)loadScrollViewWithPage:(NSUInteger)page
{
    if (page >= self.contentList.count)
        return;
    
    // replace the placeholder if necessary
    LContentViewController *controller = [self.viewControllers objectAtIndex:page];
    if ((NSNull *)controller == [NSNull null])
    {
        controller = [[LContentViewController alloc] init];
        [self.viewControllers replaceObjectAtIndex:page withObject:controller];
    }
    
    // add the controller's view to the scroll view
    if (controller.view.superview == nil)
    {
        CGRect frame = self.myScrollView.frame;
        frame.origin.x = CGRectGetWidth(frame) * page;
        frame.origin.y = 0;
        controller.view.frame = frame;
        [controller setLabel:[_contentList objectAtIndex:page]];
        [self.myScrollView addSubview:controller.view];
    }
}

然後先來處理一下PageControl的切換事件：

- (void)gotoPage:(BOOL)animated
{
    NSInteger page = self.myPageControl.currentPage;
    
    // load the visible page and the page on either side of it (to avoid flashes when the user starts scrolling)
    [self loadScrollViewWithPage:page - 1];
    [self loadScrollViewWithPage:page];
    [self loadScrollViewWithPage:page + 1];
    
	// update the scroll view to the appropriate page
    CGRect bounds = self.myScrollView.bounds;
    bounds.origin.x = CGRectGetWidth(bounds) * page;
    bounds.origin.y = 0;
    [self.myScrollView scrollRectToVisible:bounds animated:animated];
}

// page control 選項修改監聽
- (IBAction)changePage:(id)sender
{
    [self gotoPage:YES];    // YES = animate
}

滑動ScrollView的事件監聽：

// 滑動結束的事件監聽
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // switch the indicator when more than 50% of the previous/next page is visible
    CGFloat pageWidth = CGRectGetWidth(self.myScrollView.frame);
    NSUInteger page = floor((self.myScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    self.myPageControl.currentPage = page;
    NSLog(@"當前頁面 = %d",page);
    // a possible optimization would be to unload the views+controllers which are no longer visible
    
    [self loadScrollViewWithPage:page - 1];
    [self loadScrollViewWithPage:page];
    [self loadScrollViewWithPage:page + 1];
}