對(duì)于有些應(yīng)用，我們會(huì)想在iPhone和iPad這兩個(gè)平臺(tái)上運(yùn)行，但簡(jiǎn)單地把iPhone程序拿過(guò)來(lái)直接放在iPad上，那是不能運(yùn)行的。由于它們尺寸不同，應(yīng)用場(chǎng)景也不同，因此在導(dǎo)航模式上有比較大的差異，一些控件在展現(xiàn)方式上會(huì)有很多差別，所以iPad有一些特有的API。下面南昌APP開(kāi)發(fā)公司小編為你詳細(xì)講解。

1.概述

屏幕尺寸的不同導(dǎo)致了應(yīng)用場(chǎng)景的不同，應(yīng)用場(chǎng)景的不同直接導(dǎo)致了設(shè)計(jì)和開(kāi)發(fā)的不同。

1.1 應(yīng)用場(chǎng)景差異

作為iOS開(kāi)發(fā)者，我們應(yīng)該熟悉iPhone和iPad應(yīng)用的場(chǎng)景，然后才能開(kāi)發(fā)出好的應(yīng)用。iPhone是讓用戶(hù)一只手使用的設(shè)備，因此它適合在等車(chē)時(shí)拿出來(lái)看看天氣、收發(fā)郵件、看看周?chē)心男┿y行或者飯店，等等。而iPad是兩只手使用的設(shè)備，它不太適合處理iPhone用戶(hù)的場(chǎng)景。據(jù)調(diào)查，iPad多數(shù)用在家里，用來(lái)瀏覽網(wǎng)頁(yè)、收發(fā)電子郵件、看照片、看視頻、聽(tīng)音樂(lè)、玩電子游戲和看電子書(shū)等。作為平板電腦，它比筆記本電腦更輕便、更適合移動(dòng)使用。

基于應(yīng)用場(chǎng)景的不同，同樣一款應(yīng)用在iPhone和iPad上的功能選取和界面布局有著明顯的不同。有些應(yīng)用只能做成iPhone版本的，有些應(yīng)用只能做成iPad版本的。與iPhone用戶(hù)相比，iPad用戶(hù)更期待具有高保真的、藝術(shù)品般的、高品質(zhì)的應(yīng)用，而絕非簡(jiǎn)單地放大iPhone應(yīng)用的屏幕尺寸。

1.2 設(shè)計(jì)和開(kāi)發(fā)需注意的問(wèn)題

在設(shè)計(jì)和開(kāi)發(fā)時(shí)，需要注意的有如下幾個(gè)方面：API、導(dǎo)航模式和分層架構(gòu)設(shè)計(jì)。

1. API

iPhone和iPad都使用一個(gè)操作系統(tǒng)——iOS，因此，它們的API基本上是一樣的，但有一些是iPad專(zhuān)用的，比如UIPopoverController控制器UISplitViewController控制器，其中UIPopoverController控制器用于呈現(xiàn)“漂浮”類(lèi)型的視圖，UISplitViewController控制器用于將屏幕分欄。這兩個(gè)控制器在E-mail應(yīng)用中都用過(guò)。

2. 導(dǎo)航模式

在iPad中，平鋪導(dǎo)航模式和標(biāo)簽導(dǎo)航模式與iPhone基本一樣，但樹(shù)形結(jié)構(gòu)導(dǎo)航模式與iPhone差別比較大。下面我們以E-mail應(yīng)用為例介紹一下iPad的樹(shù)形結(jié)構(gòu)導(dǎo)航模式。

圖1-1是iPhone的E-mail應(yīng)用界面，它不支持橫屏，導(dǎo)航采用了樹(shù)形結(jié)構(gòu)導(dǎo)航模式，新郵件編輯采用模態(tài)視圖導(dǎo)航模式。

圖1-1 iPhone的E-mail應(yīng)用界面

iPad橫屏?xí)r，其E-mail應(yīng)用如圖1-2所示。對(duì)比可以發(fā)現(xiàn)，iPhone版導(dǎo)航分成兩個(gè)屏幕，而iPad版采用一個(gè)屏幕分成左右兩欄，左欄是用于導(dǎo)航的菜單，占用固定的320點(diǎn)，右欄是詳細(xì)內(nèi)容。

圖1-2 橫屏?xí)riPad的E-mail應(yīng)用界面

iPad豎屏?xí)r，其E-mail應(yīng)用如圖1-3所示，默認(rèn)只顯示詳細(xì)內(nèi)容。左邊的導(dǎo)航欄是隱藏的，需要時(shí)點(diǎn)擊左上角的“收件箱”按鈕，它會(huì)以Popover方式顯示出來(lái)。

圖1-3 豎屏?xí)riPad的E-mail應(yīng)用界面

此外，兩個(gè)設(shè)備上的模態(tài)視圖導(dǎo)航也是不同的。圖1-4是iPhone的模態(tài)視圖界面，默認(rèn)情況下會(huì)從屏幕下方滑出，占有整個(gè)屏幕。

圖1-4 iPhone模態(tài)視圖

圖1-5是iPad的橫屏模態(tài)視圖界面，默認(rèn)情況下會(huì)從屏幕下方滑出，顯示在屏幕中間。圖1-6是iPad的豎屏模態(tài)視圖界面，默認(rèn)情況下會(huì)從屏幕下方滑出，占有整個(gè)屏幕。

圖1-5 iPad的橫屏模態(tài)視圖

圖1-6 iPad的豎屏模態(tài)視圖

3. 分層架構(gòu)設(shè)計(jì)

如果一個(gè)應(yīng)用同時(shí)要開(kāi)發(fā)iPhone版和iPad版，需要怎么設(shè)計(jì)它呢? 軟件設(shè)計(jì)的基本原則是：代碼可復(fù)用性和可擴(kuò)展性。事實(shí)上，iPhone和iPad的區(qū)別在于表示層(或展示層)，其他層是一樣的。例如，你要做一個(gè)微博應(yīng)用，iPhone和iPad版本的差別只在于界面和導(dǎo)航的不同，而網(wǎng)絡(luò)通信和數(shù)據(jù)持久化應(yīng)該是一樣的，它們應(yīng)該封裝在一個(gè)層之中。因此，iOS應(yīng)用要考慮分層架構(gòu)設(shè)計(jì)問(wèn)題。

提示 :從軟件系統(tǒng)架構(gòu)上講，應(yīng)用系統(tǒng)可以“分層設(shè)計(jì)”，“層”是具有相似職責(zé)功能的一組類(lèi)的集合。例如，表示層是與用戶(hù)交互、展示信息、接收用戶(hù)請(qǐng)求的層，由一些UI類(lèi)組成。在iOS系統(tǒng)中，表示層由UIView及其子類(lèi)、UIViewController及其子類(lèi)等構(gòu)成。

iPad 專(zhuān)用 API

前面提到過(guò)，UIPopoverController控制器和UISplitViewController控制器是iPad專(zhuān)用的視圖控制類(lèi)。

2.1 UIPopoverController 控制器

UIPopoverController是iPad特有的類(lèi)，不能在iPhone上使用，它負(fù)責(zé)控制Popover視圖。Popover視圖是一種臨時(shí)視圖，它以“漂浮”的形式出現(xiàn)在視圖表面，如圖1-7所示。觸摸Popover視圖的外邊，則關(guān)閉視圖。

圖1-7 Popover視圖

由于Popover視圖不會(huì)占用全屏，而且有一個(gè)箭頭指向其他視圖或按鈕，所以Popover內(nèi)容視圖中也常常包含一些控件，類(lèi)似表單一樣。圖1-8是iPad中Safari瀏覽器的共享選項(xiàng)。

圖1-8 Safari瀏覽器的共享選項(xiàng)

iOS API提供UIPopoverController和UIPopoverControllerDelegate，但沒(méi)有提供與UIPopoverController對(duì)應(yīng)的視圖類(lèi)。UIPopoverController類(lèi)的常用方法和屬性如下所示。

(1)setContentViewController:animated:。設(shè)定內(nèi)容視圖大小的方法。

(2)presentPopoverFromRect:inView:permittedArrowDirections:animated:。指定一個(gè)矩形區(qū)域的位置作為錨點(diǎn)來(lái)呈現(xiàn)Popover視圖的方法。

(3)presentPopoverFromBarButtonItem:permittedArrowDirections:animated:。指定一個(gè)按鈕作為錨點(diǎn)來(lái)呈現(xiàn)Popover視圖的方法。

(4)dismissPopoverAnimated:。關(guān)閉Popover視圖的方法。

(5)popoverVisible。判斷Popover視圖是否可見(jiàn)。

(6)popoverArrowDirection。判斷Popover視圖箭頭的方向。

Popover視圖可以用故事板連線(xiàn)實(shí)現(xiàn)，也可以通過(guò)代碼實(shí)現(xiàn)。使用故事板實(shí)現(xiàn)時(shí)，不必編寫(xiě)任何代碼即可，而使用代碼實(shí)現(xiàn)比較靈活。

下面我們通過(guò)一個(gè)案例介紹一下Popover視圖的用法。在iPad界面的導(dǎo)航欄中，有左右兩個(gè)按鈕，如圖1-9所示，點(diǎn)擊左邊的Show按鈕，會(huì)彈出Popover視圖(其中可以設(shè)置打印機(jī)的相關(guān)項(xiàng))，這是一個(gè)Popover表單視圖，是通過(guò)故事板設(shè)定的，不用編寫(xiě)任何代碼。如圖1-10所示，點(diǎn)擊右邊的Coding Show按鈕，會(huì)彈出Popover視圖，這是一個(gè)選擇列表，通過(guò)代碼實(shí)現(xiàn)。

圖1-9 Popover視圖案例(點(diǎn)擊Show按鈕)

圖1-10 Popover視圖案例(點(diǎn)擊Coding Show按鈕)

采用Single View Application模板創(chuàng)建PopoverViewSample工程，其中Devices選擇iPad。打開(kāi)故事板文件，設(shè)計(jì)iPad界面。案例中iPad視圖上部是有導(dǎo)航欄的，我們可以將當(dāng)前視圖控制器嵌入到導(dǎo)航控制器中，也可以直接從對(duì)象庫(kù)中拖曳一個(gè)Navigation Bar (導(dǎo)航欄)到設(shè)計(jì)界面頂部(與視圖頂部距離為20點(diǎn)，這樣不會(huì)遮擋狀態(tài)欄)，然后再?gòu)膶?duì)象庫(kù)拖曳兩個(gè)Bar Button Item放到導(dǎo)航欄左右，設(shè)計(jì)樣式如圖1-11所示;然后，為右按鈕Coding Show定義動(dòng)作事件連線(xiàn)。

圖1-11 iPad主界面

從對(duì)象庫(kù)中拖曳一個(gè)新的Table View Controller，將其作為設(shè)置打印機(jī)的Popover視圖控制器。由于從對(duì)象庫(kù)拖曳進(jìn)來(lái)的視圖很大，我們需要重新設(shè)置它的大小。如圖1-12所示，選中視圖控制器，打開(kāi)其尺寸檢查器，在Simulated Size下拉列表中選擇Freeform，然后下面會(huì)出現(xiàn)Width和Height屬性，我們可以根據(jù)自己的情況設(shè)置視圖的高和寬。

圖1-12 用于設(shè)置打印機(jī)的Popover視圖

設(shè)置好大小之后，我們還需要設(shè)置Popover內(nèi)容視圖的大小。選擇Table View Controller，打開(kāi)其屬性檢查器，如圖1-13所示，在Content Size中選中Use Preferred Explicit Size選項(xiàng)。

圖1-13 設(shè)置Popover內(nèi)容視圖的大小

設(shè)置完成后，我們參考如圖1-14所示設(shè)計(jì)打印機(jī)視圖，它是一個(gè)靜態(tài)表視圖。

圖1-14 用于設(shè)置打印機(jī)的Popover視圖

再?gòu)膶?duì)象庫(kù)中拖曳一個(gè)新的Table View Controller，將其作為顏色選擇Popover視圖控制器，如圖1-15所示，它是一個(gè)動(dòng)態(tài)表視圖，接著用尺寸檢查器來(lái)調(diào)整它們的大小。然后需要設(shè)定它的Storyboard ID屬性為SelectViewController。

圖1-15 用于選擇顏色的Popover視圖

對(duì)于設(shè)置打印機(jī)的Popover視圖，我們不是通過(guò)代碼而是在故事板中設(shè)計(jì)的。選中故事板主界面中的左按鈕Show，按住control鍵拖曳設(shè)置打印機(jī)的Popover視圖，此時(shí)會(huì)彈出Segue菜單，如圖1-16所示，從中選擇popoverpresentation(這個(gè)選項(xiàng)是iPad特有的)。

圖1-16 Segue菜單

這時(shí)我們也可以先運(yùn)行一下，看看這樣不寫(xiě)一行代碼是否可以彈出如圖1-9所示的窗口。

對(duì)于選擇顏色的Popover視圖，我們通過(guò)代碼來(lái)實(shí)現(xiàn)。首先要為它創(chuàng)建一個(gè)控制器SelectViewController。

然后再看看ViewController的代碼，具體如下：

上述代碼中，第①行的poc是UIPopoverController類(lèi)型的屬性，它負(fù)責(zé)保存一個(gè)UIPopoverController對(duì)象。show:方法用于響應(yīng)右按鈕Coding Show的點(diǎn)擊事件。

第②行代碼進(jìn)行了if判斷，目的是防止多次實(shí)例化UIPopoverController。在if語(yǔ)句中，第③行代碼用于創(chuàng)建UINavigationController 對(duì)象，第④行代碼把這個(gè) UINavigationController 對(duì)象作為內(nèi)容視圖放入到UIPopoverController中，因此UIPopoverController的內(nèi)容視圖是UINavigationController對(duì)象，而不是SelectViewController對(duì)象。這樣做的目的是為Popover視圖添加標(biāo)題。沒(méi)有標(biāo)題的Popover視圖如圖1-17所示。

圖1-17 沒(méi)有標(biāo)題的Popover視圖

通常，構(gòu)建沒(méi)有標(biāo)題的Popover視圖的代碼如下，需要把SelectViewController直接作為UIPopoverController的內(nèi)容視圖就可以了：

SelectViewController是顏色選擇視圖控制器，它是一個(gè)動(dòng)態(tài)表視圖控制器，其代碼不再介紹。如果需要，讀者可以通過(guò)本書(shū)源代碼查看全部代碼。

從上面的實(shí)現(xiàn)過(guò)程可見(jiàn)， Popover 視圖實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單。 UIPopoverController 還有委托協(xié)議

UIPopoverControllerDelegate。委托協(xié)議UIPopoverControllerDelegate有如下兩個(gè)方法。popoverControllerShouldDismissPopover:。控制是否關(guān)閉Popover視圖。

popoverControllerDidDismissPopover:。關(guān)閉Popover視圖之后觸發(fā)。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。文章出自:南昌APP開(kāi)發(fā)公司-百恒網(wǎng)絡(luò)