UI Control---CollectionView

1. Create a uiview---create uicollectionview on the view---Initialize the Uicollectionviewflowlayout instance object first

#import <UIKit/UIKit.h> @interface bcview:uiview@property (nonatomic,strong) Uicollectionview *collectionview; @property (Nonatomic,strong) uicollectionviewflowlayout *layout, @end #import "BCView.h" @implementation bcview-(    Instancetype) initWithFrame: (cgrect) frame{self = [super Initwithframe:frame];    if (self) {[self creatcollectionview]; } return self;} #pragma mark creates collectionview-(void) creatcollectionview{//@property (nonatomic) cgsize headerreferencesize;//@pro    Perty (nonatomic) cgsize footerreferencesize;    Create FlowLayout self.layout = [[Uicollectionviewflowlayout alloc] init];    Set Property Layout self.layout.footerReferenceSize = Cgsizemake (0, 40);    self.layout.headerReferenceSize = Cgsizemake (0, 40);    Set the size of the cell self.layout.itemSize = Cgsizemake (100, 115);    Set the distance between cells//between rows self.layout.minimumLineSpacing = 10;    Distance between left and right columns self.layout.minimumInteritemSpacing = 10; Set slide Direction//layout.scrolldirection = UicollectionViewscrolldirectionhorizontal;    Set the distance between the two sides of item Self.layout.sectionInset = Uiedgeinsetsmake (30, 18, 30, 18); You must specify a layout when creating Uicollectionview (uicollectionviewflowlayout) Self.collectionview = [[Uicollectionview alloc]    Initwithframe:[uiscreen Mainscreen].bounds CollectionViewLayout:self.layout];    Default background Color---black self.collectionView.backgroundColor = [Uicolor Grouptableviewbackgroundcolor]; [Self addSubview:self.collectionView];} @end

2.UIViewController

"JSON data to model data

"Set Uicollectionviewcell based on model data.

Similar to UITableView first to CollectionView registration Uicollectionviewcell

    Register---Register cell with CollectionView    //[Self.rootView.collectionView Registerclass:[uicollectionviewcell class] forcellwithreuseidentifier:@ "Uicollectionviewcel"];    [Self.rootView.collectionView Registerclass:[bcmycollectionviewcell class] forcellwithreuseidentifier:@ " Bcmycollectionviewcell "];

"Here Custom cell

#import <UIKit/UIKit.h> @interface Bcmycollectionviewcell:uicollectionviewcell@property (Nonatomic,strong) Uiimageview *headerimageview; @property (Nonatomic,strong) UILabel *textlabel; #pragma mark create view-(void) creatallviews ;-(void) Updatefram; @end #import "BCMyCollectionViewCell.h" @implementation bcmycollectionviewcell-(Instancetype)    initWithFrame: (cgrect) frame{self = [super Initwithframe:frame];    if (self) {//[self creatallviews]; } return self;}    #pragma mark creates view-(void) creatallviews{[Self.headerimageview Removefromsuperview]; Self.headerimageview = [[Uiimageview alloc] Initwithframe:cgrectmake (0, 0, Self.frame.size.width, (    SELF.FRAME.SIZE.HEIGHT/5)];    [Self.contentview AddSubview:self.headerImageView];    [Self.textlabel Removefromsuperview]; Self.textlabel = [[UILabel alloc] Initwithframe:cgrectmake (0, (SELF.FRAME.SIZE.HEIGHT/5), Self.frame.size.width,    SELF.FRAME.SIZE.HEIGHT/5)]; Center self.textLabel.textAlignment = Nstextalignmentcenter; [Self.contentview AddSubview:self.textLabel];} -(void) updatefram{Self.headerimageview = [[Uiimageview alloc] Initwithframe:cgrectmake (0, 0, Self.frame.size.width, (    SELF.FRAME.SIZE.HEIGHT/5)]; Self.textlabel = [[UILabel alloc] Initwithframe:cgrectmake (0, (SELF.FRAME.SIZE.HEIGHT/5), Self.frame.size.width, SELF.FRAME.SIZE.HEIGHT/5)];}

  Agent method sets the number of groupings, the number of items per grouping, the contents of the cell display---uicollectionviewdatasource,uicollectionviewdelegate

#pragma mark Proxy method//number of groupings-(Nsinteger) Numberofsectionsincollectionview: (Uicollectionview *) collectionview{return 5;} Set Item number-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (NSInteger) section{return self.dataArray.count;} Set the content of the presentation (set cell)-(Uicollectionviewcell *) CollectionView: (Uicollectionview *) CollectionView    Cellforitematindexpath: (Nsindexpath *) indexpath{static NSString *cell_id = @ "Bcmycollectionviewcell"; Go to reuse queue inside looking for cell bcmycollectionviewcell *mycell = [CollectionView dequeuereusablecellwithreuseidentifier:cell_id    Forindexpath:indexpath];    Mycell.backgroundcolor = [Uicolor Whitecolor];    [MyCell Updatefram];    [MyCell Creatallviews];    NSLog (@ "%@", Cell.contentview);    Bcmodel *model = Self.dataarray[indexpath.row];    self.rootView.layout [Mycell.headerimageview Sd_setimagewithurl:[nsurl URLWithString:model.thumbURL];    MyCell.textLabel.text = [NSString stringwithformat:@ "%ld Zhang", indexpath.row+1]; RetuRN MyCell; }

"Sets the head and tail of each grouping---register first

Register head and tail    //Register head---uicollectionelementkindsectionheader     [Self.rootView.collectionView registerclass:[ Uicollectionreusableview class] Forsupplementaryviewofkind:uicollectionelementkindsectionheader withreuseidentifier:@ "header"];    Registered tail     [Self.rootView.collectionView Registerclass:[uicollectionreusableview class] Forsupplementaryviewofkind:uicollectionelementkindsectionfooter withreuseidentifier:@ "Footer"];

#pragma the Mark Proxy method---Set CollectionView's head and tail//CollectionView's head and tail also need to be reused---register first-(Uicollectionreusableview *) CollectionView: (Uicollectionview *) CollectionView viewforsupplementaryelementofkind: (NSString *) kind AtIndexPath: ( Nsindexpath *) indexpath{//head if (kind = = Uicollectionelementkindsectionheader) {//re-queue inside to find the head Uicol Lectionreusableview *reusableview = [CollectionView dequeuereusablesupplementaryviewofkind:kind withReuseIdentifier        : @ "header" Forindexpath:indexpath];        Direct Add button UIButton *button = [[UIButton alloc] Initwithframe:cgrectmake (0, 2, 100, 60)];        [Button settitle:@ "hahaha" forstate:uicontrolstatenormal];                [Reusableview Addsubview:button];        Reusableview.backgroundcolor = [Uicolor Lightgraycolor];    return reusableview; }//Reuse queue to find tail uicollectionreusableview *reusableview = [CollectionView dequeuereusablesupplementaryviewofki        Nd:kind withreuseidentifier:@ "Footer" Forindexpath:indexpath];Reusableview.backgroundcolor = [Uicolor Redcolor]; return Reusableview;}

"Sets the cell size (size)---highest priority

#pragma mark sets the size of the cell---Set the size of each cell-(cgsize) CollectionView: (Uicollectionview *) CollectionView layout: ( uicollectionviewlayout*) collectionviewlayout Sizeforitematindexpath: (Nsindexpath *) indexPath{    BCModel *model = Self.dataarray[indexpath.row];    Self.rootView.layout.itemSize = Cgsizemake ([Model.width FLOATVALUE]/4, [Model.height FLOATVALUE]/4];    return self.rootView.layout.itemSize;    }

UI Control---CollectionView