4.2 內(nèi)容視圖
4.2.1 活動
每個活動表示一個系統(tǒng)提供的或自定義的服務(wù)——它可以通過訪問活動視圖控制器(Activity view controller)來作用于某些特定的內(nèi)容秉沼。
想要了解如何在代碼中定義活動,請參考UI Activity Class Reference.想要了解如何將活動視圖控制器整合到你的應(yīng)用中矿酵,請參考Activity View Controller.
動作與分享擴(kuò)展程序也可以在活動視圖控制器中展示唬复。想要了解更多關(guān)于這些擴(kuò)展程序的內(nèi)容,請參考Share and Action Extensions.
活動是:
一種可定制對象全肮,代表著某個可以讓用戶在app中執(zhí)行操作的服務(wù)
以圖標(biāo)的形式呈現(xiàn)敞咧,外觀與欄按鈕圖標(biāo)相似
用戶通過點擊活動的圖標(biāo)來啟動某樣活動。點擊之后該項服務(wù)通常會立刻執(zhí)行辜腺,當(dāng)這項服務(wù)過于復(fù)雜時休建,系統(tǒng)將會進(jìn)一步索取更多的信息之后才會為用戶執(zhí)行該服務(wù)。
使用活動來讓用戶執(zhí)行你的應(yīng)用所提供的服務(wù)评疗。請注意测砂,iOS本身提供了若干內(nèi)置的服務(wù),如打印百匆,轉(zhuǎn)發(fā)到Twitter砌些,發(fā)送信息和Airplay等等,你不需要再額外為這些內(nèi)置任務(wù)創(chuàng)建活動加匈。
為你應(yīng)用的各種服務(wù)設(shè)計一套精簡的線性模板圖標(biāo)(Template image)存璃。后臺會將會把這種模板圖標(biāo)作為剪影遮罩,組合成用戶最終看到的圖標(biāo)效果雕拼。想設(shè)計出好看的模版圖標(biāo)纵东,可以遵循以下原則:
使用透明度適當(dāng)?shù)暮谏虬咨?/p>
不要使用陰影
進(jìn)行抗鋸齒處理
一個活動模版圖大小應(yīng)該保持在70×70像素左右(高分辨率下),在區(qū)域里居中顯示啥寇。
為每一個活動設(shè)計清晰簡練的文字標(biāo)題偎球。標(biāo)題將會出現(xiàn)在活動菜單圖標(biāo)的下方洒扎。一般來說短標(biāo)題效果最好,因為它在屏幕上的顯示效果更好并且更容易本地化衰絮。如果你的標(biāo)題文字過長逊笆,iOS會將縮小文本,仍然過長的話則會被截斷岂傲。一般而言难裆,最好能避免在活動標(biāo)題中提及你的公司或產(chǎn)品名稱。
4.2.2 活動視圖控制器
活動視圖控制器是一個臨時視圖镊掖,當(dāng)中羅列了一系列可以針對頁面特定內(nèi)容的系統(tǒng)服務(wù)和定制服務(wù)乃戈。
想要了解如何在代碼中定義活動視圖控制器,請參考UIActivityView Class Reference.想要了解如何設(shè)計一個提供自定義服務(wù)的活動菜單亩进,請參閱上文中關(guān)于活動彩蛋的內(nèi)容症虑。
活動視圖控制器:
顯示了讓用戶可以針對當(dāng)前內(nèi)容執(zhí)行操作的一系列的可配置服務(wù)
根據(jù)所處的場景不同,可能出現(xiàn)在操作列表或浮出層中
使用活動視圖控制器來為用戶提供一系列針對當(dāng)前內(nèi)容的服務(wù)归薛。這些服務(wù)可以是系統(tǒng)自帶的押袍,比如復(fù)制火本,分享到twitter吓著,打印等等乳愉,也可以是自定義的∏г活動視圖控制器通常用作讓用戶把他們選中的內(nèi)容復(fù)制到他們的社交媒體賬戶上苫昌。
不要創(chuàng)建一個自定義按鈕來觸發(fā)活動視圖控制器。用戶更習(xí)慣點擊動作按鈕后使用系統(tǒng)提供的服務(wù)幸海。你應(yīng)該學(xué)會如何更好地利用用戶這一既定習(xí)慣祟身,而不是強(qiáng)迫他們以一種全新的方式來完成同樣的事情。
確蔽锒溃控制器中的操作適用于當(dāng)前場景袜硫。你可以適當(dāng)?shù)卦诨顒右晥D控制器中增減系統(tǒng)操作,或增加自定義操作挡篓。例如婉陷,如果你不希望用戶打印某張圖片,你可以把打印功能從控制器中刪除瞻凤。
你不能改變系統(tǒng)默認(rèn)服務(wù)在控制器中的順序憨攒。同時世杀,所有系統(tǒng)服務(wù)都應(yīng)該出現(xiàn)在自定義服務(wù)之前阀参。
4.2.3 集合視圖
集合視圖用于管理一系列有序的項,并以一種自定義的布局來呈現(xiàn)它們瞻坝。
想要了解如何在代碼中定義集合視圖蛛壳,請參考Collection View Programming Guide for iOS.
集合視圖:
可包含裝飾視圖杏瞻,以從視覺上區(qū)分項的子集或者提供裝飾性項目,例如自定義背景衙荐。
布局切換時支持自定義轉(zhuǎn)場動畫捞挥。(默認(rèn)情況下,當(dāng)用戶導(dǎo)入忧吟、移動或者刪除項的時候砌函,會出現(xiàn)系統(tǒng)默認(rèn)的動畫效果。)
支持開發(fā)者額外定義手勢識別來執(zhí)行自定義操作溜族。默認(rèn)情況下讹俊,集合視圖可以識別輕擊(tap)某項以選中,和長按(touch-and-hold)某項進(jìn)行編輯煌抒。
使用集合視圖來讓用戶查看和操作一系列不適合以列表形式呈現(xiàn)的項仍劈。由于集合視圖的布局不是一個嚴(yán)格的線性布局,因此尤其適合用來展示一些尺寸不一致的項寡壮。
集合視圖支持廣泛的自定義贩疙,因此我們要盡量避免把心思都放在進(jìn)行全新的設(shè)計上。集合視圖是用來幫助用戶更好地完成任務(wù)的况既,視圖本身并不是用戶體驗的焦點所在这溅。以下指南可以幫助你設(shè)計出用戶體驗更好的集合視圖:
表格視圖(table view)更適用的時候,不要使用集合視圖棒仍。有時候用戶會覺得以列表呈現(xiàn)的信息更容易閱讀和理解芍躏,例如將文本信息放在滾動列表中的時候,用戶閱讀和處理起來會更為簡單和高效降狠。
讓視圖中的項更容易選中对竣。如果用戶很難點中集合視圖中的項,他們是不會愿意用你的應(yīng)用的榜配。跟所有用戶可以點擊的UI對象一樣否纬,請確保你的集合視圖中每一個項的最小點擊區(qū)域有44×44pt,尤其是在iPhone上蛋褥。
當(dāng)你要讓整個布局進(jìn)行動態(tài)變化時临燃,請務(wù)必謹(jǐn)慎。集合視圖允許你在用戶瀏覽和操作項的時候調(diào)整視圖的布局烙心。但當(dāng)你決定調(diào)整它的時候膜廊,請確保這個動態(tài)變化是有意義且容易跟蹤的。沒有明確目的而貿(mào)然改變集合視圖的布局會讓用戶對應(yīng)用留下難用淫茵、不符合預(yù)期等負(fù)面的印象爪瓜。更有甚者,如果用戶此時關(guān)注的項在變化中消失了匙瘪,用戶會覺得這個應(yīng)用超出了他們的控制能力铆铆。
4.2.4 容器視圖控制器
容器視圖控制器采用自定義的方式來管理和呈現(xiàn)它的視圖控制器或一系列子視圖蝶缀。系統(tǒng)定義的容器視圖控制器典型例子包括標(biāo)簽欄視圖控制器(Tab bar view controller)、導(dǎo)航視圖控制器(navigation view controller)和對分視圖控制器(split view controller)薄货。
想要了解如何在代碼中定義容器視圖控制器翁都,請參考UIViewController Class Reference.
容器視圖控制器不存在任何預(yù)先定義好的外觀或者行為。
用容器視圖控制器來呈現(xiàn)內(nèi)容谅猾,使用戶可以通過控制器來以自定義的方式進(jìn)行導(dǎo)航柄慰。
先問問你自己是不是必須用到容器視圖控制器。用戶會更習(xí)慣諸如對分視圖税娜、或者是標(biāo)簽欄視圖這類他們所熟知的東西先煎。你必須確保你設(shè)計的控制器的優(yōu)點不會由于用戶不熟悉、不認(rèn)識巧涧、不會用而白費(fèi)功夫薯蝎。
確保你的容器內(nèi)容控制器在橫屏與豎屏模式都可用。很重要的一點是谤绳,你的容器視圖控制器無論在橫屏還是豎屏中占锯,體驗都應(yīng)該是一致的。
一般來說缩筛,避免太過花哨的轉(zhuǎn)場動畫消略。如果你采用了故事板(storyboard)的設(shè)計方法來設(shè)計你的視圖控制器,你往往自然而然地會為它自定義一些動畫瞎抛。但絕大多數(shù)情況下艺演,這些花哨的轉(zhuǎn)場動畫會讓用戶分心,讓他們忘記了當(dāng)前要做的事桐臊,還可能降低你的應(yīng)用整體的美感胎撤。
4.2.5 圖片視圖
圖片視圖用以展示一張單獨(dú)的圖片,或者一系列動態(tài)圖片断凶。
想要了解如何在代碼中定義圖片視圖伤提,請參考UIImageView.
圖片視圖:
不存在任何預(yù)先定義好的外觀,同時在默認(rèn)狀態(tài)下它不支持用戶的交互行為认烁。
可以檢測圖片本身及其父視圖(parent view)的屬性肿男,并決定這個圖片是否應(yīng)該被拉伸、縮放却嗡、調(diào)整到適合屏幕的大小舶沛,或者固定在一個特定的位置。
在iOS 7及以上版本里窗价,包含了模版圖片(template image)的圖片視圖會把當(dāng)前的色調(diào)(tint color)應(yīng)用到圖片上如庭。
請務(wù)必確保圖片視圖中的每一張圖片都保持相同的尺寸和比例。如果你的圖片尺寸各不相同舌镶,圖片視圖將會逐一對它們進(jìn)行調(diào)整柱彻;而當(dāng)你的圖片比例不一豪娜,渲染的時候很可能會出錯餐胀。
4.2.6 地圖視圖
地圖視圖呈現(xiàn)地理數(shù)據(jù)哟楷,同時支持系統(tǒng)內(nèi)置地圖應(yīng)用的大部分功能(如下圖所示)。
想要了解如何在代碼中定義圖片視圖否灾,請參考MapKit Framework Reference.
地圖視圖:
通常以標(biāo)準(zhǔn)地圖卖擅、衛(wèi)星圖像、或兩者結(jié)合的形式來展示地理區(qū)域
可以展示以單點標(biāo)注的備注墨技,以及疊加圖層(繪制路徑或二維區(qū)域繪制輪廓的)
支持編程時定義的惩阶,或用戶所控制的縮放和移動
利用地圖視圖可以給用戶提供一個可交互的地理區(qū)域視圖。如果你在開發(fā)一個導(dǎo)航類應(yīng)用(routing app)扣汪,可以使用地圖視圖來展示你給用戶的路徑断楷。
一般來說,允許用戶在視圖中進(jìn)行交互行為崭别。用戶習(xí)慣了在系統(tǒng)內(nèi)置地圖中進(jìn)行交互冬筒,因此他們會有預(yù)期,能在你所提供的地圖中進(jìn)行類似的行為茅主。
使用標(biāo)準(zhǔn)的地圖標(biāo)注顏色舞痰。地圖上標(biāo)注了一系列地點。因為用戶習(xí)慣了內(nèi)置地圖的各個標(biāo)注的顏色诀姚,所以最好避免在你的應(yīng)用中重新定義這些顏色的含義响牛。定義顏色時,請遵循以下這些標(biāo)準(zhǔn):
紅色表示目的地
綠色表示起點
紫色表示用戶指定的地點(User-Specified Point)
4.2.7 頁面視圖控制器
頁面視圖控制器通過滾動(Scrolling)或翻頁 (Page-curl transition style)兩種方式來處理長度超過一頁的內(nèi)容赫段。下圖是iOS模擬器中的翻頁樣式:
想要了解如何在代碼中定義圖片視圖呀打,請參考Page View Controllers.
頁面視圖控制器:
帶滾動條的頁面視圖控制器沒有默認(rèn)的外觀。
帶翻頁效果的控制器可以在兩頁中間增加書脊(book spine)的效果
可以根據(jù)指定的轉(zhuǎn)場來模擬出頁面切換時的動畫糯笙。
使用滾動條效果的時候聚磺,當(dāng)前頁面將滾動到下一頁;而使用翻頁效果時炬丸,頁面上會出現(xiàn)一個模擬實體書或筆記本翻頁效果的翻頁動畫
使用頁面視圖控制器來展示那些線性的內(nèi)容(比如一個故事的文本)瘫寝,或者是一些可以被自然地拆分成塊的內(nèi)容(比如日歷)。
如果需要的話稠炬,設(shè)計一種自定義的方式讓用戶可以以非線性的方式來獲取內(nèi)容焕阿。頁面視圖控制器讓用戶從一頁移動到前一頁或者后一頁,而并不支持用戶在并不相鄰的頁面間快速切換首启。如果你希望在頁面視圖控制器中展示一些非線性的內(nèi)容——比如說字典暮屡,或者書籍的目錄——那么你就需要自定義一種方式,讓用戶可以隨意地到達(dá)不同的內(nèi)容區(qū)塊毅桃。
4.2.8 浮出層
浮出層是當(dāng)用戶輕點某個控件或頁面中的某一區(qū)域時浮出的褒纲,半透明的臨時視圖准夷。
在iOS 8以及以上版本里,你可以使用UIPopoverPresentationController來展示一個浮出層莺掠。UIPopoverPresentationController定義了一種委托衫嵌,讓你可以調(diào)整浮出層的內(nèi)容樣式,讓它能夠更好地適應(yīng)當(dāng)前的屏幕內(nèi)容彻秆。舉個例子楔绞,在橫屏視圖中,你的內(nèi)容可能會全部承載在浮出層內(nèi)部唇兑;而在豎屏的情況下酒朵,浮出層可以以一種全屏模態(tài)視圖的樣式出現(xiàn)。
浮出層:
是一個自包含的模態(tài)視圖
在橫屏環(huán)境中扎附,浮出層會包含一個箭頭蔫耽,指向其出處
背景是半透明的,并且會模糊其背后的內(nèi)容(毛玻璃效果)
可以包含多種對象和視圖留夜,比如:
表格匙铡,圖片,地圖香伴,文本慰枕,網(wǎng)頁或者自定義視圖
導(dǎo)航欄,工具欄即纲,和標(biāo)簽欄
可以操作當(dāng)前app視圖中的對象的各種控件或?qū)ο?/p>
(默認(rèn)情況下具帮, 浮出層中的表格視圖,導(dǎo)航欄和工具欄的背景都是透明的低斋,這樣會讓浮出層的毛玻璃效果展示出來)
在橫屏的情況下蜂厅,動作列表總是出現(xiàn)在浮出層里。
使用浮出層來展示與當(dāng)前焦點或被選中對象相關(guān)的額外信息膊畴,或者相關(guān)的一系列項掘猿。
這一個部分的指引僅適用于在橫屏情況下的UI與用戶體驗。如果你想在豎屏環(huán)境中展示全屏的浮出層唇跨,請參閱下文中的模態(tài)視圖相關(guān)內(nèi)容稠通。
避免提供“取消浮出層”按鈕。浮出層應(yīng)當(dāng)在它不需要的時候自動關(guān)閉买猖。如果要決定什么時候不再需要浮出層改橘,請考慮如下場景:
一般來說,在用戶點擊浮出層以外的區(qū)域的時候玉控,保存用戶輸入的內(nèi)容飞主。不是每一個浮出層都會讓用戶明確地確認(rèn)取消操作,因此用戶可能會誤操作。只有當(dāng)用戶點擊“取消”按鈕時碌识,才清空他們在浮出層中輸入的內(nèi)容碾篡。
讓浮出層中的箭頭盡可能直接地指向其出處。這樣有助于用戶這個浮出層是從哪里來的筏餐,以及他們與哪些任務(wù)和對象相關(guān)开泽。
確保用戶在看不到浮出層背后的內(nèi)容的時候仍然能順利使用浮出層。浮出層會模糊背后的內(nèi)容而且用戶不能把它拖拽到其它位置胖烛。
確保同一時間內(nèi)屏幕上只有一個浮出層眼姐。你不應(yīng)該同時展示超過一個浮出層(或者外觀和行為跟浮出層很相似的模態(tài)視圖)诅迷。尤其應(yīng)當(dāng)避免同時展示一連串或者一系列浮出層佩番,從一個浮出層中彈出另一個浮出層。
不要在浮出層上面再展示一個模態(tài)視圖罢杉。除了告警框(alert)外趟畏,浮出層中不應(yīng)當(dāng)有任何模態(tài)視圖。
可能的話滩租,讓用戶可以僅點擊一下就關(guān)閉當(dāng)前浮出層并開啟一個新的浮出層赋秀。這在若干欄按鈕每個都會喚起一個浮出層的時候尤其好用,因為它減少了用戶的額外點擊律想。
不要把浮出層設(shè)計得太大猎莲。浮出層不應(yīng)當(dāng)占據(jù)整個屏幕。相反技即,它的大小應(yīng)當(dāng)恰好能承載當(dāng)中的內(nèi)容著洼,又能清楚地指向浮出層的喚起出處。浮出層的高度是不固定的而叼,因此你可以用它來承載一個很長的項目列表身笤。但一般來說,還是應(yīng)當(dāng)避免需要滾動浮出層才能開啟一個任務(wù)葵陵。請注意液荸,系統(tǒng)可能會調(diào)整浮出層的寬高,以讓它能夠更好地適應(yīng)屏幕的尺寸脱篙。
在浮出層中使用標(biāo)準(zhǔn)的UI控件和視圖娇钱。一般來說,包含標(biāo)準(zhǔn)控件和視圖的浮出層看上去最理想绊困,而且更容易讓用戶理解文搂。
確保自定義浮出層仍然長得像一個浮出層。盡管使用UIPopoverBackgroundViewAPI能夠很容易自定義浮出層的多種外觀屬性考抄,還是應(yīng)當(dāng)避免設(shè)計出一個用戶可能無法辨識的浮出層外觀细疚。如果你對浮出層的改動過大,用戶就不能憑借之前的經(jīng)驗來理解如何用你的app里的浮出層了。
當(dāng)浮出層可見的時候疯兼,想要改變它的尺寸的話請務(wù)必謹(jǐn)慎然遏。當(dāng)你要在浮出層里展示同樣信息的精簡或拓展視圖時,你可能需要改變浮出層的大小吧彪。當(dāng)你一定要這么做的時候待侵,使用轉(zhuǎn)場動畫往往是個好主意,因為這不會讓人覺得一個新的彈出窗口取代了原來的窗口姨裸。
4.2.9 滾動視圖(Scroll View)
滾動視圖方便用戶瀏覽尺寸超越滾動視圖邊界的圖片(下圖中地球的圖片無論是長度還是寬度都超過了)秧倾。
想要了解如何在代碼里定義滾動視圖,請參考UIScrollView.
滾動視圖:
沒有預(yù)定義的外觀
在剛出現(xiàn)或者當(dāng)用戶對它進(jìn)行操作的時候會短暫地閃爍
響應(yīng)速度和對各個操作手勢的識別都應(yīng)當(dāng)讓用戶感到自然傀缩。當(dāng)用戶在視圖中拖拽內(nèi)容那先,內(nèi)容隨之滾動;當(dāng)用戶輕掃屏幕時赡艰,內(nèi)容將快速滾動——直到用戶再次觸摸屏幕或內(nèi)容已經(jīng)到達(dá)底部時停止售淡。
可以應(yīng)用在頁模式(paging mode)中,在此模式下用戶可以通過拖拽和輕擊等手勢來瀏覽一頁的內(nèi)容
使用滾動視圖來允許用戶在固定的空間內(nèi)瀏覽大尺寸或大量的視圖慷垮。
適當(dāng)?shù)刂С挚s放操作揖闸。如果放大和縮小對于當(dāng)前內(nèi)容是有用的話,你可以支持用戶通過捏或者雙擊來對當(dāng)前視圖進(jìn)行縮放料身。而若是支持了縮放操作的話汤纸,你還應(yīng)當(dāng)根據(jù)用戶當(dāng)前的任務(wù)來設(shè)定在當(dāng)前情景下允許縮放的最大值和最小值。如果你允許一個字符被放大到充滿整個屏幕的話芹血,用戶會很難閱讀當(dāng)前內(nèi)容贮泞。
在頁模式滾動視圖中,可以考慮使用頁面控件(page control)祟牲。當(dāng)你想要展示分頁隙畜、分屏或者分塊的內(nèi)容,可以使用頁面控件來讓用戶知道當(dāng)前內(nèi)容一共有多少塊说贝,以及他們當(dāng)前瀏覽的是第幾個议惰。
當(dāng)你在滾動視圖中使用頁面控件的時候,最好禁用同一方向的滾動指示器(scroll indicator)乡恕。這樣一來可以讓用戶聚焦到頁碼控件上言询,并讓他們有了一種唯一且清晰的方式來瀏覽當(dāng)前內(nèi)容。想要了解更多傲宜,請參考下文控件中的頁面控件部分內(nèi)容运杭。
一般來說,一次只展示一個滾動視圖函卒。由于用戶滾動屏幕時動作幅度經(jīng)常都會很大辆憔,如果在一屏中同時存在不止一個滾動視圖,他們很容易會碰到另一個。如果你確實要在同屏中放兩個滾動視圖虱咧,可以考慮給他們設(shè)定不同的滾動方向熊榛,來避免用戶想要滾動一個視圖的時候誤操作。比如iPhone上的股票應(yīng)用腕巡,縱向滾動上半部分會展示股票報價玄坦,橫向滾動下半部分時則展示該公司的特定信息。
4.2.10 分欄視圖控制器
分欄視圖控制器是一個用于管理兩個相鄰視圖控制器顯示的全屏視圖控制器绘沉。
每一個對分視圖控制器的子視圖負(fù)責(zé)管理一個窗格的展現(xiàn)煎楣。對分視圖控制器本身負(fù)責(zé)展示這些子視圖控制器與管理不同屏幕方向下對分視圖的轉(zhuǎn)場效果。想要了解更多如何在代碼里定義對分視圖车伞,請參考UISplitViewController Class Reference和SplitControllers.
在iOS 7及之前的版本里择懂,對分視圖控制器僅適用于iPad.
默認(rèn)情況下,對分視圖控制器通過當(dāng)前的尺寸來管理其子視圖帖世。舉個例子休蟹,對分視圖:
可以在橫屏環(huán)境中展示并排展示兩個窗格
可以讓主窗格在詳情窗格上方顯示沸枯,也可以在不需要的時候(尤其是豎屏情況下)隱藏主窗格日矫。
你可以指定特殊的展示環(huán)境下對分視圖的版式,并且通過請求對分視圖控制器聚焦于這個版式绑榴,以此改變窗格的排列方式哪轿。
對分視圖控制器包含廣泛的對象和視圖,諸如:
表格翔怎,圖像窃诉,地圖,文本赤套,網(wǎng)絡(luò)飘痛,或自定義視圖
導(dǎo)航欄,工具欄容握,或標(biāo)簽欄
即使左側(cè)窗格通常被稱為主窗格宣脉,右側(cè)窗格被稱為詳情窗格,但在代碼中并沒有強(qiáng)制固定這種從屬關(guān)系剔氏。
使用對分視圖控制器塑猖,在左側(cè)主窗格展示固定的信息,在右側(cè)詳情窗格展示相關(guān)的詳情或從屬信息谈跛。以這種設(shè)計模式羊苟,當(dāng)用戶選擇類主視圖中的某一項,右側(cè)詳情窗格應(yīng)當(dāng)展示相應(yīng)與這一項相關(guān)的內(nèi)容感憾。(你應(yīng)當(dāng)在代碼中實現(xiàn)這個效果蜡励。)
避免創(chuàng)建一個比主窗格更窄的詳情窗格。如果右側(cè)詳情窗格比左側(cè)主窗格窄,對分視圖控制器將不能占滿整個屏幕凉倚,產(chǎn)生視覺不平衡的整體效果彭则。
避免在兩側(cè)窗格中都同時展示導(dǎo)航欄。這樣會讓用戶很難分清這兩個窗格的從屬關(guān)系占遥。
一般來說俯抖,始終顯示左側(cè)主窗格中當(dāng)前選中的項。盡管右側(cè)窗格中的內(nèi)容會變化瓦胎,但它應(yīng)當(dāng)始終保持著與當(dāng)前選中窗格的相關(guān)性芬萍。這樣的體驗有助于用戶理解左側(cè)窗格項與右側(cè)窗格內(nèi)容的關(guān)系。
合適的話搔啊,給用戶提供不止一種獲取主窗格的方式柬祠。默認(rèn)情況下,豎屏方向時只會展示右側(cè)窗格负芋,因此你需要向用戶提供一個按鈕(通常位于導(dǎo)航欄上)來讓用戶喚起和隱藏主窗格漫蛔。對分視圖控制器也支持輕掃手勢來執(zhí)行呼出和隱藏的動作。除非你的app有定義輕掃的手勢執(zhí)行其他功能旧蛾,否則你應(yīng)當(dāng)支持用戶輕掃以喚起左側(cè)窗格莽龟。
4.2.11 表格視圖
表格視圖以一個可滾動的單列多行的形式來展示數(shù)據(jù)。
想要了解如何在代碼中定義表格視圖锨天,請參考Tabel View Programming Guide for the iOS以及UITableView.
表格視圖:
以容易進(jìn)行分段或分組的單列形式展示數(shù)據(jù)
用戶可以通過點擊來選中某行毯盈,或通過控件來添加、移除病袄、多選搂赋、查看詳情或者展開另一個表格視圖
iOS定義了兩種表格樣式:
分組型(Grouped)。表格行以分組形式展示益缠,可以有頁眉和頁腳脑奠。分組表格視圖中至少含有一組列表,而每一組中至少包含一項內(nèi)容幅慌。與平鋪型不同宋欺,分組型表格沒有索引。
平鋪型(Plain)欠痴。平鋪型表格可被分為若干帶標(biāo)簽的段落迄靠,表格右側(cè)可能會出現(xiàn)垂直的表格索引。每行開頭可以有頁眉喇辽,尾部可以有頁腳(也可以沒有)掌挚。
在這兩種樣式中,當(dāng)用戶選中某一行時菩咨,該行會短暫地高亮吠式。當(dāng)選中某行將展開另外一屏內(nèi)容的時候陡厘,該行會短暫地高亮,然后新一屏內(nèi)容滑入特占。當(dāng)用戶回到前一屏?xí)r糙置,之前選中的那一行同樣會短暫地高亮,提醒用戶他們先前選中了什么(但并不會一直保持高亮)是目。
除了以上表格中列舉的元素外谤饭,iOS定義了刷新控件,讓用戶可以刷新當(dāng)前的表格內(nèi)容懊纳。想要了解更多關(guān)于刷新控件的用法揉抵,可以參考文檔本章第三節(jié)控件中的刷新控件。iOS提供了若干表格視圖元素(table-view elements)來擴(kuò)展表格視圖的功能嗤疯。除了特別標(biāo)明外冤今,這些元素只適用于表格視圖。
iOS定義了在平鋪型表格和分組型表格中最常用到的四種單元格布局樣式茂缚。每種單元格樣式都有最適合展示的信息類型戏罢。
從編程角度來說,這些樣式應(yīng)用于單元格中脚囊,用以控制表格里每一列的繪制方式龟糕。
默認(rèn)型(Default)(UITableViewCellStyleDefault)。默認(rèn)型樣式包括左側(cè)的圖標(biāo)(可選)凑术,和圖標(biāo)右邊左對齊的文字標(biāo)題翩蘸。
默認(rèn)型樣式適合展示一系列無須通過附加信息便可以區(qū)分的項。
副標(biāo)題型(Subtitled)(UITableViewCellStyleSubtitle)淮逊。副標(biāo)題型包括左側(cè)圖標(biāo)(可選),圖標(biāo)右邊左對齊展示的文字標(biāo)題扶踊,以及在標(biāo)題下方同樣左對齊展示的副標(biāo)題泄鹏。
左對齊的文本標(biāo)簽讓用戶可以更快速地掃視表格。這種樣式適用于列表各項較為相似的情況秧耗,用戶可以通過副標(biāo)題中的詳細(xì)信息來區(qū)分列表中的各項备籽。 (UITableViewCellStyleSubtitle)。副標(biāo)題型包括左側(cè)圖標(biāo)(可選)分井,圖標(biāo)右邊左對齊展示的文字標(biāo)題车猬,以及在標(biāo)題下方同樣左對齊展示的副標(biāo)題。
Value 1(UITableViewCellStyleValue1).在Value 1樣式下尺锚,標(biāo)題左對齊珠闰,副標(biāo)題用較細(xì)的字體右對齊。
Value 2(UITableViewCellStyleValue2).Value 2樣式藍(lán)色字體標(biāo)題右對齊瘫辩,黑色字體的副標(biāo)題左對齊伏嗜,混排在同一行中坛悉。這種樣式通常不包含圖片。
Value 2的布局中承绸,文本和副標(biāo)題中間的垂直間距會讓用戶專注于副標(biāo)題的第一個單詞裸影。
以上四種單元格樣式均支持添加表格視圖元素,如勾選或展開標(biāo)志军熏。添加這些元素會縮小標(biāo)題以及副標(biāo)題單元格的可用寬度轩猩。
使用表格視圖可以簡潔而高效地展示少量或者大量信息。舉例來說荡澎,你可以通過表格視圖來:
展示用戶可選的選項列表界轩。你可以使用選中標(biāo)記來告知用戶當(dāng)前選中了哪些項。
無論是平鋪型還是分組性衔瓮,用戶點擊某一行中的某一項時都可以顯示一個選項列表浊猾。當(dāng)用戶點選了一個不屬于表格行的按鈕或者其他UI元素的時候,可以使用平鋪型表格視圖來展示喚起的選項列表热鞍。
展示層級信息葫慎。平鋪型表格樣式非常適合展示層級信息。表格中的每項都指向承載于另一個列表中的不同子信息薇宠。用戶可以沿著這些層級結(jié)構(gòu)的路徑來點擊每一層列表中的項偷办。以展開標(biāo)志告知用戶點擊這一列中的任何位置,都將展開新的列表以展示其子類信息澄港。
展示可以在概念上進(jìn)行分組的信息椒涯。平鋪型和分組型列表都允許你通過提供頁眉和頁腳來對信息進(jìn)行分組和分段。
你可以用頁眉頁腳視圖(header-footer view)——即UITableViewHearderFooterView中的一個實例——來展示頁眉和頁腳的文字回梧,或圖片废岂。想要了解如何在代碼中定義頁眉頁腳視圖,請參考UITableViewHeaderFooterView Class Reference.
使用表格視圖時狱意,可遵循以下這些指引:
用戶選擇列表項時湖苞,始終給與反饋。當(dāng)用戶點擊可選的列表項時會認(rèn)為被點擊的項都應(yīng)短暫地高亮一下详囤。在點擊后财骨,用戶期望出現(xiàn)新的視圖,或者出現(xiàn)一個復(fù)選標(biāo)記以表明先前點擊的項已經(jīng)被選中或激活藏姐。
如果表格的內(nèi)容龐大而且復(fù)雜隆箩,不要在所有數(shù)據(jù)都加載完之后才一起顯示出來。可以首先展示文本信息羔杨,圖片等較為復(fù)雜的內(nèi)容則在加載完后再顯示捌臊。這樣可以將有用的信息立即傳達(dá)給用戶,同時也提高了應(yīng)用的響應(yīng)能力问畅。
在等待信息加載的時候娃属,可以考慮展示“過期”信息六荒。盡管我們并不推薦在數(shù)據(jù)頻繁變化的應(yīng)用中這樣做,它還是可以幫助更多的靜態(tài)應(yīng)用程序立即給到用戶有用的信息矾端。當(dāng)然在你這么做之前掏击,請認(rèn)真衡量你應(yīng)用中數(shù)據(jù)的變化頻率,并弄清楚你的目標(biāo)用戶有多需要立即獲取最新的信息秩铆。
如果信息加載速度很慢或者非常復(fù)雜砚亭,你需要告訴用戶加載正在進(jìn)行中。如果表格中所有內(nèi)容都很復(fù)雜殴玛,我們很難即時地給用戶展示任何內(nèi)容捅膘。在這種極端情況下,切勿顯示空白的表格滚粟,因為這會讓用戶以為應(yīng)用掛了寻仗。此時應(yīng)當(dāng)在屏幕中央展示一個活動指示器(activity indicator)和一個信息標(biāo)簽(information label),比如“加載中…”凡壤,讓用戶知道加載仍然在進(jìn)行署尤。
如果合適的話,為刪除按鈕自定義一個名稱亚侠。如果這能讓用戶更好地理解應(yīng)用的相關(guān)功能的話曹体,你可以創(chuàng)建一個合適的標(biāo)題,來取代“刪除”這個字樣硝烂。
盡量使用簡潔的文字標(biāo)簽箕别,以避免被截斷。繁冗的文字和詞組不方便用戶瀏覽和理解滞谢。以上所有單元格樣式均會自動截斷文本串稀,而文本截斷所造成的問題可大可小,取決于你采用的單元格樣式爹凹,以及被截斷了哪一部分文字吏廉。
如果你想以一種非標(biāo)準(zhǔn)的形式來布局你的表格冤议,最好是自定義一種單元格樣式累颂,而不是在現(xiàn)有的表格樣式上進(jìn)行改動陷揪。如何創(chuàng)建自定義單元格樣式钢颂,請參考Table View Programming Guide for iOS中的Customizing Cells部分闭翩。
4.2.12 文本視圖
文本視圖可以接收和展示多行文本臀栈。
想了解如何在代碼中定義文本視圖穴亏,參考Text Views.
文本視圖:
是一個可定義為任何高度的矩形
當(dāng)內(nèi)容太多超出視圖的邊框時陷遮,文本視圖支持滾動
支持自定義字體滓走、顏色和對齊方式(默認(rèn)情況下,文本視圖會以左對齊的黑色系統(tǒng)字體顯示)
可以支持用戶編輯帽馋,當(dāng)用戶輕擊文本視圖內(nèi)部時搅方,將喚起鍵盤(鍵盤的布局和類型取決于用戶的系統(tǒng)語言設(shè)置)
始終確保文字的易讀性比吭。雖然你可以使用屬性字符串將不同的字體、字色和對齊方式串聯(lián)在同一個文本視圖內(nèi)姨涡,但保持文本的可讀性是必不可少的衩藤。最好是可以支持動態(tài)文本(Dynamic Type)和UIFont method preferredFontForTextStyle來展示文本框中的文本。想要了解更多動態(tài)文本的指引涛漂,可以參閱本文第一章中顏色與字體里的部分赏表;想要了解更多編程相關(guān)的內(nèi)容,可以參閱Text Styles.
根據(jù)輸入內(nèi)容的類型來指定不同的鍵盤類型匈仗。舉例來說瓢剿,你希望用戶能更方便地輸入網(wǎng)址、密碼或者電話號碼悠轩。但請注意间狂,由于鍵盤的布局以及輸入方法是由用戶的系統(tǒng)語言設(shè)置決定的,這是你不能控制的火架。
iOS提供了各種不同的鍵盤類型鉴象,以便用戶輸入不同類型的文本。想要了解可用鍵盤類型距潘,可以參考UIKeyboardType.想要了解如何在管理你的應(yīng)用中的鍵盤炼列,請參考Managing the Keyboard.
4.2.13 網(wǎng)絡(luò)視圖
網(wǎng)絡(luò)視圖是一個可以展示豐富的HTML內(nèi)容的區(qū)域。(下圖是iPhone自帶的郵件應(yīng)用音比,網(wǎng)絡(luò)視圖指的是下圖中導(dǎo)航欄和標(biāo)簽欄中間的區(qū)域)
想要了解如何在代碼中定義網(wǎng)絡(luò)視圖俭尖,請參考Web Views.
網(wǎng)絡(luò)視圖:
展示網(wǎng)絡(luò)內(nèi)容
會自動處理頁面中的內(nèi)容,比如把頁面中的電話號碼轉(zhuǎn)化成電話鏈接(譯者按:phone link洞翩,點擊之后iPhone將自動撥打該號碼)稽犁。
如果你有一個網(wǎng)頁或者網(wǎng)絡(luò)應(yīng)用,你大約會用網(wǎng)絡(luò)視圖來實現(xiàn)一個簡單的iOS App骚亿,來對你的網(wǎng)頁或者應(yīng)用進(jìn)行一個封裝已亥。如果你打算用網(wǎng)絡(luò)視圖來訪問你所控制的網(wǎng)頁內(nèi)容,請務(wù)必閱讀Safari Web Content Guide.
不要用網(wǎng)絡(luò)視圖來創(chuàng)建一個看起來像迷你網(wǎng)絡(luò)瀏覽器的應(yīng)用来屠。用戶期望使用iOS自帶的Safari來瀏覽網(wǎng)頁內(nèi)容虑椎,因此我們并不推薦你在自己的app里復(fù)制這種以被廣泛應(yīng)用的功能。