UIKit User Interface Catalog Part One (Action Sheets)

本文為大地瓜原創,歡迎知識共享,轉載請注明出處。
雖然你不注明出處我也沒什么精力和你計較。
作者微信號:christgreenlaw


2017-10-12日更新:
蘋果官網刪除了本文檔,已經找不到這個文檔了,好在我還有pdf版,現共享給大家。
鏈接:http://pan.baidu.com/s/1i5GKG9v 密碼:9g6z


正如文檔的名字,UIKit中的用戶界面目錄,其實簡單的來講,這篇文檔就是把常見的界面組件列了個目錄,大概介紹,而不深入。


Action Sheets

Action sheets display a set of buttons representing several alternative choices to complete a task initiated by the user. For example, when the user taps the Share button in an app’s toolbar, an action sheet appears offering a list of choices, such as Email, Print, and so on.

Action sheets展示了一組按鈕,分別表示多個選項,以完成用戶發起的任務。比如說,當用戶點擊應用中toolbar的分享按鈕時,一個action sheet就會呈現出來,提供一組選項,比如Email、Print等等。

Action Sheet

Purpose. Action sheets allow users to://目的

  • Quickly select from a list of actions//快速的從一列行為中進行選擇
  • Confirm or cancel an action//確定或取消一個行為

Implementation. Action sheets are implemented in the UIActionSheet class and discussed in the UIActionSheet Class Reference.

Configuration. Action sheets are created, initialized, and configured in code, typically residing in a view controller implementation file. //通常來說,Action sheets是在一個view controller implementation file的代碼中進行創建、初始化和配置的。

Content of Action Sheets (Programmatic)

You cannot create or manipulate action sheets in Interface Builder. Rather, an action sheet floats over an existing view to interrupt its presentation, and it requires the user to dismiss it.

在IB中無法創建或操作action sheets。一個action sheet在一個已有的view上浮現以打斷其展示過程,且需要用戶來取消它。

When you create an action sheet object from the UIActionSheet class, you can initialize its most important properties with one method, initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles:. Depending on your app’s needs, that single message may be enough to configure a fully functional action sheet object, as shown in the following code. Once you have created the action sheet object, send it a show... message, such as showInView: to display the action sheet.

UIActionSheetClass創建以個action sheet對象時,你可以用一個方法來初始化最重要的屬性,initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles:. 根據你APP的需要,這個消息可能足夠用來完整地配置action sheet 的功能了,正如下面代碼所示。當你創建了一個action sheet對象后,向其發送一個show...消息,比如說showInView: 來展示action sheet。

UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:nil
                                                         delegate:self
                                                 cancelButtonTitle:@"Cancel"
                                            destructiveButtonTitle:@"Delete Note"
                                                otherButtonTitles:nil];

Although the first parameter of the initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles: method enables you to provide a title for an action sheet, iOS human interface guidelines recommend that you do not use a title.

盡管initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles: 第一個參數允許你為一個action sheet提供一個title,iOS Human interface guidelines建議你不要使用title。

As described in iOS human interface guidelines, you should include a Cancel button with action sheets displayed on iPhone and with those displayed on iPad over an open popover. Otherwise on iPad, action sheets are displayed within a popover, and the user can cancel the action sheet by tapping outside the popover, in which case you do not need to include a Cancel button.

正如 iOS human interface guidelines所述,在iPhone上的action sheets應該有一個 Cancel button,iPad上open pop over出來的action sheets也應該有一個 Cancel button。否則在iPad上,action sheet是在popover中顯示的,用戶可以通過點擊popover的外部來取消action sheet,在這種情況下就不需要有 Cancel button。

To create a Cancel button, pass a non-nil value for the cancelButtonTitle: parameter of the initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles: method. A Cancel button created in this way is positioned at the bottom of the action sheet.

要創建一個 Cancel button,在 initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles:中給cancelButtonTitle:參數傳一個非nil值。這種方式創建的Cancel button被放置在action sheet的最底部。

When your action sheet presents a potentially destructive choice, you should include a destructive button by passing a non-nil value for the destructiveButtonTitle: parameter of the initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles:
method. A destructive button created in this way is automatically colored red and positioned at the top of the action sheet.

當你的action sheet有一個潛在的destructive choice,你應該通過initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles:
方法給destructiveButtonTitle:參數傳一個非nil值。這種方式創建的destructive button自動會變為紅色,放置在action sheet的最頂部。

Behavior of Action Sheets (Programmatic)

You can choose to present an action sheet so that it originates from a toolbar, tab bar, button bar item, from a view, or from a rectangle within a view. On iPhone, because the action sheet slides up from the bottom of a view and covers the width of the screen, most apps use showInView:. On iPad, however, action sheets appear within a popover whose arrow points to the control the user tapped to invoke the choices presented by the action sheet. So, showFromRect:inView:animated: and showFromBarButtonItem:animated: are most useful on iPad.

action sheet可以從toolbar, tab bar, button bar item, a view, a rectangle within a view等處展示出來。在iPhone上,由于action sheet從view的底部滑出,覆蓋了屏幕的寬度,大多數應用選擇使用 showInView:。然而在iPad上,action sheet在一個popover中顯示,這個popover的箭頭指向了用戶點擊以顯示action sheet的control。所以,在iPad上, 一般使用showFromRect:inView:animated: and showFromBarButtonItem:animated:

To handle the choices presented by your action sheet, you must designate a delegate to handle the button’s action, and the delegate must conform to the UIActionSheetDelegate protocol. You designate the delegate with the delegate parameter when you initialize the action sheet object. The delegate must implement the actionSheet:clickedButtonAtIndex: message to respond when the button is tapped. For example, the following code shows an implementation that simply logs the title of the button that was tapped.

要處理action sheet所展示的選項,你需要找一個代理來處理button 的行為,這個代理必須服從UIActionSheetDelegate協議。在初始化action sheet對象時,用delegate參數來賦值代理。代理必須實現 actionSheet:clickedButtonAtIndex: 消息來對button的點擊作出相應。比如說,下面的代碼簡單地輸出了被點擊按鈕的title。

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
  NSLog(@"The %@ button was tapped.", [actionSheet buttonTitleAtIndex:buttonIndex]);
}

Using Auto Layout with Action Sheets

The layout of action sheets is handled for you. You cannot create Auto Layout constraints between an action sheet and another user interface element.

action sheet的布局不需要你處理。在action sheet和另一個用戶界面元素之間你不能創建Auto Layout約束。

For general information about using Auto Layout with iOS views, see Using Auto Layout with Views.

Making Action Sheets Accessible

Action sheets are accessible by default.
Accessibility for action sheets primarily concerns button titles. If VoiceOver is activated, it speaks the word “alert” when an action sheet is shown, then speaks its title if set (although iOS human interface guidelines recommend against titling action sheets). As the user taps a button in the action sheet, VoiceOver speaks its title and the word “button.”

action sheet默認是accessible的。action sheet的accessibility主要與button title相關。如果VoiceOver啟用,action sheet顯示的時候將會說"alert",然后說出title(如果設置了title的話)(盡管iOS human interface guidelines不建議使用title)。用戶點擊action sheet中某個按鈕時,VoiceOver將會講出其title和“button”這個詞。

For general information about making iOS views accessible, see Making Views Accessible.

Internationalizing Action Sheets

To internationalize an action sheet, you must provide localized translations of the button titles. Button size may change depending on the language and locale.
For more information, see Internationalization and Localization Guide.

Debugging Action Sheets

When debugging issues with action sheets, watch for this common pitfall:
Not testing localizations. Be sure to test the action sheets in your app with the localizations you intend to ship. In particular, button titles can truncate if they are longer in localizations other than the one in which you designed your user interface. Following the HI guideline to give buttons short, logical titles helps to ameliorate this potential problem, but localization testing is also required.

debug action sheet時,注意這個陷阱:
Not testing localizations.

Elements Similar to an Action Sheet

與Action Sheet類似的元素

The following elements provide similar functionality to an action sheet:
Alert View. Use an alert view to convey important information about an app or the device, interrupting the user and requiring them to stop what they’re doing to choose an action or dismiss the alert. For more information, see Alert Views.

Modal View. Use a modal view (that is, the view controller uses a modal presentation style) when users initiate a self-contained subtask in the context of their workflow or another task. For more information, see UIViewController Class Reference.

以下的元素提供了與action sheet類似的功能:
Alert View。使用alert view來調查(convey)app或設備的重要信息,打斷用戶(的操作),要求用戶停止正在做的事情,選擇一個動作或者關掉alert。For more information, see Alert Views.
Modal View。當用戶初始化了一個在workflow或者另一個任務上下文中自包含的子任務時,使用modal view(也就是view controller 使用了modal展現方式)。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,030評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,310評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,951評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,796評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,566評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,055評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,142評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,303評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,799評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,683評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,899評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,409評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,135評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,520評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,757評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,528評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,844評論 2 372

推薦閱讀更多精彩內容