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

1.概述

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

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

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

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

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

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

1. API

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

2. 導(dǎo)航模式

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

圖1-1是iPhone的E-mail應(yīng)用界面，它不支持橫屏，導(dǎo)航采用了樹形結(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所示。對比可以發(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)擊左上角的“收件箱”按鈕，它會以Popover方式顯示出來。

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

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

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

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

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

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

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

如果一個(gè)應(yīng)用同時(shí)要開發(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ì)問題。

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

iPad 專用 API

前面提到過，UIPopoverController控制器和UISplitViewController控制器是iPad專用的視圖控制類。

2.1 UIPopoverController 控制器

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

圖1-7 Popover視圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖1-11 iPad主界面

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

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

設(shè)置好大小之后，我們還需要設(shè)置Popover內(nèi)容視圖的大小。選擇Table View Controller，打開其屬性檢查器，如圖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è)新的Table View Controller，將其作為顏色選擇Popover視圖控制器，如圖1-15所示，它是一個(gè)動(dòng)態(tài)表視圖，接著用尺寸檢查器來調(diào)整它們的大小。然后需要設(shè)定它的Storyboard ID屬性為SelectViewController。

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

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

圖1-16 Segue菜單

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

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

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

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

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

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

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

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

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

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

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

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