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 书脊在中间     */}

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