iOS7用戶(hù)界面過(guò)渡指南(pdf版)

2013-07-05 09:48:55來(lái)源:搜狐mued作者:

iOS 7引入了許多用戶(hù)界面上的改變,比如無(wú)邊框的按鈕,透明操作欄,全屏視圖控制器布局。使用Xcode 5可以創(chuàng)建iOS 7項(xiàng)目,并使用模擬器一窺iOS 7用戶(hù)界面的變化。

頁(yè)面視圖控制器(Page View Controller)

頁(yè)面視圖控制器用來(lái)管理多頁(yè)的內(nèi)容,可以使用滾動(dòng)過(guò)場(chǎng),也可以使用卷頁(yè)過(guò)場(chǎng)動(dòng)畫(huà)。

在iOS 7中,使用兩個(gè)方法來(lái)分別指定(pageViewControllerPreferredInterfaceOrientationForPresentation和pageViewControllerSupportedInterfaceOrientations)。

下面可以看到iOS 7模擬器中頁(yè)面視圖控制器的默認(rèn)外觀(guān):

頁(yè)面視圖控制器

滾動(dòng)視圖(Scroll View)

滾動(dòng)視圖幫助用戶(hù)查看超出視圖邊界的內(nèi)容。滾動(dòng)視圖在iOS 6和7上視覺(jué)唯一的不同是滾動(dòng)條的外觀(guān)。

iOS 7                                                          iOS 6

滾動(dòng)視圖

在iOS 7上,你可以通過(guò)UIViewController的automaticallyAdjustsScrollViewInsets屬性來(lái)管理滾動(dòng)視圖的項(xiàng)目分組之間的間隔。

表格視圖(Table View)

表格視圖將數(shù)據(jù)以多行單列的列表呈現(xiàn)。

 

iOS 7為單行和成組的表格視圖引入了新的變化。

iOS 7(表格組)                                                iOS 6(表格組)

表格視圖

表格7

表格視圖中的元素在iOS 7中也有了不同的樣式。

表格8

文本視圖(Text View)

文本視圖接受和顯示多行文本。

請(qǐng)使用UIFont類(lèi)的preferredFontForTextStyle方法獲取文本視圖中顯示的文字內(nèi)容。

網(wǎng)頁(yè)視圖(Web View)

網(wǎng)頁(yè)視圖是可以顯示富HTML內(nèi)容的區(qū)域。

在iOS 7中,UIWebView支持顯示分頁(yè)外觀(guān)的內(nèi)容的顯示。

控件(Controls)

控件是種特殊的UI元素,用戶(hù)既可以看(獲取信息)也可以與之交互(操作它)。所有的iOS 7控件的外觀(guān)都得到了升級(jí),它們大多數(shù)都有了新的尺度。

因?yàn)閁IControl是從UIView繼承而來(lái),你可以使用控件的tintColor屬性來(lái)為它們著色。更多內(nèi)容請(qǐng)參閱第11頁(yè)的“使用著色”。

系統(tǒng)提供的控件默認(rèn)支持系統(tǒng)定義的動(dòng)效,外觀(guān)也會(huì)隨著高亮和選中狀態(tài)的變化而變化。

日期拾取器(Date Picker)

日期拾取器顯示了日期和時(shí)間的內(nèi)容,包括:分鐘,小時(shí),日期,年份。它的整體尺寸和iOS 6比起來(lái)沒(méi)有變化,但是外觀(guān)發(fā)生了巨大的變化。

日期拾取器

iOS 7的app會(huì)將日期拾取器嵌入到內(nèi)容中,而不是單獨(dú)呈現(xiàn)在一個(gè)彈出的視圖上。比如日歷應(yīng)用動(dòng)態(tài)地將表格的一行擴(kuò)展開(kāi),將日期拾取器嵌入,用戶(hù)指定時(shí)間的時(shí)候就不需要離開(kāi)當(dāng)前這個(gè)添加事項(xiàng)視圖。

日期拾取器嵌入到內(nèi)容中

新增聯(lián)系人按鈕(Contact Add Button)

新增聯(lián)系人按鈕是一個(gè)UIButtonTypeContactAdd類(lèi)型的UIButton,它可以將用戶(hù)的信息添加到其他基于文字視圖的文字域中。

新增聯(lián)系人按鈕的大小和外觀(guān)在iOS 7中有變化。

iOS 7               iOS 6

新增聯(lián)系人按鈕

細(xì)節(jié)展開(kāi)按鈕(Detail Disclosure Button)

細(xì)節(jié)展開(kāi)按鈕是一個(gè)UIButtonTypeDetailDisclosure類(lèi)型的UIButton,它表明當(dāng)前項(xiàng)目還有額外的細(xì)節(jié)和相關(guān)功能,點(diǎn)擊后會(huì)在另一個(gè)表格或視圖中呈現(xiàn)。在iOS 7中,細(xì)節(jié)展開(kāi)按鈕使用和Info按鈕一樣的符號(hào)。

iOS 7               iOS 6

細(xì)節(jié)展開(kāi)按鈕

當(dāng)細(xì)節(jié)展開(kāi)按鈕出現(xiàn)在表格的一行中,點(diǎn)擊該行的其它地方不會(huì)激活該按鈕;相反地,這個(gè)操作會(huì)選中該行,或者觸發(fā)app定義的行為。

Info按鈕(Info Button)

Info按鈕的類(lèi)型是UIButtonTypeInfoLight或者UIButtonTypeInfoDark。它表明app的配置細(xì)節(jié)入口,新頁(yè)面有時(shí)候出現(xiàn)在當(dāng)前視圖的背面。在iOS 7中,info按鈕使用和細(xì)節(jié)展開(kāi)按鈕相同的圖形。

在iOS 7中,info按鈕的大小和外觀(guān)發(fā)生了變化。

iOS 7            iOS 6(天氣應(yīng)用中的)

Info按鈕

文本標(biāo)簽(Label)

文本標(biāo)簽用來(lái)呈現(xiàn)靜態(tài)文本。

默認(rèn)情況下,文本標(biāo)簽會(huì)使用系統(tǒng)字體,所以在iOS 6和7上會(huì)看起來(lái)不一樣。

iOS 7                                                                  iOS 6

文本標(biāo)簽

確保使用UIFont的方法preferredFontForTextStyle來(lái)獲取顯示在標(biāo)簽上的文字。

贊助商鏈接: