// 平铺导航模式
/*
平铺导航模式是非常重要的导航模式,一般用于简单的扁平化信息浏览,扁平化信息是指这些信息之间没有从属的层次关系
平铺导航模式有两种:分屏导航和分页导航
分屏导航:主要涉及的控件有分屏控件(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 书脊在中间
*/
}
至此,分页导航已经介绍完毕,程序运行效果图如下: