平铺导航模式是非常重要的导航模式。一般用于简单的扁平化信息浏览或任务。扁平化信息是指这些信息之间没有从属的层次关系,如中国的城市中北京、上 海和哈尔滨之间是扁平化信息,而哈尔滨市与黑龙江省之间的关系是从属的层次关系,层次关系信息可以采用标签导航和树形结构导航。
从一个案例开始介绍平铺导航。如果我想为开发一个基于iPhone的“画廊”应用,目前只有3幅名画(左图是毕加索-哭泣、中图是达芬奇-蒙娜丽莎、右图是罗丹-思想者)收录到应用中。由于这3幅名画之间没有层次关系,他们之间是扁平的。
基于分屏导航实现
基于分屏导航是平铺导航模式的主要实现方式,主要涉及的控件有:分屏控件(UIPageControl)和ScrollView,分屏控件是iOS标准控件。
基 于分屏导航的手势有两种,一个是点击小点的左边(上边)或右边(下边)实现翻屏,另一个是用手在屏幕上滑动实现翻屏。屏幕的总数应该限制在20个 以内,超过20个分屏控件的小点就会溢出。事实上,如果一个应用超过10屏,此时使用基于分屏导航的平铺导航模式已经不是很方便了。
下面我 们采用基于分屏导航模式实现“画廊”应用。使用Single View Application模板创建一个名为PageControlNavigation的工程。将ScrollView和PageControl控件拖曳到 设计界面,将其摆放到合适的位置,通过属性将视图背景设置为黑色。
在Interface Builder中选中ScrollView控件,打开其属性检查器,设置Scrollers中的属性,此时该ScrollView控件不显示水平和垂直滚动条,但可以滚动也可以分屏。
在Interface Builder中选中PageControl控件,打开其属性检查器,设置Pages中“# of Pages”(总屏数)属性为3,Current(当前屏)属性为0。再打开尺寸检查器,修改Width(宽度)属性为200,将这个属性设置大一些是为 了便于手指点击。
最后,还需要为这两个控件定义输出口并连线,而且要为分屏控件控件定义响应屏幕变化事件的方法changePage:并连线。
完成之后,ViewController.h文件中增加的代码如下:
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView; @property (weak, nonatomic) IBOutlet UIPageControl *pageControl; - (IBAction)changePage:(id)sender;
下面设计3个视图,将3个View Controller视图控制器拖曳到MainStoryboard.storyboard的设计界面中,然后再并分别拖曳3个ImageView到3个不同视图上。
然后再分别修改3个ImageView的Image属性为名画的文件名。
设 置完成ImageView的Image属性后,再依次选中视图控制器,将Storyboard ID分别修改为page1、page2、page3。与模态视图的例子不同,我们不需要再创建视图控制器的子类。就本例而言,我们只需展示一些图片。如果 需要处理动作事件,则需要自定义视图控制器的子类。
设计完成后,我们看看程序代码ViewController.h:
#import <UIKit/UIKit.h> @interface ViewController : UIViewController <UIScrollViewDelegate> @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
由于需要响应UIScrollView的事件,我们在ViewController中实现了UIScrollViewDelegate协议。
下面我们看看ViewController.m中viewDidLoad方法的代码:
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width*3, self.scrollView.frame.size.height); self.scrollView.frame = self.view.frame; UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil]; 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); self.scrollView.delegate = self; [self.scrollView addSubview:self.page1]; [self.scrollView addSubview:self.page2]; [self.scrollView addSubview:self.page3]; }
该 方法主要进行控件初始化,由于需要计算各个控件的位置,代码比较多,但是基本上没什么难点。self.scrollView.delegate = self是把当前视图控制(UIScrollViewDelegate实现对象)分配给ScrollView控件,以便响应事件处理,其他事件是 scrollViewDidScroll:,其代码如下:
- (void) scrollViewDidScroll: (UIScrollView *) aScrollView { CGPoint offset = aScrollView.contentOffset; self.pageControl.currentPage = offset.x / 320.0f; }
当左右滑动屏幕,ScrollView控件滚动完成的时候,要计算和设定分屏控件的当前屏currentPage。当点击分屏控件时屏幕发生变化,此时触发changePage:方法,其代码如下:
- (IBAction)changePage:(id)sender { [UIView animateWithDuration:0.3f animations:^{ int whichPage = self.pageControl.currentPage; self.scrollView.contentOffset = CGPointMake(320.0f * whichPage, 0.0f); }]; }
在 上述代码中,我们根据分屏控件当前屏幕属性(currentPage)重新调整了ScrollView控件的偏移量,而且为了使屏幕变化产生动画 效果,使用了[UIView animateWithDuration:0.3f animations:^{ …}]代码,重新调整ScrollView控件偏移量。
运行代码,得到的效果
相关推荐
iOS开发------程序实现国际化Localizable - iPhone手机开发技术文章 - 红黑联盟1
资源名称:iOS开发视频教程资源目录:【】iOS开发视频教程-第01讲-iOS历史介绍【】iOS开发视频教程-第02讲-XCode安装【】iOS开发视频教程-第03讲-UIView_PPT【】iOS开发视频教程-第04讲-UILabel【】iOS开发视频教程-...
iOS开发进阶篇-成为iOS开发高手-源码
iOS开发进阶篇-成为一个iOS开发高手(PDF)
OS6开发指南视频-源码ppt:视图控制器与导航模式 通过本章的学习你已经可以判断你的应用是不是需要一个导航功能,并且知道在什么情况下选择平铺页面导航、标签导航、树形结构导航中的哪一种或者同时综合使用三种导航...
之前遇到的需求,ios上没有类似的实现。搞了好久在网上搜了很多资料都不能解决最后找到了一个c/c++的底层源码,才实现了最后整理了下上传了。是个ios的demo很详细你定能看懂的。运行在xcode环境下,关键算法的文件是...
对导航栏进行简单的封装 可以直接使用 并且可以设置不同模式(白天、夜间)下导航栏的颜色,图片
i>A开发 加载动画w牛顿摆的实现牛顿摆动画根据牛顿摆的原理,r间是l动得,只有p边在动p边运动是一q以这条线的j方位原点,长t半径,然后做半圆运动运动模式是先
iOS-CoreML-Yolo在Apple的CoreML框架上使用Tiny YOLO v1模型实现对象检测
《iOS 仿抖音 Object-C》是一个基于Objective-C语言编写的抖音仿制项目,旨在通过手写简化版Spring框架的方式,帮助读者深入了解iOS开发中关键原理。通过摘取整体框架中的核心逻辑,并简化代码实现过程,保留核心...
iOS-RAC-实际开发案例-登录注册
思科 cisco ios 镜像 C3640-JK.BIN 文件由多位CCIE水平人员测试使用后拷贝,dy下可用
唐巧的《iOS开发进阶》,希望对一些初级的程序员有用
第一部分介绍iOS 开发的常用工具,第二部分介绍iOS开发中的一些常见的实践经验,第三部分介绍iOS 开发中涉及的原理。 如果把成为iOS 开发高手的过程比作武侠小说中的修炼过程的话,工具、实践和理论的学习就分别对应...
一个简单的iOS分层开发采用Objective-C,基于MVCS和KVO
使用object-c开发的五子棋游戏,包含代码和文档。。。。。。。。。。。
iOS-Contacts-基于iOS 9以后的新框架Contacts的自定义分组实现
即滑动返回的时候导航栏也跟着一起返回,比如:网易新闻,网易云音乐,腾讯视频等等,于是通过查找一些资料及其他库的做法,自己也写了一个框架,可以让每一个控制器都拥有自己的导航栏,可以很方便的改变导航栏的...
4、【cocos2d-x IOS游戏开发-捕鱼达人4】基本游戏框架 资源引用页: 5、【cocos2d-x IOS游戏开发-捕鱼达人5】C++中函数代理与信号插槽机制 资源引用页: 6、【cocos2d-x IOS游戏开发-捕鱼达人6】实现开始菜单 资源...
代码案例包括:touchJSon,JSONKIT,原生JSON,SBJSON