UICollectionView UI_19 in iOS

UICollectionView UI_19 in iOS

UICollectionView is UITableView enhanced Edition

Design Concepts of UITableView and UICollectionView:

1. Layout:

The layout of UITableView can be completed by UITableView and UITableViewDelegate.

The layout of UICollectionView is completed by the UICollectionLayout subclass UICollectionFlowLayout and UICollectionLayoutDelegate.

 

2. layout style

UITableView multiple rows in a single column

UICollectionView supports multiple rows and multiple columns

 

3. Data source:

The data source of UITableView is UITableViewDataSource.

The UICollectionView data source is UICollectionViewDataSource.

 

4. cell Style

The UITableViewCell system provides four styles.

UICollectionViewCell only comes with contentView, but there is nothing in contentView. to display an image, you must customize the text of the cell.

 

5. cell Reuse

Both UITableViewCell and UICollectionCell can be reused.

 

6. header and footer

The header and footer of UITableView cannot be reused, but the header and footer of UICollectionView can be reused.

 

7. Edit

UITableView supports editing, adding, deleting, and moving

UICollectionView does not support editing

 

8. parent class

The parent classes of UITableView and UICollectionView are both UIScrollView

However, UITableView only supports vertical scrolling, while UICollectionView supports vertical and horizontal scrolling.

------------------------------------------

 

AppDelegate. m

 

   self.window.rootViewController = [[[UINavigationController alloc]initWithRootViewController:[RootViewController new]]autorelease];

 

==================================== Cell that comes with the UICollectionView system ============ ======================

 

RootViewController. m

 

# Import RootViewController. h # import DetailViewController. h # define kItem @ item # define kHead @ heaad # define kFooter @ footer @ interface RootViewController ()
 
  
// Follow the protocol @ end
 

-(Void) viewDidLoad {[super viewDidLoad]; self. title = @ collection view; self. view. backgroundColor = [UIColor whiteColor]; // call the layout method of CollectionView [self configureCollectionView];}

 

Layout Method of CollectionView:

 

-(Void) configureCollectionView {// UICollectionViewLayout is the base class of all layout classes and is an abstract class. Generally, the base class (not a view) is rarely used directly ), all use base class subclasses. For all the layout of UICollectionView, we need to use UICollectionViewFlowLayout to complete UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc] init]; // 1. set flowLayout. itemSize = CGSizeMake (130,150); // 2. sets flowLayout. sectionInset = UIEdgeInsetsMake (5, 10, 5, 10); // 3. set the minimum line spacing flowLayout. minimumLineSpacing = 20.0; // 4. sets the spacing of the Item column flowLayout. minimumInteritemSpacing = 20.0; // 5. set the rolling direction of CollectionView // flowLayout. scrollDirection = uicollectionviewscrolldirehorhorizontal; // horizontal scrolling // flowLayout. scrollDirection = uicollectionviewscrolldiredirevertical; // scroll vertically by default. // 6. set flowLayout. headerReferenceSize = CGSizeMake (320, 40); // 7. set the size of the footer flowLayout. footerReferenceSize = CGSizeMake (320, 40); // create a UICollectionView object UICollectionView * collectionView = [[UICollectionView alloc] initWithFrame: [UIScreen mainScreen]. bounds collectionViewLayout: flowLayout]; // you can specify the background color of collectionView. backgroundColor = [UIColor greenColor]; // specifies the data source proxy collectionView. dataSource = self; // register Cell [collectionView registerClass: [UICollectionViewCell class] forCellWithReuseIdentifier: kItem]; // register the header and footer. // The first parameter: reuse View class // The second parameter: reuse is the type of the header and footer // The third parameter: Reuse ID [collectionView registerClass: [UICollectionReusableView class] forSupplementaryViewOfKind: revoke withReuseIdentifier: kHead]; // register the footer [collectionView registerClass: [UICollectionReusableView class] forSupplementaryViewOfKind: UICollectionElementKindSectionFooter withReuseIdentifier: kFooter]; // set business proxy collectionView. delegate = self; // Add collectionView to View Controller [self. view addSubview: collectionView]; [flowLayout release]; [collectionView release];}

 

 

# Pragma mark CollectionView data source proxy method

// Return the number of items in each partition-(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section {return 20;} // return cell-(UICollectionViewCell *) Based on indexPath *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath {UICollectionViewCell * cell = [collectionView partition: kItem forIndexPath: indexPath]; // you can specify the cell color. backgroundColor = [UIColor redColor]; NSLog (@%@, NSStringFromCGRect (cell. frame); return cell;} // returns the number of collectionView partitions-(NSInteger) numberOfSectionsInCollectionView :( UICollectionView *) collectionView {return 2 ;} // Method for returning the reused header and footer-(UICollectionReusableView *) collectionView :( UICollectionView *) collectionView detail :( NSString *) kind atIndexPath :( NSIndexPath *) indexPath {UICollectionReusableView * view = nil; // determine whether to use the header or footer Based on the type. if ([kind isEqualToString: footer]) {// reuse the header view = [collectionView metadata: UICollectionElementKindSectionHeader withReuseIdentifier: kHead forIndexPath: indexPath]; // set the header color view. backgroundColor = [UIColor orangeColor];} else {// reuse footer view = [collectionView failed: UICollectionElementKindSectionFooter withReuseIdentifier: kFooter forIndexPath: indexPath]; // set footer color view. backgroundColor = [UIColor blackColor];} return view ;}

# Business proxy method of pragma mark CollectionView:

-(Void) collectionView :( UICollectionView *) collectionView didSelectItemAtIndexPath :( NSIndexPath *) indexPath {// print the item partition subscript and item subscript NSLog (@ % ld -- % ld, indexPath. section, indexPath. item); [self. navigationController pushViewController: [DetailViewController new] animated: YES];}

# Pragma mark UICollectionViewFlowLayoutDelegate Method

-(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout sizeForItemAtIndexPath :( NSIndexPath *) indexPath {if (0 = indexPath. section % 2) {return CGSizeMake (50, 50);} else {return CGSizeMake (130,130) ;}// return partition indent-(UIEdgeInsets) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout insetForSectionAtIndex :( NSInteger) section {if (0 = section % 2) {return UIEdgeInsetsMake (10, 10, 10, 10 );} else {return UIEdgeInsetsMake (20, 20, 20, 20) ;}/// return the minimum interval between items in each row-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout minimumLineSpacingForSectionAtIndex :( NSInteger) section {return 30;} // return the minimum column spacing between items-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout layout :( NSInteger) section {return 20;} // return the size of the header-(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout layout :( NSInteger) section {return CGSizeMake (320,100);} // return the footer size-(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout layout :( NSInteger) section {return CGSizeMake (320,100 );}

 

 

====================================== Learning custom cell ========== ======================================

Create a page to learn about custom cells, custom headers, and footers:

DetailViewController. m

 

# Import NBViewCell. h # import HeaderView. h # import FooterView. h # define kNBcell @ nb-cell # define kHeadView @ head # define kFootView @ foot @ interface DetailViewController ()
 
  
// Follow the protocol @ end
 

-(Void) viewDidLoad {[super viewDidLoad]; self. view. backgroundColor = [UIColor orangeColor]; // call to configure CollectionView [self configureCollectionView];}

 

 

Configure CollectionView:

// Configure CollectionView-(void) configureCollectionView {// create layout class UICollectionViewFlowLayout * flowout = [[UICollectionViewFlowLayout alloc] init]; // set the item size flowout. itemSize = CGSizeMake (90, 90); // you can specify the header size as flowout. headerReferenceSize = CGSizeMake (320,100); // set the footer size to flowout. footerReferenceSize = CGSizeMake (320, 80); // you can specify the partition indentation value flowout. sectionInset = UIEdgeInsetsMake (5, 5, 5, 5); // create the CollectionView object UICollectionView * collectionView = [[UICollectionView alloc] initWithFrame: [UIScreen mainScreen]. bounds collectionViewLayout: flowout]; // configure the data source proxy collectionView. dataSource = self; // register cell [collectionView registerClass: [NBViewCell class] forCellWithReuseIdentifier: kNBcell]; // register the header [collectionView registerClass: [HeaderView class] metadata: revoke withReuseIdentifier: kHeadView]; // register the footer [collectionView registerClass: [FooterView class] forSupplementaryViewOfKind: UICollectionElementKindSectionFooter withReuseIdentifier: kFootView]; // configure the background color collectionView. backgroundColor = [UIColor whiteColor]; // Add it to the parent view [self. view addSubview: collectionView]; [collectionView release]; [flowout release];}

# Pragma mark data source proxy method:

 

-(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section {return 100;} //-(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath {NBViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier: kNBcell forIndexPath: indexPath]; cell. label. text = [NSString stringWithFormat: @ % ld -- % ld, indexPath. section, indexPath. item]; return cell;}-(NSInteger) numberOfSectionsInCollectionView :( UICollectionView *) collectionView {return 2;}-(UICollectionReusableView *) collectionView :( UICollectionView *) collectionView detail :( NSString *) kind atIndexPath :( NSIndexPath *) indexPath {// reuse the header if ([kind isEqualToString: blank]) {HeaderView * view = [collectionView failed: Invalid withReuseIdentifier: kHeadView forIndexPath: indexPath]; view. photoView. image = [UIImage imageNamed: @ 2]; return view;} else {// reuse footer FooterView * view = [collectionView failed: UICollectionElementKindSectionFooter withReuseIdentifier: kFootView forIndexPath: indexPath]; view. footerLabel. text = [NSString stringWithFormat: @ % ld partition, indexPath. section]; return view ;}}

Prepare a custom cell:

 

 

NBViewCell. h

@interface NBViewCell : UICollectionViewCell@property(nonatomic,retain)UILabel *label;@end

NBViewCell. m

@ Implementation NBViewCell-(void) dealloc {self. label = nil; [super dealloc];} // rewrite the initialization method-(id) initWithFrame :( CGRect) frame {if (self = [super initWithFrame: frame]) {[self. contentView addSubview: self. label];} return self;}-(UILabel *) label {if (_ label = nil) {self. label = [[UILabel alloc] initWithFrame: self. bounds]; self. label. textAlignment = NSTextAlignmentCenter; self. label. backgroundColor = [UIColor cyanColor];} return [[_ label retain] autorelease];} @ end

Prepare a custom header:

Enable display of headers and Images

 

HeaderView. h

 

@interface HeaderView : UICollectionReusableView@property(nonatomic,retain)UIImageView *photoView;@end

HeaderView. m

@implementation HeaderView- (void)dealloc{    self.photoView = nil;    [super dealloc];}- (instancetype)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {                [self addSubview:self.photoView];        }    return self;}- (UIImageView *)photoView{    if (_photoView == nil) {        self.photoView = [[UIImageView alloc]initWithFrame:self.bounds];//        self.photoView.image = [UIImage imageNamed:@a.jpg];        self.photoView.backgroundColor = [UIColor yellowColor];    }        return [[_photoView retain]autorelease]; }@end

Prepare a custom footer:

 

Implement partition display in the footer

FooterView. h

@interface FooterView : UICollectionReusableView@property(nonatomic,retain)UILabel *footerLabel;@end

FooterView. m

@implementation FooterView- (void)dealloc{    self.footerLabel = nil;    [super dealloc];}- (instancetype)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {                [self addSubview:self.footerLabel];            }        return self;}- (UILabel *)footerLabel{        if (_footerLabel == nil) {        self.footerLabel = [[UILabel alloc]initWithFrame:self.bounds];        self.footerLabel.backgroundColor = [UIColor redColor];            }    return [[_footerLabel retain]autorelease];}@end

Header image:

 

Final effect: