UIKit User Interface Catalog Part One (Collection Views)

本文为大地瓜原创,欢迎知识共享,转载请注明出处。
虽然你不注明出处我也没什么精力和你计较。
作者微信号:christgreenlaw


2017-10-12日更新:
苹果官网删除了本文档,已经找不到这个文档了,好在我还有pdf版,现共享给大家。
链接:http://pan.baidu.com/s/1i5GKG9v 密码:9g6z


正如文档的名字,UIKit中的用户界面目录,其实简单的来讲,这篇文档就是把常见的界面组件列了个目录,大概介绍,而不深入。


Collection Views

A collection view displays an ordered collection of data items using standard or custom layouts. Similar to a table view, a collection view gets data from your custom data source objects and displays it using a combination of cell, layout, and supplementary views. A collection view can display items in a grid or in a custom layout that you design. Regardless of the layout style you choose, a collection view is best suited to display nonhierarchical, ordered data items.

一个collection view展示了一组有序的集合,其中的数据项目使用标准或自定义布局。与table view相似,一个collection view从自定义的数据源对象获取数据,用cell、layout以及supplementary view将数据展示出来。一个collection view可以在网格中展示项目,也可以用你设计的自定义布局展示项目。不管你选择什么样的布局风格,collection view作为展示无层级、有序数据项目的一种方式,都是最佳的。

collection view的一个例子

Purpose. Collection views allow users to:

  • View a catalog of variably sized items, optionally sorted into multiple sections
    //查看一组可变大小的项目、可选地分成多个section
  • Add to, rearrange, and edit a collection of items
    //添加、重排、编辑一组项目
  • Choose from a frequently changing display of items
    //从一组经常变化展示方式的项目中进行选择

Implementation.

Configuration. Configure collection views in Interface Builder, in the Collection View section of the Attributes Inspector. A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. You can set other configurations programmatically, too, if you prefer.
//在IB中 Attributes Inspector的Collection View 部分对collection view进行配置。有些配置不能使用Attributes Inspector进行配置,所以你需要用代码来配置。如果你愿意的话,其他配置也可以在代码中做。

Attributes Inspector中collection view的配置面板

Content of Collection Views

Cells present the main content of your collection view. The job of a cell is to present the content for a single item from your data source object. Each cell must be an instance of the UICollectionViewCell class, which you may subclass as needed to present your content. Cell objects provide inherent support for managing their own selection and highlight state, although some custom code must be written to actually apply a highlight to a cell. A UICollectionViewCell object is a specific type of reusable view that you use for your main data items.

cells展示了collection view中的主要内容。cell 的任务是展示数据源对象的一个项目内容。每个cell都必须是UICollectionViewCell 类的实例,你需要根据需求继承UICollectionViewCell 类来展示你的内容。cell对象为管理它们自己的选择及高亮状态提供了继承支持,虽然要真正的支持cell 的高亮需要写一些自定义代码。UICollectionViewCell对象是你用来展示关键数据项目的reusable view 的特例。

To manage the visual presentation of data, a collection view works with many related classes, such as UICollectionViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionReusableView, UICollectionViewCell, UICollectionViewLayout, and UICollectionViewLayoutAttributes.

要管理数据的可视化表现,collection view需要和很多相关的类一起配合完成,比如说:UICollectionViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionReusableView, UICollectionViewCell, UICollectionViewLayout, and UICollectionViewLayoutAttributes.

Collection views enforce a strict separation between the data being presented and the visual elements used for presentation. Your app is solely responsible for managing the data via your custom data source objects. (To learn how to create these objects, see Designing Your Data Objects.) Your app also provides the view objects used to present that data. The collection view takes your views and—with the help of a layout object, which specifies placement and other visual attributes—does all the work of displaying them onscreen.

collection view在被展示的数据以及用于展示的可视化元素之间强制性的进行了分割。你的app通过你自定义的数据源完全负责数据的管理。(要了解如何创建这些对象,see Designing Your Data Objects)你的应用也提供view对象来展示这个数据。collection view接受你的view,在layout对象(layout对象指明了摆放方式以及其他的可视化属性)的帮助下,完全承担了将这些view展示在屏幕上的工作。

屏幕快照 2017-09-11 16.16.54.png

To display content onscreen in an efficient way, a collection view uses the following reusable view objects:

  • Cell. Represents one data item.
  • Supplementary view. Represents information related to the data items, such as a section header or footer.
  • Decoration view. Represents purely decorative content that’s not part of your data, such as a background image.

想有效地展示内容,collection view使用如下的可重用view 对象:

  • Cell. 代表一个数据item。
  • Supplementary view. 代表与data items相关的信息,比如section header或footter
  • Decoration view. 代表纯粹的装饰性内容,并不是数据的一部分。比如背景图片。
屏幕快照 2017-09-11 16.28.48.png

Because a collection view works with these and other objects to determine the visual presentation of your data, configuring a collection view in Interface Builder means that you need to configure some objects separately.

由于collection view和这些以及其他的对象协同工作来确定你数据的可视化展现,在IB中配置collection view意味着你需要分开独立配置某些对象。

  • Items. The number of different types of data for which you define distinct cell objects. If your app works with only one type of data item—regardless of the total number of data items you display—set this value to 1.
  • Accessories. The existence of a header or footer view for each section (this property isn’t available for custom layouts). Select Section Header or Section Footer as appropriate.
  • Items. 你所定义的不同类型数据的数量,用以将cell对象区分开来。如果你的app只有一种data item--不管你总共要展示多少data item--将这个值都设置为1。
  • Accessories. 每个section的header或者footer是否存在。(这个值对于自定义布局来说是不可用的)根据情况选择Section Header或Section Footer。

In Collection Reusable View Attributes inspector—which governs supplementary views, decoration views, and cells—you can set the Identifier (identifier) field. Enter the ID you use in your code to identify the reusable cell, decoration, or supplementary view object.

在Collection Reusable View Attributes inspector中--其管理了supplementary views, decoration views, and cells--你可以设置Identifier域。键入你代码中用来标志reusable cell, decoration, or supplementary view object 的ID。

屏幕快照 2017-09-11 16.29.04.png

Behavior of Collection Views

There are several behaviors you can support in your collection view. For example, you might want to allow users to:

  • Select one or more items
    //选中一个或多个item
  • Insert, delete, and reorder items or sections
    //插入删除重排item或section
  • Edit an item
    //编辑item
    By default, a collection view detects when the user taps a specific cell and it updates the cell’s selected or highlighted properties as appropriate. You can write code that configures a collection view to support multiple-item selection or that draws the selected or highlighted states yourself. To learn how to support multiple selection or custom selection states, see Managing the Visual State for Selections and Highlights.

默认情况下,collection view检测用户点击一个特定的cell,并且根据情况更新cell的选中属性或者是高亮属性。你也可以通过代码让collection view支持多选,或者自己画出选中/高亮状态。要了解如何支持多选or自定义选中状态,参见Managing the Visual State for Selections and Highlights

To support insertion, deletion, or reordering of cells in a collection view, you make changes to your data source and then tell the collection view to redisplay the content. By default, a collection view animates the insertion, deletion, or movement of a single item; if you want to animate these changes for multiple items at once, you use code blocks to batch the update. To learn how animate multiple changes to a collection view, see Inserting, Deleting, and Moving Sections and Items. To let users move an item or items by dragging, you also need to incorporate a custom gesture recognizer. (To learn how to do this, see Manipulating Cells and Views.)

要支持插入、删除、或cell 的重排序,你需要变更数据源,告诉collection view重新显示内容。默认,collection view会将单一item 的插入、删除、移动进行动画处理,如果你希望一次性将多个item的改变都进行动画,你需要使用block来批量处理更新。要了解如果对collection view进行多个item的动画,参见 Inserting, Deleting, and Moving Sections and Items。要让用户通过拖动移动一个或多个item,你也需要使用一个自定义的手势识别器(custom gesture recognizer)。 (To learn how to do this, see Manipulating Cells and Views.)

If you support editing for an item, the collection view automatically displays the Edit menu when it detects a long-press gesture on a specific cell. To learn how to support editing in a collection view, see Showing the Edit Menu for a Cell.

如果你想支持编辑item,collection view自动会在检测到某个cell的长按手势时显示一个Edit菜单。To learn how to support editing in a collection view, see Showing the Edit Menu for a Cell.

When configuring cells and supplementary views in a storyboard, you do so by dragging the item onto your collection view and configuring it there. This creates a relationship between the collection view and the corresponding cell or view. For cells, drag a collection view cell from the object library and drop it onto your collection view. Set the custom class and the collection reusable view identifier of your cell to appropriate values.

在IB中配置cell和supplementary view时,你要将item拖拽到collection view上,并在此进行配置。这就在collection view和相应的cell或者view之间建立了联系。对于cell来说,从object library上拖拽一个cell并放到collection view上。为cell设置好custom class和collection reusable view identifier的值。

Whether the user is selecting or deselecting a cell, the cell’s selected state is always the last thing to change. Taps in a cell always result in changes to the cell’s highlighted state first. Only after the tap sequence ends and any highlights applied during that sequence are removed, does the selected state of the cell change. When designing your cells, you should make sure that the visual appearance of your highlights and selected state do not conflict in unintended ways.

不管是选中还是取消选中cell,cell 的选中状态永远是最后变化的。cell 的点击永远会先改变cell 的高亮状态。只有在点击序列结束且序列过程中高亮状态移除后,选中状态才会改变。设计cell时,应该保证高亮和选中状态不要发生冲突。

When the user performs a long-tap gesture on a cell, the collection view attempts to display an Edit menu for that cell. The Edit menu can be used to cut, copy, and paste cells in the collection view.

用户长按cell时,collection view会企图(attempt)为这个cell显示一个Edit菜单。Edit菜单可以用来剪切、复制、粘贴cell。

If you’re working with the UICollectionViewFlowLayout class, you can use the Attributes inspector to set the “Scroll Direction” (scrollDirection) field to Horizontal or Vertical. Note that this property isn’t available for custom layouts.

如果你使用UICollectionViewFlowLayout类,你可以用Attributes inspector 将“Scroll Direction” (scrollDirection) 域设置为Horizontal or Vertical。要注意的是,这个属性对于自定义layout是不可用的。

layout

Appearance of Collection Views

Layout

A collection view relies on a layout object to define the layout of its cells, supplementary views, and decoration views.

collection view依赖一个layout 对象来定义cells, supplementary views, and decoration views的layout。

The Layout field determines the layout of the cells. The default value is Flow, which refers to the layout defined by the UICollectionViewFlowLayout class. If you provide a custom layout class, choose Custom instead.

layout域决定了cell 的布局。默认值是Flow,也就是 UICollectionViewFlowLayout类所定义的layout。如果你提供一个自定义的布局类,选择Custom。

layout

To learn more about creating a custom layout class, see Collection View Programming Guide for iOS.

Background

To use a custom background for a collection view, you can specify a view that's positioned underneath all of the other content and sized automatically to fill the entire bounds of the collection view. You can set this value using the backgroundView property. Because this background view doesn’t scroll with the collection view’s content, it’s not an appropriate way to display a decorative background such as the appearance of wooden shelves.

要给collection view使用一个自定义背景,你可以指明一个view,这个view在所有其他内容之下,自动填充整个collection view的边界。你可以使用 backgroundView属性来设置这个值。由于这个background view不随collection view的内容滚动,它并不适合于显示类似于“木书架“这样的decorative background。

Cell Background

To use a custom background for a single collection view cell, you can specify a view that’s positioned behind the cell’s content view and that fills the cell’s bounds. You can set this value using the backgroundView property.

要给单独的collection view cell使用一个自定义背景,你可以指明一个view,此view放置在cell 的content view之后,填充了cell 的边界。You can set this value using the backgroundView property.

You can also specify a custom selected background by providing a view that’s displayed above the cell’s background view—and behind the content view—when the user selects the cell. Set this value using the selectedBackgroundView property.

你也可以指明一个自定义的选中状态下的背景,只需要提供一个view,此view位于cell 的background view之上,而在其content view之下--当用户选中cell时。Set this value using the selectedBackgroundView property.

Spacing

In the Collection View Flow Layout Size Inspector, you can set size values (in points) for the layout object to use when laying out cells and supplementary views.

在Collection View Flow Layout Size Inspector中,你可以以point为单位设置layout 对象的大小,在布局cell 和supplementary views时进行使用。

spacing

For spacing between cells you can set the following Min Spacing values:
For Cells. The minimum space to maintain between cells on one line.
//一行上cell之间的最小距离
For Lines. The minimum space to maintain between lines of cells.
//多行cell间的最小距离

Cell Padding
cell padding

To add padding around cells so that space appears above, below, or on either side of the cells in a section, use the “Section Insets” fields in the Collection View Flow Layout Size Inspector. Specifying nonzero inset values reduces the amount of space available for laying out cells, which lets you limit the number of cells that can appear on one row or the number of rows that can appear in one section. The insets you can specify are:

要在cell周围添加padding,调节section中cell的上下左右边距,use the “Section Insets” fields in the Collection View Flow Layout Size Inspector。声明一个非零值将会减少布局cell时的边距值,可以用来限制一行上cell 的数量,以及section中的行数。你可以设置的inset如下:

  • Top. The space to add between the bottom of the header view and the top of the first line of cells.//header view底部和第一行cell顶部之间的间距
  • Bottom. The space to add between the bottom last line of cells and the top of the footer/最后一行cell的底部和footer顶部的间距
  • Left. The space to add between the left edge of the cells and the left edge of the collection view.//cell的左边和collection view的左边的间距
  • Right. The space to add between the right edge of the cells and the right edge of the collection view.//cell的右边和collection view的右边的间距

Using Auto Layout with Collection Views

You can create Auto Layout constraints between a collection view and other user interface elements. You can create any type of constraint for a collection view besides a baseline constraint.

collection view和其他用户界面元素之间可以创建Auto Layout约束。除了baseline约束以外也可以创建任何种类的约束(这句话的意思好像就是什么约束都行?besides并不表示否定啊。。。。)

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

Making Collection Views Accessible

The data items in a collection view are accessible by default when they are represented by standard UIKit objects, such as UILabel
and UITextField
.
When a collection view changes its onscreen layout, it posts the UIAccessibilityLayoutChangedNotification
notification.
For general information about making iOS views accessible, see Making Views Accessible.

Internationalizing Collection Views

For more information, see Internationalization and Localization Guide.

Elements Similar to a Collection View

The following elements provide similar functionality to a collection view:
Table View. A scrolling view that displays data items in a single-column list. For more information, see Table Views.

Scroll View. A scrolling view that displays content without support for any specific layout or ordering scheme. For more information, see Scroll Views.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容