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管理一系列有序的條目數(shù)據(jù)并可以自定義展示數(shù)據(jù)額的方式。他可以可供和tableview一樣的功能假丧,除此之外突破了表只能單行顯示的弱點(diǎn)∧镜牛可以進(jìn)行多行網(wǎng)格,圓形甚至更多布局若皱。你可以按照你的想象任意的布局届囚。
Overview
Figure 1
A collection view using the flow layout
綜述
collectionview 使用流水式的布局
當(dāng)添加一個collectionview到界面上,你的應(yīng)用的就是管理數(shù)據(jù)是尖。collection view通過datasource的對象獲取數(shù)據(jù)意系,這個對象需要符合UICollectionViewDataSource協(xié)議。數(shù)據(jù)在可以分離為個體的小數(shù)據(jù)并用于展示饺汹。一個條目是基本的數(shù)據(jù)蛔添。例如,在一個圖片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 可以以其它的形式展示數(shù)據(jù)。這些補(bǔ)充性質(zhì)的視圖類似于區(qū)頭和區(qū)尾扫皱,獨(dú)立于單元格足绅,可以承載一些信息。collectionview支持這種補(bǔ)充興致的視圖并可以用布局類進(jìn)行布局韩脑。
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.
除了將它加入你的界面中氢妈,你可以用它檢查的你的數(shù)據(jù)的正確性。當(dāng)你增刪改查數(shù)據(jù)時段多,可以將對應(yīng)的單元格進(jìn)行同樣的操作首量。也可以用它管理條目的點(diǎn)擊事件,盡管這個行為是由他的代理來決定的进苍。
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的子類加缘。用于管理單元格和補(bǔ)充視圖的布局。盡管它定義了它們的位置觉啊,但布局類并不直接把此類信息應(yīng)用在相應(yīng)的視圖上拣宏。因?yàn)閱卧窈脱a(bǔ)充視圖的創(chuàng)建包括collectionview和數(shù)據(jù)元類的交互和協(xié)調(diào)。collectionview應(yīng)用了實(shí)際的布局信息柄延。因此蚀浆,布局類就像是一個數(shù)據(jù)源。提供可見的信息搜吧。
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.
創(chuàng)建collection view同時創(chuàng)建布局類市俊。(初始化一個collection view時必須有一個布局類)布局類存儲于collectionViewLayout屬性中。設(shè)置這個屬性直接無動畫的改變布局滤奈。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.
如果你想創(chuàng)建一個有交互的轉(zhuǎn)場(一個由手勢和觸摸事件驅(qū)動的)使用startInteractive Transition ToCollectionViewLayout:completion:方法去改變布局類。這個方法會生效一個新的布局類蜒程,目的是跟劇與手勢和觸摸事件一同追蹤轉(zhuǎn)場的過程绅你。當(dāng)事件控制代碼確認(rèn)轉(zhuǎn)場事件完成,它會調(diào)用finishInteractiveTransition 和 cancleInteractiveTransition 方法移除中間的布局對象并且執(zhí)行目的布局類昭躺。
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
創(chuàng)建單元格和補(bǔ)充視圖
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:
數(shù)據(jù)源給單元格和補(bǔ)充視圖提供內(nèi)容忌锯。當(dāng)collectionview首次加載內(nèi)容時,它向數(shù)據(jù)源索取每一個條目的視圖樣式领炫。為了簡化代碼的創(chuàng)建過程偶垮,collectionview需要開發(fā)者一只重用單元格,而不是每次都具體的創(chuàng)建帝洪。有兩種方法似舵,具體使用取決于那種需求。
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 的條目中獲取補(bǔ)充視圖砚哗。
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如何創(chuàng)建相關(guān)的視圖砰奕,如果它不存在的話蛛芥。例如,使用registClass:forCellReuseIdentifier: ?或者registerNib:forCellWithReuseIdentifier:方法军援。作為注冊過程的一部分常空。你必須確認(rèn)確定視圖的標(biāo)識符。與你重用時的標(biāo)識符實(shí)相同的盖溺。
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.
在代理方法中取出相應(yīng)的方法后漓糙,確認(rèn)它的內(nèi)容,并將它返回給collectionview進(jìn)行使用烘嘱。在得到布局信息后昆禽,collectionview會將視圖應(yīng)用并展示它。
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.
關(guān)于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所管理。如果你支持擁護(hù)移動單元格哮内,你可以創(chuàng)建一個手勢跟蹤用戶移動條目的位置盗棵。
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.
交互移動條目位置壮韭,調(diào)用beginInteractiveMovementForItemAtIndexPath:方法。當(dāng)你的手勢正在追蹤觸摸事件纹因,調(diào)用updateInteractiveTargetPosition:方法報告觸摸位置信息的改變喷屋。當(dāng)你完成追蹤手勢。調(diào)用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 動態(tài)改變布局信息適應(yīng)條目的位置。如果不做任何事情惊畏,還是應(yīng)用模式人的布局信息恶耽,但是你可以自定義布局動畫。當(dāng)交互完成時颜启,更新數(shù)據(jù)源偷俭。
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 類提供了一個默認(rèn)的手勢重拍條目的位置。為了使用這個手勢缰盏,設(shè)置 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: