UIPageControl是自帶的控件,可以查看官方文檔,下載官方示例學習。
如果對Xcode自帶的文檔不熟悉可以參見:蘋果Xcode幫助文檔閱讀指南
接下來是我學習筆記,使用Storyboard實現滑動切換的效果。
-----------------------------------------------------------------------------
新建一個項目,拖上一個UIScrollView和UIPageControl,並且建立關聯:
新建一個ContentViewController,作為頁面切換的內容視圖:
<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD48cD7Ssr7NysfLtaOstbG7rLavxsHEu8fQu7u1xMqxuvKjrMbkyrW+zcrHtuC49kNvbnRlbnRWaWV3Q29udHJvbGxlctTax9C7u6GjPC9wPjxwPjxiciAvPjwvcD48cD67+bG+veG5ucrHo7o8L3A+PHA+PGltZyBzcmM9"/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]; } }
- (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 }
// 滑動結束的事件監聽 - (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]; }