ios-使用平铺导航模式

// 平铺导航模式

/*

 平铺导航模式是非常重要的导航模式，一般用于简单的扁平化信息浏览，扁平化信息是指这些信息之间没有从属的层次关系

 平铺导航模式有两种：分屏导航和分页导航

 分屏导航：主要涉及的控件有分屏控件(UIPageControl)和滚动视图(UIScrollView)

 分页导航：主要涉及的控件有分屏控件(UIPageViewControl)

 */

分屏导航实际运用：

- (void)initUI
{
    // 初始化UIScrollView
    scrView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 423)];
    scrView.backgroundColor = [UIColor clearColor];
    scrView.contentSize = CGSizeMake(scrView.frame.size.width*3, scrView.frame.size.height);
    scrView.delegate = self;
    scrView.showsHorizontalScrollIndicator = NO;
    scrView.showsVerticalScrollIndicator = NO;
    [self.view addSubview:scrView];
    [scrView release];
    
    // 初始化UIPageControl
    pageCtl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 423, 320, 37)];
    pageCtl.backgroundColor = [UIColor blackColor];
    pageCtl.numberOfPages = 3;
    pageCtl.currentPage = 0;
    pageCtl.currentPageIndicatorTintColor = [UIColor greenColor];
    [pageCtl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:pageCtl];
    [pageCtl release];
    
    // 初始化控制器
    UIViewController *pageController1 = [[UIViewController alloc] init];
    pageController1.view.frame = CGRectMake(0, 0, 320, 423);
    
    UIImageView *imgView1 = [[UIImageView alloc] init];
    imgView1.frame = CGRectMake(0, 0, pageController1.view.frame.size.width, pageController1.view.frame.size.height);
    imgView1.backgroundColor = [UIColor clearColor];
    imgView1.image = [UIImage imageNamed:@"111.png"];
    [pageController1.view addSubview:imgView1];
    [imgView1 release];
    
    UIViewController *pageController2 = [[UIViewController alloc] init];
    pageController2.view.frame = CGRectMake(320, 0, 320, 423);
    
    UIImageView *imgView2 = [[UIImageView alloc] init];
    imgView2.frame = CGRectMake(0, 0, pageController1.view.frame.size.width, pageController1.view.frame.size.height);
    imgView2.backgroundColor = [UIColor clearColor];
    imgView2.image = [UIImage imageNamed:@"222.png"];
    [pageController2.view addSubview:imgView2];
    [imgView2 release];
    
    UIViewController *pageController3 = [[UIViewController alloc] init];
    pageController3.view.frame = CGRectMake(2*320, 0, 320, 423);
    
    UIImageView *imgView3 = [[UIImageView alloc] init];
    imgView3.frame = CGRectMake(0, 0, pageController1.view.frame.size.width, pageController1.view.frame.size.height);
    imgView3.backgroundColor = [UIColor clearColor];
    imgView3.image = [UIImage imageNamed:@"333.png"];
    [pageController3.view addSubview:imgView3];
    [imgView3 release];
    
    [scrView addSubview:pageController1.view];
    [scrView addSubview:pageController2.view];
    [scrView addSubview:pageController3.view];

    [pageController1 release];
    [pageController2 release];
    [pageController3 release];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGPoint offSet = scrollView.contentOffset;
    pageCtl.currentPage = offSet.x / 320;
}

- (void)changePage:(id)sender
{
    [UIView animateWithDuration:0.3 animations:^{
        int whichPage = pageCtl.currentPage;
        scrView.contentOffset = CGPointMake(320*whichPage, 0.0);
    }];
}

至此，分屏导航介绍已经完毕，程序运行效果图如下：

      

分页导航实际运用：

- (void)initUI
{
    // 初始化UIPageControl
    pageViewCtl = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
    pageViewCtl.delegate = self;
    pageViewCtl.dataSource = self;
    [self.view addSubview:pageViewCtl.view];
    [pageCtl release];
    
    // 初始化视图控制器
    UIViewController *viewCtl = [UIViewController new];
    viewCtl.view.frame = CGRectMake(0, 0, 320, 423);
    viewCtl.view.backgroundColor = [UIColor clearColor];
    
    UIImageView *imgView = [[UIImageView alloc] init];
    imgView.frame = CGRectMake(0, 0, viewCtl.view.frame.size.width, viewCtl.view.frame.size.height);
    imgView.backgroundColor = [UIColor clearColor];
    NSString *strIdx = [NSString stringWithFormat:@"000.png"];
    imgView.image = [UIImage imageNamed:strIdx];
    [viewCtl.view addSubview:imgView];
    [imgView release];
    
    pageViewFirst = [NSArray arrayWithObjects:viewCtl, nil];
    
    [pageViewCtl setViewControllers:pageViewFirst direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:NULL];
    
    // 翻页效果
    /*
     UIPageViewControllerTransitionStylePageCurl 翻书效果模式
     UIPageViewControllerTransitionStyleScroll 滑屏效果模式
     */
    
    // 翻页方向
    /*
     UIPageViewControllerNavigationOrientationHorizontal 水平方向
     UIPageViewControllerNavigationOrientationVertical 垂直方向
     */
    
    // setViewControllers: direction: animated:YES completion:用于在首页显示的视图
}

#pragma mark - UIPageViewController DataSource
// 显示上一页
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController
{
    pageIndex --;
    if(pageIndex < 0)
    {
        pageIndex = 0;
        return nil;
    }
    
    UIViewController *viewCtl = [UIViewController new];
    viewCtl.view.frame = CGRectMake(0, 0, 320, 423);
    viewCtl.view.backgroundColor = [UIColor clearColor];
    
    UIImageView *imgView = [[UIImageView alloc] init];
    imgView.frame = CGRectMake(0, 0, viewCtl.view.frame.size.width, viewCtl.view.frame.size.height);
    imgView.backgroundColor = [UIColor clearColor];
    [viewCtl.view addSubview:imgView];
    [imgView release];
    
    NSString *strIdx = [NSString stringWithFormat:@"%03d.png",pageIndex];
    imgView.image = [UIImage imageNamed:strIdx];

    return viewCtl;
}

// 显示下一页
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController
{
    pageIndex ++;
    if(pageIndex > 2)
    {
        pageIndex = 2;
        return nil;
    }
    
    UIViewController *viewCtl = [UIViewController new];
    viewCtl.view.frame = CGRectMake(0, 0, 320, 423);
    viewCtl.view.backgroundColor = [UIColor clearColor];
    
    UIImageView *imgView = [[UIImageView alloc] init];
    imgView.frame = CGRectMake(0, 0, viewCtl.view.frame.size.width, viewCtl.view.frame.size.height);
    imgView.backgroundColor = [UIColor clearColor];
    NSString *strIdx = [NSString stringWithFormat:@"%03d.png",pageIndex];
    imgView.image = [UIImage imageNamed:strIdx];
    [viewCtl.view addSubview:imgView];
    [imgView release];

    return viewCtl;
}

#pragma mark - UIPageViewController Delegate
- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation
{
    pageViewController.doubleSided = NO;
    return UIPageViewControllerSpineLocationMin;
    
    // doubleSided 是否双面显示
    // UIPageViewControllerSpineLocation 书脊位置
    /*
     UIPageViewControllerSpineLocationMin 书脊在最左边
     UIPageViewControllerSpineLocationMid 书脊在最右边
     UIPageViewControllerSpineLocationMax 书脊在中间
     */
}

至此，分页导航已经介绍完毕，程序运行效果图如下：