CollectionView is so simple !, Collectionview

CollectionView is so simple !, Collectionview

The UICollectionView and UICollectionViewController classes are newly introduced APIS of iOS6. They are used to display the set view. The layout is more flexible and can implement multi-column layout. The usage is similar to the UITableView and UITableViewController classes.

To use UICollectionView, you must implement the following protocols: UICollectionViewDataSource, UICollectionViewDelegate, and UICollectionViewDelegateFlowLayout.

 

1. First, create a CollectionView (the Code is as follows)

 

-(Void) initCollectionView

{

// You can also give the coordinates of screen adaptation using masnory.

[Self. collectionView mas_makeConstraints: ^ (MASConstraintMaker * make ){

Make. top. reflect to (self. view. mas_bottom). offset (0 );

Make. top. offset (0); // top Interval

Make. left. offset (0); // left

Make. bottom. offset (-10); // bottom

Make. right. offset (0); // right

//

}];

Self. collectionView. backgroundColor = [UIColor colorWithRed: 241 green: 241 blue: 241 alpha: 1]; // background color

Self. collectionView. contentInset = UIEdgeInsetsMake (10, 10, 10); // The position and edge of the inserted content

Self. collectionView. delegate = self; proxy Protocol

Self. collectionView. dataSource = self; Data Source Protocol

[Self. collectionView registerClass: [CollectionViewCell class] forCellWithReuseIdentifier: @ "cell"];

Create a new cell

}

2. You must add UICollectionViewFlowLayout to create a collectionview.

// Use the lazy Loading Method

-(UICollectionView *) collectionView

{

If (! _ CollectionView)

{

UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc] init];

FlowLayout. itemSize = CGSizeMake (SCREEN_WIDTH-50)/4, (SCREEN_WIDTH-50)/4 + 20 );

FlowLayout. minimumLineSpacing = 10; interval of each row

FlowLayout. minimumInteritemSpacing = 10; interval of each line

Self. collectionView = [[UICollectionView alloc] initWithFrame: CGRectZero collectionViewLayout: flowLayout];

[Self. view addSubview: self. collectionView];

}

Return _ collectionView;

}

3. Next we need to create a new class (CollectionviewCell)

 

In the cell. h file, all the content to be displayed has properties.

For example, displaying an image or text

@ Property (nonatomic, strong) UIImageView * familyImageView;

@ Property (nonatomic, strong) UILabel * titleLabel;

Therefore, write the two controls in. m (my coordinates are both masnory adaption and can be provided directly)

-(Instancetype) initWithFrame :( CGRect) frame

{

If (self = [super initWithFrame: frame])

{

Self. familyImageView = [[UIImageView alloc] init];

Self. titleLabel = [[UILabel alloc] init];

Self. titleLabel. font = [UIFont systemFontOfSize: 13];

Self. titleLabel. textAlignment = NSTextAlignmentCenter;

[Self. contentView addSubview: self. titleLabel];

[Self. contentView addSubview: self. familyImageView];

// Make is an attribute of masnory used to define coordinate locations.

[Self. familyImageView mas_makeConstraints: ^ (MASConstraintMaker * make)

{

Make. top. offset = 10;

Make. left. offset = 10;

Make. bottom. reflect to (self. titleLabel. mas_top). offset (-10 );

Make. right. offset =-10;

}];

[Self. titleLabel mas_makeConstraints: ^ (MASConstraintMaker * make)

{

Make. left. offset = 0;

Make. bottom. offset = 0;

Make. right. offset = 0;

Make. height. offset = 20;

}];

}

Return self;

}

4. the prerequisites are basically completed. The next step is to implement the Protocol proxy method to display the content on the screen.

// Number of zones

-(NSInteger) numberOfSectionsInCollectionView :( UICollectionView *) collectionView {

Return 1;

}

// Small modules displayed in each area

-(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section {

Return 18;

}

Cell content

-(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath

{

CollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier: @ "cell" forIndexPath: indexPath];

Note that the preceding CollectionViewCell is the same as the cell name you created.

 

The following shows the content you want to display. You can use properties by calling cell hitting directly.

Cell. familyImageView. image = _ arr [indexPath. row]; this is an image I previously defined.

Cell. titleLabel. text = nameArr [indexPath. row]; label

 

 

Return cell;

}

Cell click Method

-(Void) collectionView :( UICollectionView *) collectionView didSelectItemAtIndexPath :( NSIndexPath *) indexPath

{

 

}

 

This is basically the case. May the ape friends marry Bai fumei as soon as possible and move towards the life peak!