[iOS]通過UIScrollView和UIPageControl實現滑動切換的效果

標籤：blog   http   使用   os   width   2014   

UIPageControl是內建的控制項，可以查看官方文檔，下載官方樣本學習。

如果對Xcode內建的文檔不熟悉可以參見：蘋果Xcode協助文檔閱讀指南

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

-----------------------------------------------------------------------------

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

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

也就是說，當滑動螢幕切換的時候，其實就是多個ContentViewController在切換。

基本結構是：

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

- (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];}