iOS Development UI Chapter-Infinite Carousel (Recycle)

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). Optimization idea: The ImageView is created and recycled only when it needs to be used.　　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:

1 //2 //YYVIEWCONTROLLER.M3 //07-Infinite Scrolling (recycling)4 //5 //Created by Apple on 14-8-3.6 //Copyright (c) 2014 Yangyong. All rights reserved.7 //8 9 #import "YYViewController.h"Ten  One @interfaceYyviewcontroller () <UICollectionViewDataSource,UICollectionViewDelegate> A@property (Weak, nonatomic) Iboutlet Uicollectionview *Collectinview; -  - @end the  - @implementationYyviewcontroller -  -- (void) Viewdidload + { - [Super Viewdidload]; +     //Register Cell A     StaticNSString *id=@"Cell"; at[Self.collectinview Registerclass:[uicollectionviewcellclass] Forcellwithreuseidentifier:id]; -      - } -  - #pragmaMark-uicollectionviewdatasource - //Total number of groups, default to 1 groups in-(Nsinteger) Numberofsectionsincollectionview: (Uicollectionview *) CollectionView - { to     return 1; + } --(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (nsinteger) section the { *     return  -; $ }Panax Notoginseng  --(Uicollectionviewcell *) CollectionView: (Uicollectionview *) CollectionView Cellforitematindexpath: (NSIndexPath *) Indexpath the { +     StaticNSString *id=@"Cell"; AUicollectionviewcell *cell=[CollectionView dequeuereusablecellwithreuseidentifier:id Forindexpath:indexpath]; theCell.backgroundcolor=Yyrandomcolor; +     returncell; - } $  $ #pragmaMark-uicollectionviewdelegate - @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

1 //2 //YYimageCell.h3 //07-Infinite Scrolling (recycling)4 //5 //Created by Apple on 14-8-3.6 //Copyright (c) 2014 Yangyong. All rights reserved.7 //8 9 #import<UIKit/UIKit.h>Ten  One @interfaceYyimagecell:uicollectionviewcell A@property (nonatomic,copy) NSString *icon; - @end

YYIMAGECELL.M file

1 //2 //YYIMAGECELL.M3 //07-Infinite Scrolling (recycling)4 //5 //Created by Apple on 14-8-3.6 //Copyright (c) 2014 Yangyong. All rights reserved.7 //8 9 #import "YYimageCell.h"Ten  One @interfaceYyimagecell () A@property (nonatomic,strong) Uiimageview *ImageView; - @end - @implementationYyimagecell the  -- (ID) initWithFrame: (CGRect) Frame - { -Self =[Super Initwithframe:frame]; +     if(self) { -         +Uiimageview *imageview=[[Uiimageview alloc]init]; A [self addsubview:imageview]; atself.imageview=ImageView; -     } -     returnSelf ; - } -  --(void) SetIcon: (NSString *) icon in { -_icon=[icon copy]; toSelf.imageview.image=[UIImage Imagenamed:icon]; + } -  the-(void) Layoutsubviews * { $ [Super Layoutsubviews];Panax NotoginsengSelf.imageview.frame=self.bounds; - } the  + @end

YYVIEWCONTROLLER.M file

1 //2 //YYVIEWCONTROLLER.M3 //07-Infinite Scrolling (recycling)4 //5 //Created by Apple on 14-8-3.6 //Copyright (c) 2014 Yangyong. All rights reserved.7 //8 9 #import "YYViewController.h"Ten #import "YYimageCell.h" One  A #defineYycell @ "Cell" -  - @interfaceYyviewcontroller () <UICollectionViewDataSource,UICollectionViewDelegate> the@property (Weak, nonatomic) Iboutlet Uicollectionview *Collectinview; -  - @end -  + @implementationYyviewcontroller -  +- (void) Viewdidload A { at [Super Viewdidload]; -     //Register Cell - //static nsstring *[email protected] "cell"; -[Self.collectinview registerclass:[Yyimagecell class] Forcellwithreuseidentifier:yycell]; -      - } in  - #pragmaMark-uicollectionviewdatasource to //Total number of groups, default to 1 groups +-(Nsinteger) Numberofsectionsincollectionview: (Uicollectionview *) CollectionView - { the     return 1; * } $-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (nsinteger) sectionPanax Notoginseng { -     return  -; the } +  A-(Uicollectionviewcell *) CollectionView: (Uicollectionview *) CollectionView Cellforitematindexpath: (NSIndexPath *) Indexpath the { + //static nsstring *[email protected] "cell"; -     Yyimagecell*cell=[CollectionView Dequeuereusablecellwithreuseidentifier:yycell Forindexpath:indexpath]; $Cell.backgroundcolor=Yyrandomcolor; $NSLog (@"%p,%d", Cell,indexpath.item); -Cell.icon=[nsstring stringWithFormat:@"minion_%02d", indexpath.item+1]; -     returncell; the } - Wuyi #pragmaMark-uicollectionviewdelegate the @end

Interface implementation:

(5) Detail handling set paging adjust spacing to hide the horizontal scrollbar. Clears its color.

iOS Development UI Chapter-Infinite Carousel (Recycle)