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阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容