iOS开发中实现新闻图片的无限循环展示的方法

所属分类: 软件编程 / IOS 阅读数: 365
收藏 0 赞 0 分享

无限轮播(新闻数据展示)
一、实现效果

2015123093114272.png (315×495)2015123093142412.png (313×493)

二、实现步骤

1.前期准备

  (1)导入数据转模型的第三方框架MJExtension

  (2)向项目中添加保存有“新闻”数据的plist文件

2015123093205165.png (638×170)

(3)导入用到的图片素材

2.步骤和代码

(1)新建一个数据模型

2015123093223390.png (523×130)

该模型的代码设计如下:    

  YYnews.h文件

复制代码 代码如下:

//
//  YYnews.h
//  08-无限滚动(新闻数据展示)
//

#import <Foundation/Foundation.h>

@interface YYnews : NSObject
@property(nonatomic,copy)NSString *title;
@property(nonatomic,copy)NSString *icon;
@end


(2)新建一个继承自UICollectionViewCell的类,用于自定义cell。

2015123093240113.png (504×139)

(3)新建一个xib文件,和自定义的cell做关联

2015123093257536.png (408×86)

代码设计如下:

   YYcell.h文件

复制代码 代码如下:

//
//  YYcell.h
//  08-无限滚动(新闻数据展示)
//

#import <UIKit/UIKit.h>

@class YYnews;
@interface YYcell : UICollectionViewCell
@property(nonatomic,strong)YYnews *news;
@end


 YYcell.m文件
复制代码 代码如下:

//
//  YYcell.m
//  08-无限滚动(新闻数据展示)
//

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

@interface YYcell ()
@property (weak, nonatomic) IBOutlet UILabel *label;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end


复制代码 代码如下:

@implementation YYcell

-(void)setNews:(YYnews *)news
{
    _news=news;
    self.label.text=news.title;
    self.imageView.image=[UIImage imageNamed:news.icon];
}

@end


(4)在主控制器中的代码处理

  YYViewController.m文件

复制代码 代码如下:

//
//  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


复制代码 代码如下:

@implementation YYViewController

#pragma mark-懒加载
-(NSArray *)news
{
    if (_news==nil) {
        _news=[YYnews objectArrayWithFilename:@"newses.plist"];
    }
    return _news;
}
- (void)viewDidLoad
{
    [super viewDidLoad];
    //注册cell
//    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
    [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
   
}

#pragma mark- UICollectionViewDataSource
//一共多少组,默认为1组
-(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.补充说明

(1)如果collectionCell是以xib的方式自定义的,那么在注册cell的时候,需要使用另外一种方式。

复制代码 代码如下:

[self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
[self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];

(2)在自定义xib的时候,使用collectionViewCell。并设置其标识为cell.

2015123093336784.png (1136×526)

(3)打印查看cell的利用情况

2015123093358096.png (581×131)

三、无限轮播(循环展示)
1.简单说明

  之前的程序还存在一个问题,那就是不能循环展示,因为plist文件中只有五个数组,因此第一个和最后一个之后就没有了,下面介绍处理这种循环展示问题的小技巧。

2015123093417801.png (316×492)

2.方法一:使用一个for循环,循环200次,创建200*=1000个模型,且默认程序启动后处在第100组的位置,向前有500个模型,向后也有500个模型,产生一种循环展示的假象。

  代码如下:

复制代码 代码如下:

//
//  YYViewController.m
//  07-无限滚动(循环利用)
//
//  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


复制代码 代码如下:

@implementation YYViewController

#pragma mark-懒加载
//-(NSArray *)news
//{
//    if (_news==nil) {
//        _news=[YYnews objectArrayWithFilename:@"newses.plist"];
//    }
//    return _news;
//}
-(NSMutableArray *)news
{
    if (_news==nil) {
        _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];
    //注册cell
//    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
    [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
   
    //默认处于第0组的第500个模型的左边
    [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:500 inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
   
}

#pragma mark- UICollectionViewDataSource
//一共多少组,默认为1组
-(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


 打印查看所处的索引(全程依然只创建了两个cell):

2015123093439235.png (630×171)

说明:

复制代码 代码如下:

  [self.collectinView scrollToItemAtIndexPath:<#(NSIndexPath *)#> atScrollPosition:<#(UICollectionViewScrollPosition)#> animated:<#(BOOL)#>]

 //默认处于第0组的第500个模型的左边

3.方法二:设置其有100组,那么一共有100*5=500个模型。且设置默认处于第50组的索引为0处。

  代码如下:

复制代码 代码如下:

//
//  YYViewController.m
//  07-无限滚动(循环利用)
//
//  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


复制代码 代码如下:

@implementation YYViewController

#pragma mark-懒加载
-(NSArray *)news
{
    if (_news==nil) {
        _news=[YYnews objectArrayWithFilename:@"newses.plist"];
    }
    return _news;
}
//-(NSMutableArray *)news
//{
//    if (_news==nil) {
//        _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];
    //注册cell
//    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
    [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
   
    //默认处于第0组的第500个模型的左边
//    [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
//一共多少组,默认为1组
-(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


注意:上面的两种方法都创建了大量的无用的模型,不太可取。且在实际开发中,建议模型的总数不要太大,因为在其内部需要遍历计算所有控件的frame。

  如果模型数量太大,会占用资源。

改进建议:可以监听手指在上面的滚动,当停止滚动的时候,又重新设置初始的中间位置。

更多精彩内容其他人还在看

iOS开发笔记--详解UILabel的相关属性设置

这篇文章主要介绍了iOS开发笔记--详解UILabel的相关属性设置,对初学者具有一定的参考价值,有需要的可以了解一下。
收藏 0 赞 0 分享

iOS中获取系统相册中的图片实例

这篇文章主要介绍了iOS中获取系统相册中的图片实例,具有一定的参考价值没有需要的朋友可以了解一下。
收藏 0 赞 0 分享

iOS 检测网络状态的两种方法

一般有Reachability和AFNetworking监测两种方式,都是第三方的框架,下文逐一详细给大家讲解,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

IOS 性能优化中离屏渲染

本文主要介绍了IOS 性能优化中离屏渲染的资料,提供了几种方法讲解了优化,有需要的小伙伴可以参考下
收藏 0 赞 0 分享

iOS获取当前设备型号等信息(全)包含iPhone7和iPhone7P

这篇文章主要介绍了iOS获取当前设备型号设备信息的总结包含iPhone7和iPhone7P,包括ios7之前之后的获取方式,本文接的非常详细,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS实现爆炸的粒子效果示例代码

之前在网上看到了一个Android实现的爆炸效果,感觉非常不错,所以自己尝试用iOS来实现下效果,现在将实现的过程、原理以及遇到的问题分享给大家,有需要的朋友们可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

iOS毕业设计之天气预报App

这篇文章主要为大家详细介绍了iOS毕业设计之天气预报App,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS轻点、触摸和手势代码开发

这篇文章主要为大家详细介绍了iOS轻点、触摸和手势代码开发,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS 实现多代理的方法及实例代码

这篇文章主要介绍了iOS 实现多代理的方法及实例代码的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS文字渐变色效果的实现方法

在大家日常开发iOS的过程中,可能会遇到要实现文字渐变色的效果,这篇文章文章通过示例代码和详细的步骤介绍了如何利用iOS实现文字渐变色的效果,实现后的很不错,感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享
查看更多