iOS Flow Layout Uicollectionview Series one--initial knowledge and simple use Uicollectionview

iOS Flow Layout Uicollectionview Series one--initial knowledge and simple use UicollectionviewFirst, Introduction

Uicollectionview is a new UI control introduced after IOS6, and it has many similarities with UITableView, many of which are very similar to proxy methods. Simply put, Uicollectionview is a more powerful UI control than Uitbleview, with the following aspects:

1, support horizontal and vertical layout of two directions

2, Layout configuration method

3, similar to TableView in the cell characteristics, CollectionView in the size and position of the item can be freely defined

4, through the layout callback proxy method, you can dynamically customize the size of each item and collection of the answer layout properties

5, more powerful, completely customize a set of layout layouts, can achieve unexpected results

This blog, we mainly discuss the methods and related properties of CollectionView using native layout, other features and stronger elaboration, will be introduced in the following blog

Second, first to achieve a simplest nine Gongge class layout

Before we learn more about Uicollectionview's properties, let's try using it for a simple flow layout and add the following code to the controller's viewdidload:

    //Create a layout class     uicollectionviewflowlayout * layout  = [[uicollectionviewflowlayout alloc]init];    //set layout direction to vertical flow layout      layout.scrollDirection = UICollectionViewScrollDirectionVertical;     //sets the size of each item to 100*100    layout.itemsize = cgsizemake (100, 100);     //Create collectionview  to create a     uicollectionview through a layout policy layouts  * collect = [[UICollectionView alloc]initWithFrame:self.view.frame  collectionviewlayout:layout];    //Proxy Settings     collect.delegate=self;     collect.datasource=self;    //Register Item type   The type of system used here      [collect registerclass:[uicollectionviewcell class] forcellwithreuseidentifier:@ " Cellid "];      &nbSp [self.view addsubview:collect];

One thing to note here is that CollectionView must register a cell before completing the proxy callback, similar to the following:

[Collect Registerclass:[uicollectionviewcell class] forcellwithreuseidentifier:@ "Cellid"];

This is somewhat similar to TableView, and somewhat different, because TableView, in addition to registering the cell's method, can be created by temporary creation:

TableView when taking the cell from the reuse pool, as in the next two ways//Use this method if no reuse pool, can return nil, we are temporarily created-(nullable __kindof UITableViewCell *) Dequeuereusablecellwithidentifier: (NSString *) identifier;//6.0 after using the following method directly from the registered cell class gets created, if no registration will crash-(__kindof UITableViewCell *) Dequeuereusablecellwithidentifier: (NSString *) identifier Forindexpath: (Nsindexpath *) IndexPath NS _available_ios (6_0);

We can parse: Because Uicollectionview is a new class before iOS6.0, this unifies the method of getting the cell from the reuse pool, without providing a way to return nil, and in Uicollec In the callback agent of Tionview, the cell can only be returned using the method of getting the cell from the reuse pool, and other methods will crash, for example:

This is the right way-(uicollectionviewcell *) CollectionView: (uicollectionview *) collectionview  Cellforitematindexpath: (nsindexpath *) indexpath{    uicollectionviewcell *  cell  = [collectionview dequeuereusablecellwithreuseidentifier:@ "Cellid"  forIndexPath : Indexpath];    cell.backgroundcolor = [uicolor colorwithred:arc4random ()% 255/255.0 green:arc4random ()%255/255.0 blue:arc4random ()%255/255.0 alpha:1];     return cell;} This will crash-(uicollectionviewcell *) CollectionView: (uicollectionview *) collectionview  Cellforitematindexpath: (nsindexpath *) indexpath{//    uicollectionviewcell *  cell  = [collectionview dequeuereusablecellwithreuseidentifier:@ "Cellid"   Forindexpath:indexpath];//    cell.backgroundcolor = [uicolor colorwithred: Arc4random ()%255/255.0 green:arc4random ()%255/255.0 blue:arc4random ()%255/255.0 alpha:1];     uicollectionviewcell * cell = [[uicollectionviewcell alloc]init];     return cell;}

The above error will crash with the following information, let's use the cell from the reuse pool in the same way:

After the above setup is complete, we will implement the following proxy methods:

This is very similar to TableView's callback method.

Returns the number of partitions-(Nsinteger) Numberofsectionsincollectionview: (Uicollectionview *) collectionview{return 1;} Returns the item count per partition-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (NSInteger) section{return 10;} Return each item-(Uicollectionviewcell *) CollectionView: (Uicollectionview *) CollectionView Cellforitematindexpath: ( Nsindexpath *) indexpath{Uicollectionviewcell * cell = [CollectionView dequeuereusablecellwithreuseidentifier:@ "Celli    D "Forindexpath:indexpath]; Cell.backgroundcolor = [Uicolor colorwithred:arc4random ()%255/255.0 green:arc4random ()%255/255.0 blue:arc4random ()%    255/255.0 Alpha:1]; return cell;}

The effect is as follows:

Similarly, if the content is larger than one screen, a view can be slid like a tableview.

With a little detail, we set the vertical layout when we set the layout:

Layout.scrolldirection = uicollectionviewscrolldirectionvertical;//This is the horizontal layout//layout.scrolldirection = Uicollectionviewscrolldirectionhorizontal;

This way the system arranges the second row after a row is filled, and if it is set to horizontal layout, the second column is laid out after a column is filled, which is also known as a streaming layout

Iii. common methods and properties in Uicollectionview

collectionview-  (Instancetype) initWithFrame by a layout strategy: (CGRect) Frame collectionviewlayout: ( uicollectionviewlayout *) layout;//get and set collection layout@property  (Nonatomic, strong)   uicollectionviewlayout *collectionviewlayout;//data source and proxy @property  (nonatomic, weak, nullable)  id <UICollectionViewDelegate> delegate; @property   (nonatomic, weak,  Nullable)  id <uicollectionviewdatasource> datasource;//Register the cell (item) from a class or Xib file-   (void) RegisterClass: (Nullable class) Cellclass forcellwithreuseidentifier: (nsstring *) identifier;-  (void) registernib: (nullable uinib *) Nib forcellwithreuseidentifier: (NSString  *) identifier;//The following two methods are similar to the above, registered here is the head view or the tail view of the class//where the second parameter is the settings   Head view or the tail view   system defines the two strings for us//uikit_extern  nsstring *const uicollectionelementkindsectionheader ns_available_ios (6_0);//UIKIT_EXTERN  nsstring *const uicOllectionelementkindsectionfooter ns_available_ios (6_0);-  (void) RegisterClass: (Nullable Class) Viewclass forsupplementaryviewofkind: (nsstring *) Elementkind withreuseidentifier: (NSString  *) identifier;-  (void) registernib: (nullable uinib *) Nib forsupplementaryviewofkind: ( nsstring *) Kind withreuseidentifier: (nsstring *) identifier;//the two methods are to remove the cell from the reuse pool or the Kinsoku view-  (__ kindof uicollectionviewcell *) Dequeuereusablecellwithreuseidentifier: (NSString *) identifier  forindexpath: (nsindexpath *) indexpath;-  (__kindof uicollectionreusableview *) Dequeuereusablesupplementaryviewofkind: (nsstring *) Elementkind withreuseidentifier: (NSString *) Identifier forindexpath: (nsindexpath *) indexpath;//setting allows check   default yes@property  (nonatomic)  bool allowsselection;//sets whether to allow multiple selection   default no@property  (nonatomic)  BOOL  allowsmultipleselection;//Gets the location information for all selected item- (nullable nsarray<nsindexpath *> *) indexpathsforselecteditems; //set to select an item, and slide the view to the appropriate position, Scrollposition is the relevant parameter of the sliding position, as follows:/*typedef ns_options (nsuinteger,  uicollectionviewscrollposition)  {    //No      uicollectionviewscrollpositionnone                  = 0,    //Vertical layout   corresponding upper and lower      uicollectionviewscrollpositiontop                   = 1 << 0,     uicollectionviewscrollpositioncenteredvertically   = 1 << 1,     UICollectionViewScrollPositionBottom                = 1 << 2,    //the  & used when horizontal layoutnbsp, corresponding to left     UICollectionViewScrollPositionLeft        right           = 1 << 3,     UICollectionViewScrollPositionCenteredHorizontally = 1 << 4,     UICollectionViewScrollPositionRight                 = 1 << 5};*/-  (void) Selectitematindexpath: (Nullable  nsindexpath *) indexpath animated: (BOOL) Animated scrollposition: ( uicollectionviewscrollposition) scrollposition;//A item unchecked-  (void) Deselectitematindexpath: (NSIndexPath  *) indexpath animated: (BOOL) animated;//reload data-  (void) reloaddata;//The following two methods, you can reset the layout of collection, The following method is more than a layout after the completion of the callback, IOS7 can use//using these two methods can produce very cool animation effect-  (void) Setcollectionviewlayout: (uicollectionviewlayout  *) layout animated: (BOOL) ANIMATED;-&NBSP; (void) Setcollectionviewlayout: (uicollectionviewlayout *) layout animated: (BOOL) animated  Completion: (void  (^ __nullable) (bool finished)) Completion ns_available_ios (7_0);// The following methods are more powerful, we can set the animation after the layout changes//This method passed in a layout policy layouts, the system will start the layout rendering, return a Uicollectionviewtransitionlayout object// This Uicollectionviewtransitionlayout object manages animation related properties that we can set-  (uicollectionviewtransitionlayout *) Startinteractivetransitiontocollectionviewlayout: (uicollectionviewlayout *) Layout completion: ( nullable uicollectionviewlayoutinteractivetransitioncompletion) Completion ns_available_ios (7_0);// Once the animation is ready, we need to call the following method to display the layout animation, and then call the block callback-  (void) Finishinteractivetransition ns_available_ios of the method above ( 7_0);//Call this method to cancel the above layout animation settings, and then do the above method block callback-  (void) Cancelinteractivetransition ns_available_ios (7_0) ;//Gets the number of partitions-  (Nsinteger) numberofsections;//Gets the item number of a partition-  (Nsinteger) numberofitemsinsection: (Nsinteger) section;//the following two ways to get the layout property of item or tail view, this UicollectIonviewlayoutattributes objects///store the layout of relevant data, can be used to do a full custom layout, the following blog will introduce-  (nullable  uicollectionviewlayoutattributes *) Layoutattributesforitematindexpath: (nsindexpath *) indexPath;-   (nullable uicollectionviewlayoutattributes *) Layoutattributesforsupplementaryelementofkind: ( nsstring *) Kind atindexpath: (nsindexpath *) indexpath;//get a point where Indexpath location-  (nullable  nsindexpath *) Indexpathforitematpoint: (cgpoint) point;//get the indexpath-  of a cell (nullable  nsindexpath *) Indexpathforcell: (uicollectionviewcell *) cell;//Indexpath according to cell-  (nullable  uicollectionviewcell *) Cellforitematindexpath: (nsindexpath *) indexpath;//gets an array of all visible cells-  ( nsarray<__kindof uicollectionviewcell *> *) visiblecells;//gets the position array of all visible cells-  (NSArray <nsindexpath *> *) indexpathsforvisibleitems;//The following three methods are newly added methods in iOS9 to get the Kinsoku view-  ( uicollectionreusableview *) Supplementaryviewforelementkind: (Nsstring *) Elementkind atindexpath: (nsindexpath *) Indexpath ns_available_ios (9_0);-  (NSArray <uicollectionreusableview *> *) Visiblesupplementaryviewsofkind: (NSString *) ElementKind  ns_available_ios (9_0);-  (nsarray<nsindexpath *> *) Indexpathsforvisiblesupplementaryelementsofkind: (nsstring *) Elementkind ns_available_ios (9_0);// Slide the view to a position that can drive the picture effect-  (void) Scrolltoitematindexpath: (nsindexpath *) Indexpath atscrollposition: ( uicollectionviewscrollposition) scrollposition animated: (BOOL) animated;//The following methods are used to dynamically add, delete, and move certain partitions to get items-   (void) Insertsections: (nsindexset *) sections;-  (void) Deletesections: (nsindexset *) Sections ;-  (void) Reloadsections: (nsindexset *) sections;-  (void) Movesection: (Nsinteger) section  Tosection: (Nsinteger) newsection;-  (void) Insertitemsatindexpaths: (nsarray<nsindexpath *> * ) indexpaths;-  (void) Deleteitemsatindexpaths: (NSARRAY&LT nsindexpath *> *) indexpaths;-  (void) Reloaditemsatindexpaths: (nsarray<nsindexpath * > *) indexpaths;-  (void) Moveitematindexpath: (nsindexpath *) Indexpath toindexpath: ( nsindexpath *) Newindexpath;

iOS Flow Layout Uicollectionview Series one--initial knowledge and simple use Uicollectionview