The method of realizing the infinite loop display of news pictures in the development of IOS _ios

Source: Internet
Author: User
Tags reserved uikit

Infinite Carousel (news data show)
First, the realization effect

Second, the realization step

1. Preliminary preparation

(1) Mjextension of the third-party framework for importing data-transfer models

(2) Add a plist file to your project that holds "news" data

(3) Import the use of the picture material

2. Steps and Code

(1) Create a new data model

The code for the model is designed as follows:

YYnews.h file

Copy Code code as follows:

//
YYnews.h
08-Infinite Scrolling (news data show)
//

#import <Foundation/Foundation.h>

@interface Yynews:nsobject
@property (nonatomic,copy) NSString *title;
@property (nonatomic,copy) NSString *icon;
@end


(2) Create a new class that inherits from Uicollectionviewcell to customize the cell.

(3) Create a new Xib file and associate it with a custom cell

The code is designed as follows:

YYcell.h file

Copy Code code as follows:

//
YYcell.h
08-Infinite Scrolling (news data show)
//

#import <UIKit/UIKit.h>

@class yynews;
@interface Yycell:uicollectionviewcell
@property (Nonatomic,strong) yynews *news;
@end


YYCELL.M file
Copy Code code as follows:

//
yycell.m
08-Infinite Scrolling (news data show)
//

#import "YYcell.h"
#import "YYnews.h"

@interface Yycell ()
@property (Weak, nonatomic) Iboutlet Uilabel *label;
@property (Weak, nonatomic) Iboutlet Uiimageview *imageview;

@end


Copy Code code as follows:

@implementation Yycell

-(void) Setnews: (Yynews *) News
{
_news=news;
Self.label.text=news.title;
Self.imageview.image=[uiimage ImageNamed:news.icon];
}

@end


(4) Code handling in the main controller

YYVIEWCONTROLLER.M file

Copy Code code as follows:

//
Yyviewcontroller.m
//
//
Created by Apple on 14-8-3.
Copyright (c) 2014 Yangyong. All rights reserved.
//

#import "YYViewController.h"
#import "MJExtension.h"
#import "YYnews.h"
#import "YYcell.h"

#define Yyidcell @ "Cell"

@interface Yyviewcontroller () <UICollectionViewDataSource,UICollectionViewDelegate>
@property (Weak, nonatomic) Iboutlet Uicollectionview *collectinview;
@property (Nonatomic,strong) Nsarray *news;
@end


Copy Code code as follows:

@implementation Yyviewcontroller

#pragma mark-Lazy
-(Nsarray *) News
{
    if (_news==nil) {
    & nbsp;   _news=[yynews objectarraywithfilename:@ "Newses.plist"];
   }
    return _news;
}
-(void) viewdidload
{
    [super Viewdidload];
   //Register cell
//& nbsp;   [Self.collectinview Registerclass:[yyimagecell class] Forcellwithreuseidentifier:yycell];
    [Self.collectinview registernib:[uinib nibwithnibname:@ "Yycell" Bundle:nil] Forcellwithreuseidentifier:yyidcell];
   
}

#pragma mark-uicollectionviewdatasource
How many groups, default to 1 groups
-(Nsinteger) Numberofsectionsincollectionview: (Uicollectionview *) CollectionView
{
return 1;
}
-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (NSInteger) Section
{
return self.news.count;
}

-(Uicollectionviewcell *) CollectionView: (Uicollectionview *) CollectionView Cellforitematindexpath: (NSIndexPath *) Indexpath
{
Yycell *cell=[collectionview Dequeuereusablecellwithreuseidentifier:yyidcell Forindexpath:indexpath];
Cell.news=self.news[indexpath.item];
return cell;
}

#pragma mark-uicollectionviewdelegate
@end


3. Supplementary notes

(1) If the Collectioncell is customized in a xib manner, then a different approach is needed when registering the cell.

Copy Code code as follows:

[Self.collectinview Registerclass:[yyimagecell class] Forcellwithreuseidentifier:yycell];
[Self.collectinview registernib:[uinib nibwithnibname:@ "Yycell" Bundle:nil] forcellwithreuseidentifier:yyidcell];

(2) When customizing the Xib, use Collectionviewcell. and set its identity as a cell.

(3) Print view the use of the cell

Three, infinite carousel (circular display)
1. Simple description

One problem with the previous program is that it can't be recycled because there are only five arrays in the plist file, so the first and last ones are gone, and here's a little tip for dealing with this kind of looping display problem.

2. Method One: Use a For loop, loop 200 times, create a 200*=1000 model, and the default program started in the 100th group position, the forward has 500 models, backward also has 500 models, produces a loop to show the illusion.

The code is as follows:

Copy Code code as follows:

//
Yyviewcontroller.m
07-Infinite Scrolling (recycle)
//
Created by Apple on 14-8-3.
Copyright (c) 2014 Yangyong. All rights reserved.
//

#import "YYViewController.h"
#import "MJExtension.h"
#import "YYnews.h"
#import "YYcell.h"

#define Yyidcell @ "Cell"

@interface Yyviewcontroller () <UICollectionViewDataSource,UICollectionViewDelegate>
@property (Weak, nonatomic) Iboutlet Uicollectionview *collectinview;
@property (Nonatomic,strong) Nsmutablearray *news;
@end


Copy Code code as follows:

@implementation Yyviewcontroller

#pragma mark-lazy
//-(Nsarray *) News
//{
//    if (_news==nil) {
//   & nbsp;    _news=[yynews objectarraywithfilename:@ "Newses.plist"];
//   }
//    return _news;
//}
-(Nsmutablearray *) News
{
    if (_news==nil) {
      & nbsp _news=[nsmutablearray array];
        for (int i=0; i<200; i++) {
             nsarray *array=[yynews objectarraywithfilename:@ "Newses.plist"];
            [_news Addobjectsfromarray:array];
       }
   }
    return _news;
}

-(void) viewdidload
{
    [super Viewdidload];
   //Register cell
// & nbsp;  [Self.collectinview Registerclass:[yyimagecell class] Forcellwithreuseidentifier:yycell];
    [Self.collectinview registernib:[uinib nibwithnibname:@ "Yycell" Bundle:nil] Forcellwithreuseidentifier:yyidcell];
   
   //default to the left of the No. 500 model in group No. 0
    [self.collectinview Scrolltoitematindexpath:[nsindexpath indexpathforitem:500 insection:0] Atscrollposition: Uicollectionviewscrollpositionleft Animated:yes];
   
}

#pragma mark-uicollectionviewdatasource
How many groups, default to 1 groups
-(Nsinteger) Numberofsectionsincollectionview: (Uicollectionview *) CollectionView
{
return 1;
}
-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (NSInteger) Section
{
return self.news.count;
}

-(Uicollectionviewcell *) CollectionView: (Uicollectionview *) CollectionView Cellforitematindexpath: (NSIndexPath *) Indexpath
{
Yycell *cell=[collectionview Dequeuereusablecellwithreuseidentifier:yyidcell Forindexpath:indexpath];
Cell.news=self.news[indexpath.item];
NSLog (@ "%p,%d", Cell,indexpath.item);
return cell;
}

#pragma mark-uicollectionviewdelegate
@end


The index in which to print the view (two cell is still created):

Description

Copy Code code as follows:

[Self.collectinview scrolltoitematindexpath:<# (Nsindexpath *) #> atscrollposition:<# ( uicollectionviewscrollposition) #> animated:<# (BOOL) #>]

The default is the left of the No. 500 model in group No. 0.

3. Method Two: Set it has 100 groups, then altogether has the 100*5=500 model. And the index set by default in group 50th is 0.

The code is as follows:

Copy Code code as follows:

//
Yyviewcontroller.m
07-Infinite Scrolling (recycle)
//
Created by Apple on 14-8-3.
Copyright (c) 2014 Yangyong. All rights reserved.
//

#import "YYViewController.h"
#import "MJExtension.h"
#import "YYnews.h"
#import "YYcell.h"

#define Yyidcell @ "Cell"

@interface Yyviewcontroller () <UICollectionViewDataSource,UICollectionViewDelegate>
@property (Weak, nonatomic) Iboutlet Uicollectionview *collectinview;
@property (Nonatomic,strong) Nsarray *news;
@end


Copy Code code as follows:

@implementation Yyviewcontroller

#pragma mark-Lazy
-(Nsarray *) News
{
    if (_news==nil) {
    & nbsp;   _news=[yynews objectarraywithfilename:@ "Newses.plist"];
   }
    return _news;
}
//-(Nsmutablearray *) News
//{
//    if (_news==nil) {
//    & nbsp;   _news=[nsmutablearray Array];
//        for (int i=0; i<200; i++) {
//     & nbsp;      nsarray *array=[yynews objectarraywithfilename:@ "Newses.plist"];
//            [_news Addobjectsfromarray:array];
//       }
//   }
//    return _news;
//}

-(void) viewdidload
{
    [super Viewdidload];
   //Register cell
// & nbsp;  [Self.collectinview Registerclass:[yyimagecell class] Forcellwithreuseidentifier:yycell];
    [Self.collectinview registernib:[uinib nibwithnibname:@ "Yycell" Bundle:nil] Forcellwithreuseidentifier:yyidcell];
   
   //defaults to the left of the No. 500 model in group No. 0
//    [self.collectinview Scrolltoitematindexpath:[nsindexpath indexpathforitem:500 insection:0] Atscrollposition: Uicollectionviewscrollpositionleft Animated:yes];
   
     [Self.collectinview Scrolltoitematindexpath:[nsindexpath indexpathforitem:0 insection:50] Atscrollposition:uicollectionviewscrollpositionleft Animated:YES];
   
}

#pragma mark-uicollectionviewdatasource
How many groups, default to 1 groups
-(Nsinteger) Numberofsectionsincollectionview: (Uicollectionview *) CollectionView
{
return 100;
}
-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (NSInteger) Section
{
return self.news.count;
}

-(Uicollectionviewcell *) CollectionView: (Uicollectionview *) CollectionView Cellforitematindexpath: (NSIndexPath *) Indexpath
{
Yycell *cell=[collectionview Dequeuereusablecellwithreuseidentifier:yyidcell Forindexpath:indexpath];
Cell.news=self.news[indexpath.item];
NSLog (@ "%p,%d", Cell,indexpath.item);
return cell;
}

#pragma mark-uicollectionviewdelegate
@end


Note: Both of the above methods create a large number of useless models, which are less desirable. In practice, it is recommended that the total number of models not be too large, because it is necessary to traverse the frame that computes all the controls within it.

If the number of models is too large, resources will be consumed.

Suggestions for improvement: You can monitor the scrolling of your fingers on the top, and when you stop scrolling, reset the initial middle position.

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.