十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

iPhone与iPad应用开发的差异

百恒网络 2017-05-11 213

对于有些应用,我们会想在iPhone和iPad这两个平台上运行,但简单地把iPhone程序拿过来直接放在iPad上,那是不能运行的。由于它们尺寸不同,应用场景也不同,因此在导航模式上有比较大的差异,一些控件在展现方式上会有很多差别,所以iPad有一些特有的API。下面南昌APP开发公司小编为你详细讲解。

1.概述

屏幕尺寸的不同导致了应用场景的不同,应用场景的不同直接导致了设计和开发的不同。

1.1 应用场景差异

作为iOS开发者,我们应该熟悉iPhone和iPad应用的场景,然后才能开发出好的应用。iPhone是让用户一只手使用的设备,因此它适合在等车时拿出来看看天气、收发邮件、看看周围有哪些银行或者饭店,等等。而iPad是两只手使用的设备,它不太适合处理iPhone用户的场景。据调查,iPad多数用在家里,用来浏览网页、收发电子邮件、看照片、看视频、听音乐、玩电子游戏和看电子书等。作为平板电脑,它比笔记本电脑更轻便、更适合移动使用。

基于应用场景的不同,同样一款应用在iPhone和iPad上的功能选取和界面布局有着明显的不同。有些应用只能做成iPhone版本的,有些应用只能做成iPad版本的。与iPhone用户相比,iPad用户更期待具有高保真的、艺术品般的、高品质的应用,而绝非简单地放大iPhone应用的屏幕尺寸。

1.2 设计和开发需注意的问题

在设计和开发时,需要注意的有如下几个方面:API、导航模式和分层架构设计。

1. API

iPhone和iPad都使用一个操作系统——iOS,因此,它们的API基本上是一样的,但有一些是iPad专用的,比如UIPopoverController控制器UISplitViewController控制器,其中UIPopoverController控制器用于呈现“漂浮”类型的视图,UISplitViewController控制器用于将屏幕分栏。这两个控制器在E-mail应用中都用过。

2. 导航模式

在iPad中,平铺导航模式和标签导航模式与iPhone基本一样,但树形结构导航模式与iPhone差别比较大。下面我们以E-mail应用为例介绍一下iPad的树形结构导航模式。

图1-1是iPhone的E-mail应用界面,它不支持横屏,导航采用了树形结构导航模式,新邮件编辑采用模态视图导航模式。

iPhone的E-mail应用界面

图1-1 iPhone的E-mail应用界面

iPad横屏时,其E-mail应用如图1-2所示。对比可以发现,iPhone版导航分成两个屏幕,而iPad版采用一个屏幕分成左右两栏,左栏是用于导航的菜单,占用固定的320点,右栏是详细内容。

横屏时iPad的E-mail应用界面

图1-2 横屏时iPad的E-mail应用界面

iPad竖屏时,其E-mail应用如图1-3所示,默认只显示详细内容。左边的导航栏是隐藏的,需要时点击左上角的“收件箱”按钮,它会以Popover方式显示出来。

竖屏时iPad的E-mail应用界面

图1-3 竖屏时iPad的E-mail应用界面

此外,两个设备上的模态视图导航也是不同的。图1-4是iPhone的模态视图界面,默认情况下会从屏幕下方滑出,占有整个屏幕。

iPhone模态视图

图1-4 iPhone模态视图

图1-5是iPad的横屏模态视图界面,默认情况下会从屏幕下方滑出,显示在屏幕中间。图1-6是iPad的竖屏模态视图界面,默认情况下会从屏幕下方滑出,占有整个屏幕。

iPad的横屏模态视图

图1-5 iPad的横屏模态视图

iPad的竖屏模态视图

图1-6 iPad的竖屏模态视图

3. 分层架构设计

如果一个应用同时要开发iPhone版和iPad版,需要怎么设计它呢? 软件设计的基本原则是:代码可复用性和可扩展性。事实上,iPhone和iPad的区别在于表示层(或展示层),其他层是一样的。例如,你要做一个微博应用,iPhone和iPad版本的差别只在于界面和导航的不同,而网络通信和数据持久化应该是一样的,它们应该封装在一个层之中。因此,iOS应用要考虑分层架构设计问题。

提示 :从软件系统架构上讲,应用系统可以“分层设计”,“层”是具有相似职责功能的一组类的集合。例如,表示层是与用户交互、展示信息、接收用户请求的层,由一些UI类组成。在iOS系统中,表示层由UIView及其子类、UIViewController及其子类等构成。

iPad 专用 API

前面提到过,UIPopoverController控制器和UISplitViewController控制器是iPad专用的视图控制类。

2.1 UIPopoverController 控制器

UIPopoverController是iPad特有的类,不能在iPhone上使用,它负责控制Popover视图。Popover视图是一种临时视图,它以“漂浮”的形式出现在视图表面,如图1-7所示。触摸Popover视图的外边,则关闭视图。

Popover视图

图1-7 Popover视图

由于Popover视图不会占用全屏,而且有一个箭头指向其他视图或按钮,所以Popover内容视图中也常常包含一些控件,类似表单一样。图1-8是iPad中Safari浏览器的共享选项。

Safari浏览器的共享选项

图1-8 Safari浏览器的共享选项

iOS API提供UIPopoverController和UIPopoverControllerDelegate,但没有提供与UIPopoverController对应的视图类。UIPopoverController类的常用方法和属性如下所示。

(1)setContentViewController:animated:。设定内容视图大小的方法。

(2)presentPopoverFromRect:inView:permittedArrowDirections:animated:。指定一个矩形区域的位置作为锚点来呈现Popover视图的方法。

(3)presentPopoverFromBarButtonItem:permittedArrowDirections:animated:。指定一个按钮作为锚点来呈现Popover视图的方法。

(4)dismissPopoverAnimated:。关闭Popover视图的方法。

(5)popoverVisible。判断Popover视图是否可见。

(6)popoverArrowDirection。判断Popover视图箭头的方向。

Popover视图可以用故事板连线实现,也可以通过代码实现。使用故事板实现时,不必编写任何代码即可,而使用代码实现比较灵活。

下面我们通过一个案例介绍一下Popover视图的用法。在iPad界面的导航栏中,有左右两个按钮,如图1-9所示,点击左边的Show按钮,会弹出Popover视图(其中可以设置打印机的相关项),这是一个Popover表单视图,是通过故事板设定的,不用编写任何代码。如图1-10所示,点击右边的Coding Show按钮,会弹出Popover视图,这是一个选择列表,通过代码实现。

Popover视图案例(点击Show按钮)

图1-9 Popover视图案例(点击Show按钮)

Popover视图案例(点击Coding Show按钮)

图1-10 Popover视图案例(点击Coding Show按钮)

采用Single View Application模板创建PopoverViewSample工程,其中Devices选择iPad。打开故事板文件,设计iPad界面。案例中iPad视图上部是有导航栏的,我们可以将当前视图控制器嵌入到导航控制器中,也可以直接从对象库中拖曳一个Navigation Bar (导航栏)到设计界面顶部(与视图顶部距离为20点,这样不会遮挡状态栏),然后再从对象库拖曳两个Bar Button Item放到导航栏左右,设计样式如图1-11所示;然后,为右按钮Coding Show定义动作事件连线。

iPad主界面

图1-11 iPad主界面

从对象库中拖曳一个新的Table View Controller,将其作为设置打印机的Popover视图控制器。由于从对象库拖曳进来的视图很大,我们需要重新设置它的大小。如图1-12所示,选中视图控制器,打开其尺寸检查器,在Simulated Size下拉列表中选择Freeform,然后下面会出现Width和Height属性,我们可以根据自己的情况设置视图的高和宽。

用于设置打印机的Popover视图

图1-12 用于设置打印机的Popover视图

设置好大小之后,我们还需要设置Popover内容视图的大小。选择Table View Controller,打开其属性检查器,如图1-13所示,在Content Size中选中Use Preferred Explicit Size选项。

设置Popover内容视图的大小

图1-13 设置Popover内容视图的大小

设置完成后,我们参考如图1-14所示设计打印机视图,它是一个静态表视图。

用于设置打印机的Popover视图

图1-14 用于设置打印机的Popover视图

再从对象库中拖曳一个新的Table View Controller,将其作为颜色选择Popover视图控制器,如图1-15所示,它是一个动态表视图,接着用尺寸检查器来调整它们的大小。然后需要设定它的Storyboard ID属性为SelectViewController。

用于选择颜色的Popover视图

图1-15 用于选择颜色的Popover视图

对于设置打印机的Popover视图,我们不是通过代码而是在故事板中设计的。选中故事板主界面中的左按钮Show,按住control键拖曳设置打印机的Popover视图,此时会弹出Segue菜单,如图1-16所示,从中选择popoverpresentation(这个选项是iPad特有的)。

Segue菜单

图1-16 Segue菜单

这时我们也可以先运行一下,看看这样不写一行代码是否可以弹出如图1-9所示的窗口。

对于选择颜色的Popover视图,我们通过代码来实现。首先要为它创建一个控制器SelectViewController。

然后再看看ViewController的代码,具体如下:

ViewController代码一

ViewController代码二

ViewController代码三

ViewController代码四

上述代码中,第①行的poc是UIPopoverController类型的属性,它负责保存一个UIPopoverController对象。show:方法用于响应右按钮Coding Show的点击事件。

第②行代码进行了if判断,目的是防止多次实例化UIPopoverController。在if语句中,第③行代码用于创建UINavigationController 对象,第④行代码把这个 UINavigationController 对象作为内容视图放入到UIPopoverController中,因此UIPopoverController的内容视图是UINavigationController对象,而不是SelectViewController对象。这样做的目的是为Popover视图添加标题。没有标题的Popover视图如图1-17所示。

没有标题的Popover视图

图1-17 没有标题的Popover视图

通常,构建没有标题的Popover视图的代码如下,需要把SelectViewController直接作为UIPopoverController的内容视图就可以了:

UIPopoverController的内容视图

SelectViewController是颜色选择视图控制器,它是一个动态表视图控制器,其代码不再介绍。如果需要,读者可以通过本书源代码查看全部代码。

从上面的实现过程可见, Popover 视图实现起来比较简单。 UIPopoverController 还有委托协议

UIPopoverControllerDelegate。委托协议UIPopoverControllerDelegate有如下两个方法。popoverControllerShouldDismissPopover:。控制是否关闭Popover视图。

popoverControllerDidDismissPopover:。关闭Popover视图之后触发。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。文章出自:南昌APP开发公司-百恒网络


400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×