博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS开发UI篇—无限轮播(循环利用)
阅读量:4665 次
发布时间:2019-06-09

本文共 4965 字,大约阅读时间需要 16 分钟。

一、无限轮播 

1.简单说明

  在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动。
  在开发的时候,我们通常的做法是使用一个UIScrollView,在UIScrollView上面添加多个imageView,然后设置imageView的图片,和scrollView的滚动范围。
  以前的做法:
  
  一般而言,轮播的广告或者是图片数量都不会太多(3~5张)。所以,并不会太多的去考虑性能问题。但是如果图片过多(比如有16张图片,就需要创建16个imageView),那么就不得不考虑性能问题了。
  更甚,如果深入做一个图片浏览的小程序,那么可能会处理成百上千张图片,这会造成极大的内存浪费且性能低下。
  图片数量众多:
  
当用户在查看第一张图片的时候,后面的7张创建的时间太早,且用户可能根本就没机会看见(看完前面几张就没有兴趣再看后面的内容 了)。
优化思路:只有在需要用到的时候,再创建,创建的imageView进行循环利用。比较好的做法,不论有多少张图片,只需要创建3个imageView就够了。
  
本文介绍使用Collectionview来实现无限滚动的循环利用。它支持垂直和水平方向上的滚动。
 
二、实现
1.说明:
CollectionCell的用法和tableViewCell的用法不太一样,CollectionCell
需要注册,告诉它这种标识对应的cell是什么类型的cell,如果缓存池中没有,那么它就检测当时这种标识注册的是什么类型的cell,就会自动创建这种类型的Cell。
2.实现步骤
 
  (1)向storyboard中添加一个UICollectionView,调整控件的宽高。
    
  (2)设置其宽高==一张图片的宽高==其一个cell的宽高
    设置cell的格子的大小。其默认为向上滚动的,调整为水平滚动。
    
   
  
  (3)连线,设置其数据源和代理
    
实现代码:
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 11 @interface YYViewController ()
12 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;13 14 @end15 16 @implementation YYViewController17 18 - (void)viewDidLoad19 {20 [super viewDidLoad];21 //注册cell22 static NSString *ID=@"cell";23 [self.collectinView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];24 25 }26 27 #pragma mark- UICollectionViewDataSource28 //一共多少组,默认为1组29 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView30 {31 return 1;32 }33 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section34 {35 return 16;36 }37 38 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath39 {40 static NSString *ID=@"cell";41 UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];42 cell.backgroundColor=YYRandomColor;43 return cell;44 }45 46 #pragma mark-UICollectionViewDelegate47 @end
    界面展示:
    
    打印查看有没有实现cell的循环利用。
    
    可以看出,整个程序中只创建了两个cell。
  (4)展示图片,自定义cell(两种做法,可以使用xib也可以使用代码)。
    自定义一个cell,用来展示图片。
    
    实现代码:
  YYimageCell.h文件
1 // 2 //  YYimageCell.h 3 //  07-无限滚动(循环利用) 4 // 5 //  Created by apple on 14-8-3. 6 //  Copyright (c) 2014年 yangyong. All rights reserved. 7 // 8  9 #import 
10 11 @interface YYimageCell : UICollectionViewCell12 @property(nonatomic,copy)NSString *icon;13 @end

YYimageCell.m文件

1 // 2 //  YYimageCell.m 3 //  07-无限滚动(循环利用) 4 // 5 //  Created by apple on 14-8-3. 6 //  Copyright (c) 2014年 yangyong. All rights reserved. 7 // 8  9 #import "YYimageCell.h"10 11 @interface YYimageCell ()12 @property(nonatomic,strong)UIImageView *imageView;13 @end14 @implementation YYimageCell15 16 - (id)initWithFrame:(CGRect)frame17 {18     self = [super initWithFrame:frame];19     if (self) {20        21         UIImageView *imageView=[[UIImageView alloc]init];22         [self addSubview:imageView];23         self.imageView=imageView;24     }25     return self;26 }27 28 -(void)setIcon:(NSString *)icon29 {30     _icon=[icon copy];31     self.imageView.image=[UIImage imageNamed:icon];32 }33 34 -(void)layoutSubviews35 {36     [super layoutSubviews];37     self.imageView.frame=self.bounds;38 }39 40 @end

  YYViewController.m文件

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 "YYimageCell.h"11 12 #define YYCell @"cell"13 14 @interface YYViewController ()
15 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;16 17 @end18 19 @implementation YYViewController20 21 - (void)viewDidLoad22 {23 [super viewDidLoad];24 //注册cell25 // static NSString *ID=@"cell";26 [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];27 28 }29 30 #pragma mark- UICollectionViewDataSource31 //一共多少组,默认为1组32 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView33 {34 return 1;35 }36 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section37 {38 return 16;39 }40 41 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath42 {43 // static NSString *ID=@"cell";44 YYimageCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYCell forIndexPath:indexPath];45 cell.backgroundColor=YYRandomColor;46 NSLog(@"%p,%d",cell,indexPath.item);47 cell.icon=[NSString stringWithFormat:@"minion_%02d",indexPath.item+1];48 return cell;49 }50 51 #pragma mark-UICollectionViewDelegate52 @end

  界面实现:

  
  (5)细节处理
设置分页
  
调整间距
隐藏水平滚动条。
清除其颜色。

转载于:https://www.cnblogs.com/zengshuilin/p/5766770.html

你可能感兴趣的文章
2014-05-02
查看>>
(二)Luence——代码实现索引及搜索
查看>>
(一)Lucene——基本概念介绍
查看>>
(五)Lucene——中文分词器
查看>>
Android NDK: jni/Android.mk: Cannot find module with tag 'cocos2dx' in import path解决办法
查看>>
3D models 加载
查看>>
软件配置管理
查看>>
javascript dom编程艺术笔记之图片库的改进
查看>>
linux中字符转换命令-tr的用法
查看>>
CSS清浮动办法
查看>>
android中activity的生命周期和应用程序的生命周期
查看>>
Redis 3.2.1集群搭建
查看>>
pytorch实现yolov3(4) 非极大值抑制nms
查看>>
CentOS 5.5 Oracle 11g
查看>>
css3 兼容各个浏览器
查看>>
Java国际化学习(二)------示例
查看>>
C#编码简单性之泛型篇(如何编写简短的C#代码,随时更新)
查看>>
Vijos 小白逛公园 线段树加DP
查看>>
vim,删除所有
查看>>
实验六
查看>>