iOS开发UI篇—无限轮播(循环展示)

简介: iOS开发UI篇—无限轮播(循环展示) 一、简单说明   之前的程序还存在一个问题,那就是不能循环展示,因为plist文件中只有五个数组,因此第一个和最后一个之后就没有了,下面介绍处理这种循环展示问题的小技巧。

iOS开发UI篇—无限轮播(循环展示)

一、简单说明

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

  

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

  代码如下:

 1 //
 2 //  YYViewController.m
 3 //  07-无限滚动(循环利用)
 4 //
 5 //  Created by apple on 14-8-3.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "MJExtension.h"
11 #import "YYnews.h"
12 #import "YYcell.h"
13 
14 #define YYIDCell @"cell"
15 
16 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
17 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;
18 @property(nonatomic,strong)NSMutableArray *news;
19 @end
20 
21 @implementation YYViewController
22 
23 #pragma mark-懒加载
24 //-(NSArray *)news
25 //{
26 //    if (_news==nil) {
27 //        _news=[YYnews objectArrayWithFilename:@"newses.plist"];
28 //    }
29 //    return _news;
30 //}
31 -(NSMutableArray *)news
32 {
33     if (_news==nil) {
34         _news=[NSMutableArray array];
35         for (int i=0; i<200; i++) {
36             NSArray *array=[YYnews objectArrayWithFilename:@"newses.plist"];
37             [_news addObjectsFromArray:array];
38         }
39     }
40     return _news;
41 }
42 
43 - (void)viewDidLoad
44 {
45     [super viewDidLoad];
46     //注册cell
47 //    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
48     [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
49     
50     //默认处于第0组的第500个模型的左边
51     [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:500 inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
52     
53 }
54 
55 #pragma mark- UICollectionViewDataSource
56 //一共多少组,默认为1组
57 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
58 {
59     return 1;
60 }
61 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
62 {
63     return self.news.count;
64 }
65 
66 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
67 {
68     YYcell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYIDCell forIndexPath:indexPath];
69     cell.news=self.news[indexPath.item];
70     NSLog(@"%p,%d",cell,indexPath.item);
71     return cell;
72 }
73 
74 #pragma mark-UICollectionViewDelegate
75 @end

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

  

说明

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

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

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

  代码如下:

 1 //
 2 //  YYViewController.m
 3 //  07-无限滚动(循环利用)
 4 //
 5 //  Created by apple on 14-8-3.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "MJExtension.h"
11 #import "YYnews.h"
12 #import "YYcell.h"
13 
14 #define YYIDCell @"cell"
15 
16 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
17 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;
18 @property(nonatomic,strong)NSArray *news;
19 @end
20 
21 @implementation YYViewController
22 
23 #pragma mark-懒加载
24 -(NSArray *)news
25 {
26     if (_news==nil) {
27         _news=[YYnews objectArrayWithFilename:@"newses.plist"];
28     }
29     return _news;
30 }
31 //-(NSMutableArray *)news
32 //{
33 //    if (_news==nil) {
34 //        _news=[NSMutableArray array];
35 //        for (int i=0; i<200; i++) {
36 //            NSArray *array=[YYnews objectArrayWithFilename:@"newses.plist"];
37 //            [_news addObjectsFromArray:array];
38 //        }
39 //    }
40 //    return _news;
41 //}
42 
43 - (void)viewDidLoad
44 {
45     [super viewDidLoad];
46     //注册cell
47 //    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
48     [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
49     
50     //默认处于第0组的第500个模型的左边
51 //    [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:500 inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
52     
53      [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:50] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
54     
55 }
56 
57 #pragma mark- UICollectionViewDataSource
58 //一共多少组,默认为1组
59 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
60 {
61     return 100;
62 }
63 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
64 {
65     return self.news.count;
66 }
67 
68 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
69 {
70     YYcell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYIDCell forIndexPath:indexPath];
71     cell.news=self.news[indexPath.item];
72     NSLog(@"%p,%d",cell,indexPath.item);
73     return cell;
74 }
75 
76 #pragma mark-UICollectionViewDelegate
77 @end

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

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

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

目录
相关文章
|
1月前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
23 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
7月前
|
设计模式 测试技术 vr&ar
提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除(三)
提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除
|
7月前
|
人工智能 机器人 区块链
提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除(二)
提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除
|
6天前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
6天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
29天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。
|
7月前
|
XML JavaScript 前端开发
SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示试读版
SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示试读版
66 0
QGS
|
4月前
|
前端开发 数据可视化 Java
手拉手JavaFX UI控件与springboot3+FX桌面开发(下)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
74 0
QGS
|
4月前
|
前端开发
手拉手JavaFX UI控件与springboot3+FX桌面开发(中)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
102 0
QGS
|
4月前
|
API 数据安全/隐私保护 索引
手拉手JavaFX UI控件与springboot3+FX桌面开发(上)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
69 1