Infinite Carousel (recycling)
I. Infinite Carousel
1. Brief description
In development, it is often necessary to automate the carousel of ads or some images, which is called infinite scrolling. In development, it is common practice to use a uiscrollview, add multiple ImageView on the Uiscrollview, and then set the ImageView's picture, and the ScrollView scroll range. Previous practice:generally speaking, the number of advertisements or pictures is not too much (photos). Therefore, there is not much to consider performance issues. But if there are too many pictures (such as 16 images, you need to create 16 ImageView), then you have to consider performance issues. What's more, if you dive into a small picture-browsing program, you might be dealing with hundreds or thousands of images, which can cause great memory waste and poor performance. A large number of pictures:When the user is viewing the first picture, the next 7 are created too early, and the user may not be able to see it at all (no interest in looking at the back after reading the previous few). Optimize the idea: only when need to use, re-create, create the ImageView for village recycling. Good practice, no matter how many pictures, only need to create 3 imageview is enough. This article describes the use of CollectionView to achieve infinite scrolling recycling. It supports scrolling in both vertical and horizontal directions.
Second, the realization1. Description: Collectioncell usage and Tableviewcell usage is not the same, Collectioncell need to register, tell it this identity corresponds to the cell is what type of cell, if not in the cache pool, Then it detects what type of cell this identity is registered for and automatically creates this type of cell. 2. Implementation step (1) Add a Uicollectionview to storyboard to adjust the width height of the control. (2) set its width height = = The width of a picture = = the width of its one cell sets the size of the cell's lattice. It defaults to scrolling upward, adjusting to horizontal scrolling. (3) Connect, set its data source and proxy implementation code:
8 9 #import "YYViewController.h" @interface Yyviewcontroller () <uicollectionviewdatasource, Uicollectionviewdelegate>12 @property (Weak, nonatomic) Iboutlet Uicollectionview *collectinview;13 @end15 16 @ Implementation YYViewController17-(void) VIEWDIDLOAD19 {[Super VIEWDIDLOAD];21//register cell22 static Nsstri ng *[email protected] "cell"; [Self.collectinview Registerclass:[uicollectionviewcell class] forcellwithreuseidentifier:id];24}26 #pragma mark-uicollectionviewdatasource28//Total number of groups, the default is 1 groups-(Nsinteger) num Berofsectionsincollectionview: (Uicollectionview *) collectionView30 {return 1;32}33-(Nsinteger) CollectionView: ( Uicollectionview *) CollectionView numberofitemsinsection: (Nsinteger) section34 {return 16;36}37-(Uicollectionvi Ewcell *) CollectionView: (Uicollectionview *) CollectionView Cellforitematindexpath: (Nsindexpath *) indexPath39 {40 Static nsstring *[email protected] "cell"; Uicollectionviewcell *ceLl=[collectionview Dequeuereusablecellwithreuseidentifier:id forindexpath:indexpath];42 cell.backgroundColor= yyrandomcolor;43 return cell;44}45 #pragma mark-uicollectionviewdelegate47 @end
Interface display: Print to see if the cell recycling is implemented. As you can see, only two cells were created in the entire program. (4) Display pictures, custom cell (two ways, you can use Xib can also use code). Customize a cell to display images. Implementation code:
YYimageCell.h file
8 9 #import <uikit/uikit.h>10 @interface yyimagecell:uicollectionviewcell12 @property (nonatomic,copy) NSString *icon;13 @end
YYIMAGECELL.M file
1//8 9 #import "YYimageCell.h" @interface Yyimagecell () @property (Nonatomic,strong) Uiimageview *imageview; @end14 @implementation YYimageCell15-(ID) initWithFrame: (CGRect) Frame17 {self = [Super Initwithframe:frame ];19 if (self) { uiimageview *imageview=[[uiimageview alloc]init];22 [self addsubview: imageview];23 self.imageview=imageview;24 }25 return self;26}27-(void) SetIcon: (NSString *) Icon29 { _icon=[icon copy];31 self.imageview.image=[uiimage imagenamed:icon];32}33-(void) LayoutSubviews35 { [Super layoutsubviews];37 self.imageview.frame=self.bounds;38}39 @end
YYVIEWCONTROLLER.M file
9 #import "YYViewController.h" #import "YYimageCell.h" #define Yycell @ "cell" @interface Yyviewcontroller () & Lt Uicollectionviewdatasource,uicollectionviewdelegate>15 @property (Weak, nonatomic) Iboutlet Uicollectionview * collectinview;16 @end18 @implementation YYViewController20-(void) viewDidLoad22 {[Super viewdidload];24 Register CELL25//static nsstring *[email protected] "cell"; [Self.collectinview Registerclass:[yyimagecell cl forcellwithreuseidentifier:yycell];27}29 #pragma mark-uicollectionviewdatasource31//Total number of groups, default to 1 group-(Nsin Teger) Numberofsectionsincollectionview: (Uicollectionview *) collectionView33 {return 1;35}36-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (Nsinteger) section37 {$ return 16;39}40 41 -(Uicollectionviewcell *) CollectionView: (Uicollectionview *) CollectionView Cellforitematindexpath: (NSIndexPath *) indexPath42 {nsstring//static *[email&nbsP;protected] "cell"; Yyimagecell *cell=[collectionview Dequeuereusablecellwithreuseidentifier:yycell ForIndexPath : indexpath];45 cell.backgroundcolor=yyrandomcolor;46 NSLog (@ "%p,%d", Cell,indexpath.item); Cell.icon=[nsstrin G stringwithformat:@ "minion_%02d", indexpath.item+1];48 return cell;49}50 Wuyi #pragma mark-uicollectionviewdelegate52 @ End
Interface implementation: (5) Detail processing set paging adjust spacing to hide the horizontal scroll bar. Clears its color.
Infinite Carousel (recycling)