平铺导航——基于分屏导航的实现（IOS开发）

导航模式

－平铺导航：内容没有层次关系，其实就在一个主屏幕上，只是采用分屏分页控制器来导航，可以左右上下滑动屏幕查看内容。（如：系统自带的天气）

－标签导航：内容被分割几个功能模块，但这些功能实际上没有任何关系。通过标签管理。标签应用太多太多了。。。

－树形导航：有层次，从上到下细分为或者为包含的关系。（如：邮箱）

这几个经常组合起来一起使用。

这里主要讲平铺导航。

用到的控件为分屏控件（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