平鋪導航——基於分屏導航的實現（IOS開發）

標籤：ios   ios開發   objective-c   導航   分頁   

導航模式

－平鋪導航：內容沒有層次關係，其實就在一個主畫面上，只是採用分屏分頁控制器來導航，可以左右上下滑動螢幕查看內容。（如：系統內建的天氣）

－標籤導航：內容被分割幾個功能模組，但這些功能實際上沒有任何關係。通過標籤管理。標籤應用太多太多了。。。

－樹形導航：有層次，從上到下細分為或者為包含的關係。（如：郵箱）

這幾個經常組合起來一起使用。

這裡主要講平鋪導航。

用到的控制項為分屏控制項（UIPageControl）和滾動視圖控制項（ScrollView），在這個過程中我們可能確實建立了許多View Controller的視圖控制器，但是實際上並不屬於任何子類，只是為了讓我們幾個圖片有個地方放置。

這裡需要理解的是，這個app只有一個View，這個View包含了一個ScrollView，而這個ScrollView有好幾個屏那麼大，每個屏一張圖。我們在左右划動的時候就好像有好多個View一樣，但實際真正划動的是巨大的ScrollView。

#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UIScrollViewAccessibilityDelegate>@property (strong, nonatomic) UIView *page1;@property (strong, nonatomic) UIView *page2;@property (strong, nonatomic) UIView *page3;@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;- (IBAction)changePage:(id)sender;@end

#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width*3, self.scrollView.frame.size.height);    self.scrollView.frame = self.view.frame;        // 建立SB的引用    UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];    //    // 下面的一段代碼是為了擷取項目中制定檔案名稱的ViewController    // page1.page2.page3在h中時連不上熱點的，因為從這個角度來看他們更像是屬性    // contentsize是內容大小，而frame是視窗大小    UIViewController* page1ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"];    self.page1 = page1ViewController.view;    self.page1.frame = CGRectMake(0.0f, 0.0f, 320.0f, 420.0f);            UIViewController* page2ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page2"];    self.page2 = page2ViewController.view;    self.page2.frame = CGRectMake(320.0f, 0.0f, 320.0f, 420.0f);        UIViewController* page3ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page3"];    self.page3 = page3ViewController.view;    self.page3.frame = CGRectMake(2 * 320.0f, 0.0f, 320.0f, 420.0f);        // 需要實現UIScrollViewDelegate協議    self.scrollView.delegate = self;        [self.scrollView addSubview:self.page1];    [self.scrollView addSubview:self.page2];    [self.scrollView addSubview:self.page3];}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}// 每次劃屏後，需要計算和設定分屏空間的當前屏currentPage- (void) scrollViewDidScroll:(UIScrollView *)aScrollView{    // offset為內容大小    CGPoint offset = aScrollView.contentOffset;    self.pageControl.currentPage = offset.x / 320.0f; // 返回當前是第幾頁}// 這是為了產生動畫效果- (IBAction)changePage:(id)sender {    [UIView animateWithDuration:0.3f animations:^{        int whichPage = self.pageControl.currentPage;        self.scrollView.contentOffset = CGPointMake(320.0f*whichPage, 0.0f);    }];}@end

平鋪導航——基於分屏導航的實現（IOS開發）