iOS Development--uicollectionview First Order

Source: Internet
Author: User

a powerful collection view

Uicollectionview is a new view of data presentation, the most basic collection view is similar to UITableView, that is, multi-row multi-column display data, before trying to use UITableView to achieve more than a row multi-column display pictures, but the effect is generally and more bugs. iOS development-using UITableView to show multiple rows of pictures and Uicollectionview, it's very easy to do so, but some of the waterfall streams in the previous open source communities have become very simple. However, as we have just said, this is the most basic form of uicollectionview, in fact, its truly powerful place lies in full customization. You can inherit the Uicollectionviewlayout class to create your own layout, and thus achieve a fairly powerful effect simply by relatively short code. Examples of special effects in Apple's official example code:





Are you familiar? This is the kind of custom view that was encapsulated by the great gods in the open source community, and now, with Uicollectionviewlayout, we can also combine caanimation to achieve this view of cool animations.


second, acknowledgements

The birth of this article comes from the recent want to write a curriculum, need to use Uicollectionview, deliberately go online to read the information. Prior to my understanding of the collection view was limited to multi-row and multi-column tableview, and later looked at the @onevcat blog to know the power of this view. This article is equivalent to a study note on his blog.


three, some basic concepts


In general, a complete Uicollectionview consists of the following three parts:

cell--is equivalent to a cell in a tabular view that needs to be datasource to specify a data source, the main function being to display pictures or other information, and to handle interactions.

Supplementary views--additional views, analogous to the header and footer in a tabular view, are optional and play a role in displaying additional information.

Decoration views--Decorative view, which refers to a cell's background decoration, such as a background bookshelf in the ibooks app



IV, Data Source

If you are implementing a basic uicollectionview, which is like a multi-row, multi-column table, then the process is the same as implementing UITableView, for which you can create a data source and implement the appropriate method:

<span style= "FONT-SIZE:18PX;" >?-numberofsectionsincollection: Returns how many sections can be understood as how many rows?-collectionview:numberofitemsinsection: Returns how much of the content in each section can be understood as how many columns-collectionview:cellforitematindexpath: Returns each item, which is reused, constructed, initialized, and so on in the method. </span>

Alternatively, you can specify supplementary views

-collectionview:viewforsupplementaryelementofkind:atindexpath:

But there is no way to make decoration views, because this is moved to the uicollectionviewlayout in a separate implementation.

As with UITableView, only the number of columns and the two methods that return item are required, others are optional, but in general we can ensure that a simple uicollectionview works by implementing the first three methods.


v. about multiplexing span>

In UITableView, we can write this to enable cell multiplexing.

<span style= "FONT-SIZE:18PX;" >-(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) indexpath{    NSString *cellid = @ "Cellid";    UITableViewCell *cell = [TableView dequeuereusablecellwithidentifier:cellid];    if (cell = = nil) {        cell = [[UITableViewCell alloc] Initwithstyle:uitableviewcellstylesubtitle reuseidentifier: Cellid];    }    return cell;} </span>

That is, to directly take the multiplexing cell, if it does not exist, create a new one, however, this method is not feasible in Uicollectionview, because there is no

-Dequeuereusablecellwithidentifier: This way, there is only one

-Dequeuereusablecellwithreuseidentifier:forindexpath: Method, this method requires that the cell must be registered with Reuseidentifier in advance. Therefore, it must be registered by one of the following four methods before use.

<span style= "FONT-SIZE:18PX;" >-registerclass:forcellwithreuseidentifier:-registerclass:forsupplementaryviewofkind:withreuseidentifier:- Registernib:forcellwithreuseidentifier:-registernib:forsupplementaryviewofkind:withreuseidentifier:</span >

vi. Interactive processing--delegate


Like UITableView, you can handle cell cell click events, set highlighting and selection status in delegate, and also support long press of the menu.

Slightly different, these events of the cell can be handled separately in the Uicollectionview, rather than being handled uniformly. Specifically, the Indexpath parameter is more in the method, for example:

<span style= "FONT-SIZE:18PX;" >-?collectionview:shouldhighlightitematindexpath:-?collectionview:didhighlightitematindexpath:-? Collectionview:shouldselectitematindexpath: </span>

This makes the process more flexible.


Seven, Uicollectionviewlayout and Uicollectionviewflowlayout

Here by the way, the layout class, this is Uicollectionview and uitableview the biggest difference, but also let Uicollectionview function so powerful essence, so this will take a separate blog record.

Uicollectionviewlayout determines how our Uicollectionview is displayed on the screen, which determines the location, size, transparency, shape of the cell, supplementary views, and decorator view. , hierarchical relationships, and so on. When generating Uicollectionview, it is more common to inherit the Uicollectionviewlayout class and customize the layout, or use the most basic layout that Apple provides to US- Uicollectionviewflowlayout, which is the form of our most common gird view.

In flow Layout, there are several important properties:

-itemsize determines the size of each cell

-minimuminteritemspacingThe minimum space between cell and cell. Why is that the smallest? Like the very popular waterfall stream, the size of each picture is different, so this property determines the minimum spacing between them.

-minimumlinespacing The minimum spacing between rows and lines

-scrolldirection Scroll direction, like UITableView, Uicollectionview is also inherited from Uiscrollview, so this property for its direction of rolling.

The-headerreferencesize,footerreferencesize header, and footer are wide, and only one of these two properties will work, which determines the setting of the scroll direction with the previous property. Width works when scrolling horizontally, height works when scrolling vertically

-sectioninset Indentation, which can be understood as the "enrichment" portion of the cell's boundary.

It is important to note that the above attributes are all global, which means that all cells work, and if you want to set them individually, Flow layout provides the corresponding method:

<span style= "FONT-SIZE:18PX;" >-collectionview:layout:sizeforitematindexpath:-collectionview:layout: minimuminteritemspacingforsectionatindex:-collectionview:layout:minimumlinespacingforsectionatindex:- collectionview:layout:referencesizeforheaderinsection:-collectionview:layout:referencesizeforfooterinsection:- Collectionview:layout:insetforsectionatindex:</span>

viii. summary
< /blockquote>

To achieve a uicollectionview, the work that must be done is the implementation of DataSource and layout, where DataSource is similar to UITableView, and the layout part of Apple has provided a flow Layout for a simple waterfall flow display, while processing user interaction requires delegate, in Uicollectionview, the cell's almost all the properties and interactions can be handled by the method alone.


iOS Development--uicollectionview First Order

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.