天天看点

iOS开发那些事-平铺导航–基于分屏导航及案例实现

平铺导航模式是非常重要的导航模式。一般用于简单的扁平化信息浏览或任务。扁平化信息是指这些信息之间没有从属的层次关系,如中国的城市中北京、上 海和哈尔滨之间是扁平化信息,而哈尔滨市与黑龙江省之间的关系是从属的层次关系,层次关系信息可以采用标签导航和树形结构导航。

从一个案例开始介绍平铺导航。如果我想为开发一个基于iphone的“画廊”应用,目前只有3幅名画(左图是达芬奇-蒙娜丽莎、中图是罗丹-思想者、右图是毕加索-哭泣)收录到应用中。由于这3幅名画之间没有层次关系,他们之间是扁平的。

iOS开发那些事-平铺导航–基于分屏导航及案例实现

基于分屏导航实现

基于分屏导航是平铺导航模式的主要实现方式,主要涉及的控件有:分屏控件(uipagecontrol)和scrollview,分屏控件是ios标准控件。

基于分屏导航的手势有两种,一个是点击小点的左边(上边)或右边(下边)实现翻屏,另一个是用手在屏幕上滑动实现翻屏。屏幕的总数应该限制在20个 以内,超过20个分屏控件的小点就会溢出。事实上,如果一个应用超过10屏,此时使用基于分屏导航的平铺导航模式已经不是很方便了。

下面我们采用基于分屏导航模式实现“画廊”应用。使用single view application模板创建一个名为pagecontrolnavigation的工程。将scrollview和pagecontrol控件拖曳到 设计界面,将其摆放到合适的位置,通过属性将视图背景设置为黑色。

iOS开发那些事-平铺导航–基于分屏导航及案例实现

在interface builder中选中scrollview控件,打开其属性检查器,设置scrollers中的属性,此时该scrollview控件不显示水平和垂直滚动条,但可以滚动也可以分屏。

iOS开发那些事-平铺导航–基于分屏导航及案例实现

在interface builder中选中pagecontrol控件,打开其属性检查器,设置pages中“# of pages”(总屏数)属性为3,current(当前屏)属性为0。再打开尺寸检查器,修改width(宽度)属性为200,将这个属性设置大一些是为 了便于手指点击。

iOS开发那些事-平铺导航–基于分屏导航及案例实现

最后,还需要为这两个控件定义输出口并连线,而且要为分屏控件控件定义响应屏幕变化事件的方法changepage:并连线。

完成之后,viewcontroller.h文件中增加的代码如下:

下面设计3个视图,将3个view controller视图控制器拖曳到mainstoryboard.storyboard的设计界面中,然后再并分别拖曳3个imageview到3个不同视图上。

iOS开发那些事-平铺导航–基于分屏导航及案例实现

然后再分别修改3个imageview的image属性为名画的文件名。

iOS开发那些事-平铺导航–基于分屏导航及案例实现

设置完成imageview的image属性后,再依次选中视图控制器,将storyboard id分别修改为page1、page2、page3。与模态视图的例子不同,我们不需要再创建视图控制器的子类。就本例而言,我们只需展示一些图片。如果 需要处理动作事件,则需要自定义视图控制器的子类。

设计完成后,我们看看程序代码viewcontroller.h:

由于需要响应uiscrollview的事件,我们在viewcontroller中实现了uiscrollviewdelegate协议。

下面我们看看viewcontroller.m中viewdidload方法的代码:

该方法主要进行控件初始化,由于需要计算各个控件的位置,代码比较多,但是基本上没什么难点。self.scrollview.delegate = self是把当前视图控制(uiscrollviewdelegate实现对象)分配给scrollview控件,以便响应事件处理,其他事件是 scrollviewdidscroll:,其代码如下:

当左右滑动屏幕,scrollview控件滚动完成的时候,要计算和设定分屏控件的当前屏currentpage。当点击分屏控件时屏幕发生变化,此时触发changepage:方法,其代码如下:

在上述代码中,我们根据分屏控件当前屏幕属性(currentpage)重新调整了scrollview控件的偏移量,而且为了使屏幕变化产生动画 效果,使用了[uiview animatewithduration:0.3f animations:^{ …}]代码,重新调整scrollview控件偏移量。

运行代码,得到的效果

iOS开发那些事-平铺导航–基于分屏导航及案例实现