IOS development-UI (3) Collection, ios-ui

Source: Internet
Author: User

IOS development-UI (3) Collection, ios-ui

Knowledge Point

1. Create UICollectionView

2. Common proxy methods for UICollectionView

3. UICollectionView-related XIB operations

======================================

Create UICollectionView

1. UICollectionViewLayout

Role: an abstract class that controls the layout of collectionView

 

Note: This class is generally not used directly, because many methods of this class are not implemented, but many attributes and methods are defined. to customize the layout, you must create a class to inherit from UICollectionViewLayout, then set the custom Layout

 

2. UICollectionViewFlowLayout

Role: A waterfall flow layout written by the System

// Use a waterfall stream layout written by the System

UICollectionViewFlowLayout * layout = [UICollectionViewFlowLayout new];

/*

UICollectionViewScrollDirectionVertical,

Uicollectionviewscrolldirehorhorizontal

*/

// Set the sliding direction

Layout. scrollDirection = UICollectionViewScrollDirectionVertical;

// Set the minimum spacing between items (horizontal and vertical)

Layout. minimumInteritemSpacing = 35;

// Set the minimum spacing between items (Vertical spacing indicated by vertical sliding and horizontal sliding)

Layout. minimumLineSpacing = 10;

 

3.-(instancetype) initWithFrame :( CGRect) frame collectionViewLayout :( UICollectionViewLayout *) layout;

Purpose: Create a UICollectionView. A UICollectionViewLayout must be provided.

// Instantiate a UICollectionView

UICollectionView * collectionView = [[UICollectionView alloc] initWithFrame: self. view. bounds collectionViewLayout: layout];

 

4. Protocol proxy

1) UICollectionViewDataSource

2) UICollectionViewDelegateFlowLayout

======================================

Common proxy methods for UICollectionView

# Proxy method of pragma mark-UICollectionView

1.-(NSInteger) numberOfSectionsInCollectionView :( UICollectionView *) collectionView

Role: number of returned groups

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

Return 10;

}

2.-(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section;

Purpose: return the number of elements.

// Returns the number of all elements in each group.

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

{

Return 10;

}

3.-(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath;

Purpose: return the UICollectionViewCell used by the element.

// Return the UICollectionViewCell object used by each element

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

{

// Reuse the queue to find the cell

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

// Change the background color

Cell. backgroundColor = [UIColor redColor];

Return cell;

}

4.-(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout sizeForItemAtIndexPath :( NSIndexPath *) indexPath;

Purpose: return the CGSize of the element.

// Modify the width and height of each item

-(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout sizeForItemAtIndexPath :( NSIndexPath *) indexPath {

Return CGSizeMake (100,100 );

}

5.-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout minimumInteritemSpacingForSectionAtIndex :( NSInteger) section;

Purpose: return the minimum allowed spacing between elements. If it is horizontal sliding, it indicates the vertical distance. If it is vertical sliding, it indicates the horizontal distance.

// The effect is the same as layout. minimumInteritemSpeacing. Either of them is true.

-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout minimumInteritemSpacingForSectionAtIndex :( NSInteger) section {

}

 

6.-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout minimumLineSpacingForSectionAtIndex :( NSInteger) section;

Purpose: return the minimum allowed spacing between elements. horizontal sliding means horizontal distance. Vertical Sliding means vertical distance.

// The effect is the same as that of layout. minimumLineSpacing.

-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout minimumLineSpacingForSectionAtIndex :( NSInteger) section {

}

7.-(UIEdgeInsets) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout insetForSectionAtIndex :( NSInteger) section

Purpose: control the distance between a group of views and the screen boundary (top, left, bottom, right ).

// Return the distance between each group of elements and the four boundary of the screen (top, left, bottom, right)

-(UIEdgeInsets) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout insetForSectionAtIndex :( NSInteger) section {

// Create a structure of UIEdgeInsets

Return UIEdgeInsetsMake (10, 10, 10, 10 );

}

 

8.-(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout referenceSizeForHeaderInSection :( NSInteger) section

Purpose: return the CGSize of the header view. For horizontal sliding, the width is valid. For vertical sliding, only the height is valid.

// Return the width and height of the header View

-(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout referenceSizeForHeaderInSection :( NSInteger) section {

// Note: For vertical sliding, only the height is valid. For horizontal sliding, only the width is valid.

Return CGSizeMake (50, 50 );

}

 

9.-(UICollectionReusableView *) collectionView :( UICollectionView *) collectionView viewForSupplementaryElementOfKind :( NSString *) kind atIndexPath :( NSIndexPath *) indexPath

Purpose: Return to the header view.

// Return the UICollectionReusableView object used by the header and tail views.

-(UICollectionReusableView *) collectionView :( UICollectionView *) collectionView viewForSupplementaryElementOfKind :( NSString *) kind atIndexPath :( NSIndexPath *) indexPath {

// Because this method is required for the instantiation of the header and tail views, you need to use kind to determine whether the generated header view or tail view is

If ([kind isEqualToString: UICollectionElementKindSectionHeader]) {

// Indicates that the header view needs to be created.

// Create a header view in the form of reuse

UICollectionReusableView * headerView = [collectionView dequeueReusableSupplementaryViewOfKind: UICollectionElementKindSectionHeader withReuseIdentifier: @ "header" forIndexPath: indexPath];

// Change the background color

HeaderView. backgroundColor = [UIColor greenColor];

Return headerView;

}

Return nil;

}

 

10.-(void) collectionView :( UICollectionView *) collectionView didSelectItemAtIndexPath :( NSIndexPath *) indexPath;

Purpose: select an element.

// Select an item

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

NSLog (@ "% ld", indexPath. section, indexPath. item );

}

 

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.