UICollectionView官文

The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts. Collection views support customizable layouts that can be

used to implement multi-column grids, tiled layouts, circular layouts, and many more. You can even change the layout of a collection view dynamically if you want.

UICollectionView管理一系列有序的条目数据并可以自定义展示数据额的方式。他可以可供和tableview一样的功能,除此之外突破了表只能单行显示的弱点。可以进行多行网格,圆形甚至更多布局。你可以按照你的想象任意的布局。


Overview

Figure 1

A collection view using the flow layout

综述

collectionview 使用流水式的布局

当添加一个collectionview到界面上,你的应用的就是管理数据。collection view通过datasource的对象获取数据,这个对象需要符合UICollectionViewDataSource协议。数据在可以分离为个体的小数据并用于展示。一个条目是基本的数据。例如,在一个图片app中,一个条目可能是一张图片。collectionview以单元格的形式展示条目。单元格为UICollectionViewCell。

When adding a collection view to your user interface, your app’s main job is to manage the data associated with that collection view. The collection view gets its data from the data source object, which is an object that conforms to the UICollectionViewDataSource Protocol and is provided by your app. Data in the collection view is organized into individual items, which can then be grouped into sections for presentation. An item is the smallest unit of data you want to present. For example, in a photos app, an item might be a single image. The collection view presents items onscreen using a cell, which is an instance of the UICollectionViewCell class that your data source configures and provides.

除了单元格,collection view 可以以其它的形式展示数据。这些补充性质的视图类似于区头和区尾,独立于单元格,可以承载一些信息。collectionview支持这种补充兴致的视图并可以用布局类进行布局。

In addition to its cells, a collection view can present data using other types of views too. These supplementary views can be things like section headers and footers that are separate from the individual cells but still convey some sort of information. Support for supplementary views is optional and defined by the collection view’s layout object, which is also responsible for defining the placement of those views.

除了将它加入你的界面中,你可以用它检查的你的数据的正确性。当你增删改查数据时,可以将对应的单元格进行同样的操作。也可以用它管理条目的点击事件,尽管这个行为是由他的代理来决定的。

Besides embedding it in your user interface, you use the methods of UICollectionView object to ensure that the visual presentation of items matches the order in your data source object. Thus, whenever you add, delete, or rearrange data in your collection, you use the methods of this class to insert, delete, and rearrange the corresponding cells. You also use the collection view object to manage the selected items, although for this behavior the collection view works with its associated delegate object

布局类

collection view的布局类是UICollectionViewLayout的子类。用于管理单元格和补充视图的布局。尽管它定义了它们的位置,但布局类并不直接把此类信息应用在相应的视图上。因为单元格和补充视图的创建包括collectionview和数据元类的交互和协调。collectionview应用了实际的布局信息。因此,布局类就像是一个数据源。提供可见的信息。

Collection Views and Layout Objects

A very important object associated with a collection view is the layout object, which is a subclass of the UICollectionViewLayout class. The layout object is responsible for defining the organization and location of all cells and supplementary views inside the collection view. Although it defines their locations, the layout object does not actually apply that information to the corresponding views. Because the creation of cells and supplementary views involves coordination between the collection view and your data source object, the collection view actually applies layout information to the views. Thus, in a sense, the layout object is like another data source, only providing visual information instead of item data.

创建collection view同时创建布局类。(初始化一个collection view时必须有一个布局类)布局类存储于collectionViewLayout属性中。设置这个属性直接无动画的改变布局。setCollectionViewLayout:animated:completion: method instead.可以有动画效果的改变布局。

You normally specify a layout object when creating a collection view but you can also change the layout of a collection view dynamically. The layout object is stored in the collectionViewLayout property. Setting this property directly updates the layout immediately, without animating the changes. If you want to animate the changes, you must call the setCollectionViewLayout:animated:completion: method instead.

如果你想创建一个有交互的转场(一个由手势和触摸事件驱动的)使用startInteractive Transition ToCollectionViewLayout:completion:方法去改变布局类。这个方法会生效一个新的布局类,目的是跟剧与手势和触摸事件一同追踪转场的过程。当事件控制代码确认转场事件完成,它会调用finishInteractiveTransition 和 cancleInteractiveTransition 方法移除中间的布局对象并且执行目的布局类。

If you want to create an interactive transition—one that is driven by a gesture recognizer or touch events—use the startInteractiveTransitionToCollectionViewLayout:completion: method to change the layout object. That method installs an intermediate layout object whose purpose is to work with your gesture recognizer or event-handling code to track the transition progress. When your event-handling code determines that the transition is finished, it calls the finishInteractiveTransition or cancelInteractiveTransition method to remove the intermediate layout object and install the intended target layout object.

Creating Cells and Supplementary Views

创建单元格和补充视图

The collection view’s data source object provides both the content for items and the views used to present that content. When the collection view first loads its content, it asks its data source to provide a view for each visible item. To simplify the creation process for your code, the collection view requires that you always dequeue views, rather than create them explicitly in your code. There are two methods for dequeueing views. The one you use depends on which type of view has been requested:

数据源给单元格和补充视图提供内容。当collectionview首次加载内容时,它向数据源索取每一个条目的视图样式。为了简化代码的创建过程,collectionview需要开发者一只重用单元格,而不是每次都具体的创建。有两种方法,具体使用取决于那种需求。

Use the dequeueReusableCellWithReuseIdentifier:forIndexPath: to get a cell for an item in the collection view.

使用 dequeueReuseableCellWithReuseIndentifier:forIndexPath:从collection view 的条目中获取单元格。

Use the dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: method to get a supplementary view requested by the layout object.

使用 dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:从collection view 的条目中获取补充视图。

Before you call either of these methods, you must tell the collection view how to create the corresponding view if one does not already exist. For this, you must register either a class or a nib file with the collection view. For example, when registering cells, you use the registerClass:forCellWithReuseIdentifier: or registerNib:forCellWithReuseIdentifier: method. As part of the registration process, you specify the reuse identifier that identifies the purpose of the view. This is the same string you use when dequeueing the view later.

在你屌用以上方法之前,你必须告诉collectionview如何创建相关的视图,如果它不存在的话。例如,使用registClass:forCellReuseIdentifier:  或者registerNib:forCellWithReuseIdentifier:方法。作为注册过程的一部分。你必须确认确定视图的标识符。与你重用时的标识符实相同的。


After dequeueing the appropriate view in your delegate method, configure its content and return it to the collection view for use. After getting the layout information from the layout object, the collection view applies it to the view and displays it.

在代理方法中取出相应的方法后,确认它的内容,并将它返回给collectionview进行使用。在得到布局信息后,collectionview会将视图应用并展示它。


For more information about implementing the data source methods to create and configure views, see UICollectionViewDataSource.

布局信息更多信息在UICollectionViewDataSource中。

For more information about appearance and behavior configuration, see Collection Views.

关于collection view 配置和外观见collection view 

Reordering Items Interactively

交互式重拍条目

Collection views allow you to move items around based on user interactions. Normally, the order of items in a collection view is defined by your data source. If you support the ability for users to reorder items, you can configure a gesture recognizer to track the user’s interactions with a collection view item and update that item’s position.

collection view 允许基于用户交互移动条目位置。单元格的位置信息在datasource所管理。如果你支持拥护移动单元格,你可以创建一个手势跟踪用户移动条目的位置。

To begin the interactive repositioning of an item, call the beginInteractiveMovementForItemAtIndexPath: method of the collection view. While your gesture recognizer is tracking touch events, call the updateInteractiveMovementTargetPosition: method to report changes in the touch location. When you are done tracking the gesture, call the endInteractiveMovement or cancelInteractiveMovement method to conclude the interactions and update the collection view.

交互移动条目位置,调用beginInteractiveMovementForItemAtIndexPath:方法。当你的手势正在追踪触摸事件,调用updateInteractiveTargetPosition:方法报告触摸位置信息的改变。当你完成追踪手势。调用endInteractiveMovement 或者cancelInteractiveMovement 方法更新collection view。


During user interactions, the collection view invalidates its layout dynamically to reflect the current position of the item. If you do nothing, the default layout behavior repositions the items for you, but you can customize the layout animations if you want. When interactions finish, updates its data source object with the new location of the item.

在用户交互期间,collection view 动态改变布局信息适应条目的位置。如果不做任何事情,还是应用模式人的布局信息,但是你可以自定义布局动画。当交互完成时,更新数据源。


The UICollectionViewController class provides a default gesture recognizer that you can use to rearrange items in its managed collection view. To install this gesture recognizer, set the installsStandardGestureForInteractiveMovement property of the collection view controller to YES.

collectionviewcontroller 类提供了一个默认的手势重拍条目的位置。为了使用这个手势,设置 installStandardGestureForInteractiveMovement  属性为yes。

Interface Builder Attributes

Table 1 lists the attributes that you configure for collection views in Interface Builder.

Table 1

Collection view attributes

Attribute

Description

Items

The number of prototype cells. This property controls the specified number of prototype cells for you to configure in your storyboard. Collection views must always have at least one cell and may have multiple cells for displaying different types of content or for displaying the same content in different ways.

Layout

The layout object to use. Use this control to select between the UICollectionViewFlowLayout object and a custom layout object that you define.

When the flow layout is selected, you can also configure the scrolling direction for the collection view’s content and whether the flow layout has header and footer views. Enabling header and footer views adds reusable views to your storyboard that you can configure with your header and footer content. You can also create those views programmatically.

When a custom layout is selected, you must specify the UICollectionViewLayout subclass to use.

When the Flow layout is selected, the Size inspector for the collection view contains additional attributes for configuring flow layout metrics. Use those attributes to configure the size of your cells, the size of headers and footers, the minimum spacing between cells, and any margins around each section of cells. For more information about the meaning of the flow layout metrics, see UICollectionViewFlowLayout.

Internationalization

A collection view has no direct content of its own to internationalize. Instead, you internationalize the cells and reusable views of the collection view. For more information about internationalization, see Internationalization and Localization Guide.

Accessibility

A collection view has no content of its own to make accessible. If your cells and reusable views contain standard UIKit controls such as UILabel and UITextField, you can make those controls accessible. When a collection view changes its onscreen layout, it posts the UIAccessibilityLayoutChangedNotification notification.

For general information about making your interface accessible, see Accessibility Programming Guide for iOS.

Symbols

Initializing a Collection View

- initWithFrame:collectionViewLayout:

Initializes and returns a newly allocated collection view object with the specified frame and layout.

Configuring the Collection View

delegate

The object that acts as the delegate of the collection view.

dataSource

The object that provides the data for the collection view.

backgroundView

The view that provides the background appearance.

Creating Collection View Cells

- registerClass:forCellWithReuseIdentifier:

Register a class for use in creating new collection view cells.

- registerNib:forCellWithReuseIdentifier:

Register a nib file for use in creating new collection view cells.

- registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

Registers a class for use in creating supplementary views for the collection view.

- registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

Registers a nib file for use in creating supplementary views for the collection view.

- dequeueReusableCellWithReuseIdentifier:forIndexPath:

Returns a reusable cell object located by its identifier

- dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

Returns a reusable supplementary view located by its identifier and kind.

Changing the Layout

collectionViewLayout

The layout used to organize the collected view’s items.

- setCollectionViewLayout:animated:

Changes the collection view’s layout and optionally animates the change.

- setCollectionViewLayout:animated:completion:

Changes the collection view’s layout and notifies you when the animations complete.

- startInteractiveTransitionToCollectionViewLayout:completion:

Changes the collection view’s current layout using an interactive transition effect.

- finishInteractiveTransition

Tells the collection view to finish an interactive transition by installing the intended target layout.

- cancelInteractiveTransition

Tells the collection view to abort an interactive transition and return to its original layout object.

Reloading Content

- reloadData

Reloads all of the data for the collection view.

- reloadSections:

Reloads the data in the specified sections of the collection view.

- reloadItemsAtIndexPaths:

Reloads just the items at the specified index paths.

Getting the State of the Collection View

numberOfSections

Returns the number of sections displayed by the collection view.

Beta

- numberOfItemsInSection:

Returns the number of items in the specified section.

visibleCells

Returns an array of visible cells currently displayed by the collection view.

Beta

Inserting, Moving, and Deleting Items

- insertItemsAtIndexPaths:

Inserts new items at the specified index paths.

- moveItemAtIndexPath:toIndexPath:

Moves an item from one location to another in the collection view.

- deleteItemsAtIndexPaths:

Deletes the items at the specified index paths.

Inserting, Moving, and Deleting Sections

- insertSections:

Inserts new sections at the specified indexes.

- moveSection:toSection:

Moves a section from one location to another in the collection view.

- deleteSections:

Deletes the sections at the specified indexes.

Reordering Items Interactively

- beginInteractiveMovementForItemAtIndexPath:

Initiates the interactive movement of the item at the specified index path.

- updateInteractiveMovementTargetPosition:

Updates the position of the item within the collection view’s bounds.

- endInteractiveMovement

Ends interactive movement tracking and moves the target item to its new location.

- cancelInteractiveMovement

Ends interactive movement tracking and returns the target item to its original location.

Managing the Selection

allowsSelection

A Boolean value that indicates whether users can select items in the collection view.

allowsMultipleSelection

A Boolean value that determines whether users can select more than one item in the collection view.

indexPathsForSelectedItems

Returns the index paths for the selected items.

Beta

- selectItemAtIndexPath:animated:scrollPosition:

Selects the item at the specified index path and optionally scrolls it into view.

- deselectItemAtIndexPath:animated:

Deselects the item at the specified index.

Managing Focus

remembersLastFocusedIndexPath

A Boolean value indicating whether the collection view automatically assigns the focus to the item at the last focused index path.

Locating Items and Views in the Collection View

- indexPathForItemAtPoint:

Returns the index path of the item at the specified point in the collection view.

indexPathsForVisibleItems

Returns an array of the visible items in the collection view.

Beta

- indexPathForCell:

Returns the index path of the specified cell.

- cellForItemAtIndexPath:

Returns the visible cell object at the specified index path.

- indexPathsForVisibleSupplementaryElementsOfKind:

Returns the index paths of all visible supplementary views of the specified type.

- supplementaryViewForElementKind:atIndexPath:

Returns the supplementary view at the specified index path.

- visibleSupplementaryViewsOfKind:

Returns an array of the visible supplementary views of the specified kind.

Getting Layout Information

- layoutAttributesForItemAtIndexPath:

Returns the layout information for the item at the specified index path.

- layoutAttributesForSupplementaryElementOfKind:atIndexPath:

Returns the layout information for the specified supplementary view.

Scrolling an Item Into View

- scrollToItemAtIndexPath:atScrollPosition:animated:

Scrolls the collection view contents until the specified item is visible.

Animating Multiple Changes to the Collection View

- performBatchUpdates:completion:

Animates multiple insert, delete, reload, and move operations as a group.

Constants

UICollectionViewScrollPosition

Constants that indicate how to scroll an item into the visible portion of the collection view.

UICollectionViewLayoutInteractiveTransitionCompletion

The completion block called at the end of an interactive transition for a collection view.

Instance Properties

prefetchDataSourceBeta

prefetchingEnabledBeta

Instance Methods

- initWithCoder:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容