Collection View Uicollectionview

What is Uicollectionview

Uicollectionview is a new way of presenting data that can simply be interpreted as a multi-column uitableview (please note that this is the most simple form of uicollectionview). If you've ever used ibooks, you might also have an impression on the Bookshelf layout: a virtual bookshelf with all kinds of books you download and buy, neatly arranged. This is actually a uicollectionview representation, or the clock in the native clock application in the ipad's iOS6, and the simplest layout of Uicollectionview,

IOS6 The simplest uicollectionview of the ipad clock app is a gridview that can display data in multiple columns. The standard Uicollectionview contains three parts, all of which are subclasses of the UIView:

• Cells are used to display the body of content, and for different cells you can specify different sizes and different content, which is later
• Supplementary views Append view if you are familiar with UITableView, you can understand the header or footer of each section to mark the view of each section
• Decoration views Decorative View This is the background of each section, such as the bookshelf in ibooks is this

No matter how the layout of a uicollectionview changes, these three parts are present. Again, the complex uicollectionview never stop at the top of the diagram, and I'll go into some more detail later in this article and in the next note for more complex layouts and corresponding features.

To implement a simple Uicollectionview

Starting with the simplest, UITableView is a very, very important class in iOS development, and I believe that if you are a developer you should be very familiar with this class. There is no big difference between implementing a Uicollectionview and implementing a UITableView, which are also DataSource and delegate design Patterns: DataSource provides the data source for the view, Tell the view what to display and how to display it, delegate provides some small details of the style and the corresponding user interaction. So there's a lot of comparison between collection view and table view in this section, and if you're not familiar with table view, it's a good opportunity to review.

???? Uicollectionviewdatasource

• The number of sections?-numberofsectionsincollection:
• How many item are there in a section?-collectionview:numberofitemsinsection:
• What cell should be displayed for a location?-collectionview:cellforitematindexpath:

The implementation of the above three delegate methods, basically can ensure that collectionview work properly. Of course, there are ways to provide supplementary view

• CollectionView:viewForSupplementaryElementOfKind:atIndexPath:

For decoration views, the provided method is not in the Uicollectionviewdatasource, but directly in the Uicollectionviewlayout class (because it is only view-related and data-independent), put it later.

About reusing

In order to get an efficient view, the reuse of the cell is necessary, avoiding the operation of constantly generating and destroying objects, which is consistent with the situation in UITableView. But it is worth noting that in uicollectionview, not only cells can be reused, supplementary view and decoration view are also available and should be reused. In IOS5, Apple has simplified the reuse of UITableView, which used to write code like this:

123456

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MY_CELL_ID"]; if (!cell) {//如果没有可重用的cell，那么生成一个 cell = [[UITableViewCell alloc] init]; } //配置cell，blablabla return cell

And if we use the method to register the nib with the TableView before requesting data from the data source, we -registerNib:forCellReuseIdentifier: can save the code of the cell every time we judge and initialize it, and if there are no cells available in the reuse queue, Runtime will automatically help us generate and initialize an available cell.

This feature is popular, so Apple inherits this feature in Uicollectionview and extends it a bit. Use the following methods to register:

• -registerclass:forcellwithreuseidentifier:
• -registerclass:forsupplementaryviewofkind:withreuseidentifier:
• -registernib:forcellwithreuseidentifier:
• -registernib:forsupplementaryviewofkind:withreuseidentifier:

There are two major changes compared to UITableView: one is to register a class, so that a view that is generated by code, even if it is not provided with a nib, can be accepted as a cell, and the second is not just cell,supplementary View can also be initialized with a registered method binding. After registering the reuse ID of the collection view, you can write the cell configuration as simple as UITableView:

123456

- (UICollectionView*)collectionView:(UICollectionView*)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath { MyCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; // Configure the cell‘s content cell.imageView.image = ... returncell; }

Need to spit groove is, to collection view, take the method of reuse queue name and UITableView inside is not the same, in front of identifier more reuse five letters, semantically clearer than before, the naming rules are more rigorous than before. It is not known whether Apple will deprecate the UITableView of the name in the pursuit of perfection.

Uicollectionviewdelegate

Data-independent view of the shape Ah, user interaction ah what, by uicollectionviewdelegate to be responsible for:

• The cell's Highlight
• Cell's Selected state
• Can support long-pressed menu

With regard to user interaction, Uicollectionview has also made improvements. Each cell now has a separate highlight event and a delegate of the selected event, and when the user clicks on the cell, the following process is now asked to delegate:

1. -?collectionview:shouldhighlightitematindexpath: Should I highlight it?
2. -?collectionview:didhighlightitematindexpath: If the 1 answer is yes, then highlight
3. -?collectionview:shouldselectitematindexpath: Regardless of the 1 result, ask whether it can be selected?
4. -collectionview:didunhighlightitematindexpath: If the 1 answer is yes, then now uncheck Highlight
5. -collectionview:didselectitematindexpath: If the 3 answer is yes, then select cell

The state control is more flexible than before, and the corresponding highlighting and checking states are represented by the highlighted and selected two properties respectively.

About cell

Compared to UITableViewCell, Uicollectionviewcell not have so many flower heads. First Uicollectionviewcell does not have a variety of default style, which is mainly due to the nature of the display object, because Uicollectionview is used to show the object is more flexible than UITableView, In most cases, it's more about images than text, so there's a lot of demand. So the default Uicollectionviewcell structure provided to us by the SDK is relatively simple, from bottom to top:

• The first is the cell itself as a container view
• Then there is a backgroundview that automatically adapts to the entire cell, which is used as the cell's normal background.
• The Selectedbackgroundview is the background of the cell being selected.
• Finally a contentview, the custom content should be added to this view

This time Apple has brought us a good Kang is the automatic change of the selected cell, all the sub-view in the cell, also including the child view in the Contentview, when the cell is selected, will automatically find whether the view has been selected changes. For example, in Contentview Riga a normal and selected specify a different picture of the ImageView, then select the cell and this picture will be changed from normal to selected, without any additional code.

? Uicollectionviewlayout

Finally to the essence of uicollectionview ... This is also the biggest difference between Uicollectionview and UITableView. Uicollectionviewlayout can be said to be Uicollectionview's brain and center, which is responsible for organizing each cell, supplementary view and decoration views to set their own properties, including but not limited to:

• Position
• Size
• Transparency
• Hierarchical relationships
• Shape
• Wait, wait, etc...

• Layout determines how the Uicollectionview is displayed on the interface. Before presenting, it is generally necessary to generate an appropriate Uicollectionviewlayout subclass object and assign it to the Collectionviewlayout property of CollectionView. For a detailed custom uicollectionviewlayout and some details, I'll write it in a later note.

Apple provides us with one of the simplest and most commonly used default layout objects,??? Uicollectionviewflowlayout. Flow layout is simply a line-aligned layout, and the most common form of grid view is a flow layout configuration. The photo rack interface above is a typical flow Layout.

• The first important attribute is itemsize, which defines the size of each item. By setting itemsize, you can change the size of all cells globally, and if you want to size a cell, you can use the-collectionview:layout:sizeforitematindexpath: method.

• The interval can specify the interval between item and the interval between each row, similar to size, with a global attribute, or a setting for each item and each section:

  • @property (cgsize) minimuminteritemspacing
  • @property (cgsize) minimumlinespacing
  • -collectionview:layout:minimuminteritemspacingforsectionatindex:
  • -collectionview:layout:minimumlinespacingforsectionatindex:

• The scrolling direction is determined by the property scrolldirection to determine the direction of the scroll view, which affects the basic direction of flow layout and the width between the sections determined by the header and the footer.

  • Uicollectionviewscrolldirectionvertical
  • Uicollectionviewscrolldirectionhorizontal

• Header and footer dimensions are equally divided into global and partial. Note that depending on the scrolling direction, only one of the height and width of the header and footer will work. When you scroll vertically, the width of the section is the height of the dimension, and the width works when you scroll horizontally.

  • @property (cgsize) headerreferencesize
  • @property (cgsize) footerreferencesize
  • -collectionview:layout:referencesizeforheaderinsection:
  • -collectionview:layout:referencesizeforfooterinsection:

• Indent in

  • @property uiedgeinsets Sectioninset;
  • -collectionview:layout:insetforsectionatindex:

Summarize

A Uicollectionview implementation consists of two necessary parts: Uicollectionviewdatasource and Uicollectionviewlayout, and an interactive part: Uicollectionviewdelegate. The uicollectionviewflowlayout that Apple has given is already a very powerful layout solution.

A few custom layout

But Uicollectionviewflowlayout is obviously not enough, and if that's the case, it's no different from the existing open source grid view ... The power of Uicollectionview lies in the custom implementations of various layout and the switching between them. Let's look at some fairly exiciting examples.

For example, stacked layouts:

Circular layout:

and cover Flow layout:

All of these layouts use the same data source and delegate method, thus fully decoupling the model and view. But if that's the case, the open source community already has a lot of solutions. Apple's powerful and open-source community cannot match the overall control of the SDK, and CollectionView provides a very simple API that allows developers to use coreanimation to animate between different layout with a simple call. This switchover will definitely increase the user experience, at the cost of just dozens of lines of code to complete the layout implementation, as well as a simple API call, I have to say that now all the open source code compared with it is dwarfed by the ... Have to admire and thank the Uikit team for their efforts.

Collection View Uicollectionview