IOS development-detailed description of UICollectionView + instance

This chapter first introduces UICollectionView and its common methods, and then combines an instance to learn how to use UICollectionView.

 

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.

 

The following describes some common methods. (Only common APIs are provided. Other APIs can be viewed)

1. # Pragma mark -- UICollectionViewDataSource

1. // Define the number of uicollectionviewcells displayed
2. -(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section
3. {
4. Return 30;
5. }

1. // Define the number of displayed sections
2. -(NSInteger) numberOfSectionsInCollectionView :( UICollectionView *) collectionView
3. {
4. Return 1;
5. }

1. // Content displayed for each UICollectionView
2. -(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath
3. {
4. Static NSString * CellIdentifier = @ "GradientCell ";
5. UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier: CellIdentifier forIndexPath: indexPath];
7. Cell. backgroundColor = [UIColor colorWithRed :( (10 * indexPath. row)/255.0) green :( (20 * indexPath. row)/255.0) blue :( (30 * indexPath. (row)/255.0) alpha: 1.0f];
8. Return cell;
9. }

1. # Pragma mark -- UICollectionViewDelegateFlowLayout

1. // Define the size of each UICollectionView
2. -(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout sizeForItemAtIndexPath :( NSIndexPath *) indexPath
3. {
4. Return CGSizeMake (96,100 );
5. }

1. // Define the margin of each UICollectionView
2. -(UIEdgeInsets) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout insetForSectionAtIndex :( NSInteger) section
3. {
4. Return UIEdgeInsetsMake (5, 5, 5, 5 );
5. }

1. # Pragma mark -- UICollectionViewDelegate

1. // Method called when UICollectionView is selected
2. -(Void) collectionView :( UICollectionView *) collectionView didSelectItemAtIndexPath :( NSIndexPath *) indexPath
3. {
4. UICollectionViewCell * cell = (UICollectionViewCell *) [collectionView cellForItemAtIndexPath: indexPath];
5. Cell. backgroundColor = [UIColor whiteColor];
6. }

1. // Return whether the UICollectionView can be selected
2. -(BOOL) collectionView :( UICollectionView *) collectionView shouldSelectItemAtIndexPath :( NSIndexPath *) indexPath
3. {
4. Return YES;
5. }

 

 

 

The following is an example. (The example is from the network. However, it is obtained through a third party and cannot be connected. Sorry .)

 

The emergence of iOS CollectionView is a major benefit. You no longer need to use TableView to define complex multi-column tables. The usage is similar to that of Table, but the Cell must be added by yourself, with no default mode.

Because CollectionView does not have the default Cell Layout, it is generally convenient and convenient to customize.

1. Custom Cell

1. New Class CollectionCell inherited from UICollectionViewCell

2. Create Xib and name it CollectionCell. xib.

A. Select CollectionCell. xib to delete the default View, drag a Collection View Cell (Figure 3) from the control to the canvas, and set the size to 95*116;

 

B. Select the Cell you just added and change the class name to CollectionCell, 4

C. Add an ImageView and a Label to CollectionCell of CollectionCell. xib (figure 5)

D. Create a ing, as shown in Figure 6 and Figure 7.

E. Select CollectionCell. m and rewrite the init method.

1. -(Id) initWithFrame :( CGRect) frame
2. {
3. Self = [super initWithFrame: frame];
4. If (self)
5. {
6. // Load the collectionCell. xib file during initialization
7. NSArray * arrayOfViews = [[NSBundle mainBundle] loadNibNamed: @ "CollectionCell" owner: self options: nil];
9. // Return nil if the path does not exist
10. If (arrayOfViews. count <1)
11. {
12. Return nil;
13. }
14. // If the view in xib does not belong to the UICollectionViewCell class, return nil
15. If (! [[ArrayOfViews objectAtIndex: 0] isKindOfClass: [UICollectionViewCell class])
16. {
17. Return nil;
18. }
19. // Load nib
20. Self = [arrayOfViews objectAtIndex: 0];
21. }
22. Return self;
23. }

F. Select CollectionCell. xib and change its identifier to CollectionCell.

Ii. Define UICollectionView;

1. Drag a Collection View to the View of the specified ViewController.

2. Connect dataSource and delegate, create a ing, and name it CollectionView.

3. Select the scale of CollectionView and change the Width and Height of the Cell Size to 95*116, which is the same as that of the custom Cell, as shown in figure 8.

4. Select the CollectionView attribute to modify its attributes, such as Vertical sliding or Horizontal sliding. Select Vertical or Horizontal.

5. Select CollectionViewCell, modify Class, and inherit from CollectionCell

5. Declare the Cell class in the ViewDidLoad method and add it to the ViewDidLoad method. If this sentence is not declared, it cannot be loaded and the program crashes.

CollectionCell is the Cell identifier (defined in the previous steps. )

1. [Self. collectionView registerClass: [CollectionCell class] forCellWithReuseIdentifier: @ "CollectionCell"];

6. Declare the proxy in ViewController. h.

1. @ Interface ViewController: UIViewController <UICollectionViewDataSource, UICollectionViewDelegate>

 

7. modern management methods in. m Files

1. // Number of items in each section
2. -(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section
3. {
4. Return 12;
5. }
7. -(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath
8. {
10. CollectionCell * cell = (CollectionCell *) [collectionView dequeueReusableCellWithReuseIdentifier: @ "CollectionCell" forIndexPath: indexPath];
12. // Image name
13. NSString * imageToLoad = [NSString stringWithFormat: @ "mongod.png", indexPath. row];
14. // Load the image
15. Cell. imageView. image = [UIImage imageNamed: imageToLoad];
16. // Set the label text
17. Cell. label. text = [NSString stringWithFormat: @ "{% ld, % ld}", (long) indexPath. row, (long) indexPath. section];
19. Return cell;
20. }

 

8. Effect 10

After clicking an item, the jump event is similar to the UITableView to implement the proxy method.

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

No more