Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 390|回复: 0

【iOS学习笔记】用collectionView解决大量button的性能问题

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-6-8 01:34:44 | 显示全部楼层 |阅读模式

    原文可访问:http://blog.csdn.net/u013883974/article/details/50130259

     

    在刚入门的阶段,我们的目标可能只是追求把界面码出来,数据请求过来,并展示在界面上。

    所以也会忽视掉对效率的追求和优化,看完懒加载之后,发现自己的代码里面有很多地方都冗余了。

    在写代码的同时,要反复问自己有没有更简单的,更高效的方法,抽空回顾自己已经写的代码,其实会发现,有很多地方需要更改,甚至整个框架都要修改。这就暴露了当初在设计的时候没有理清关系的问题。

    今天要写的是collectionView,和tableView相比较,collectionView可能低调的不出名。但是collectionView可以用在很多地方,起到点睛的效果。

    拿上面的界面来说,大的结构肯定是tableView没话说,但是第一部分的两行图标,这里怎么做是个问题。当初我直接不假思索,来了一个暴力for循环,然后循环8次,把这个section给做出来了。

    OK,command+r跑一下,发现是那么回事,但是滑动的时候明显略微有点卡顿。

    当时以为是tableView数据加载的时候造成的卡顿,想着后面优化一下就好。

    今天想到了这个问题,然后想起之前在开发群里面问过别人类似的问题,也是多个button的问题,导致滑动非常卡顿。

    于是用collectionView来替代暴力for循环创造button。

    部分代码如下,首先自定义collectionViewCell

     

     

    [objc]  view plain copy
    1. #import "ActivityCollectionViewCell.h"  
    2.   
    3. @implementation ActivityCollectionViewCell  
    4.   
    5. - (id)initWithFrame:(CGRect)frame  
    6. {  
    7.     self = [super initWithFrame:frame];  
    8.     if (self)  
    9.     {  
    10.         [self addImgView];  
    11.     }  
    12.     return self;  
    13. }  
    14.   
    15. - (void)addImgView{  
    16.       
    17.     CGFloat width = 45;  
    18.       
    19.     _imgView = [[UIImageView alloc]initWithFrame:CGRectMake((SCREEN_WIDTH/4.0-width)/2.0, 5, 45, 45)];  
    20.       
    21.     _titleLabel = [UILabel new];  
    22.     _titleLabel.textColor = [UIColor colorWithRed:139/255.0 green:139/255.0 blue:139/255.0 alpha:1.0];  
    23.     _titleLabel.textAlignment = NSTextAlignmentCenter;  
    24.     _titleLabel.adjustsFontSizeToFitWidth = YES;  
    25.     _titleLabel.font = [UIFont systemFontOfSize:13];  
    26.     _titleLabel.frame = CGRectMake((SCREEN_WIDTH/4.0-width)/2.0, _imgView.frame.size.height+_imgView.frame.origin.y+5, width, 20.0);  
    27.       
    28.     [self addSubview:_imgView];  
    29.       
    30.     [self addSubview:_titleLabel];  
    31. }  
    32.   
    33. @end  

     

     

    然后在主界面添加一个collectionView的初始化函数,注册collectionViewCell,设置cell大小:

     

     

    [objc]  view plain copy
    1. - (void)initCollectionView{  
    2.       
    3.     titleArray = [[NSArray alloc]initWithObjects:@"跑步", @"羽毛球",@"游泳",@"骑行",@"乒乓球",@"健身",@"舞蹈",@"更多",nil];  
    4.     imageArray = [[NSArray alloc]initWithObjects:@"01paobu",@"02yumaoqiu",@"03youyong",@"04qixing",@"05pingpang",@"06jianshen",@"07wudao",@"15more",nil];  
    5.       
    6.     UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];  
    7.     flowLayout.itemSize = CGSizeMake(40, 40);  
    8.     flowLayout.minimumLineSpacing = 0;  
    9.     flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;//滑动方向  
    10.       
    11.     btnCollectionView.alwaysBounceHorizontal = YES;//控制水平方向遇到边框是否反弹 BOOL   
    12.     btnCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 165) collectionViewLayout:flowLayout];  
    13.       
    14.     btnCollectionView.backgroundColor = [UIColor whiteColor];  
    15.     btnCollectionView.pagingEnabled = YES;  
    16.     btnCollectionView.showsHorizontalScrollIndicator = NO;  
    17.     btnCollectionView.showsVerticalScrollIndicator = NO;  
    18.     [btnCollectionView registerClass:[ActivityCollectionViewCell class] forCellWithReuseIdentifier:@"depresscell"];//注册cell  
    19.     btnCollectionView.delegate = self;  
    20.     btnCollectionView.dataSource = self;  
    21. }  

     

     

    然后实现collectionView的代理方法

     

     

    [objc]  view plain copy
    1. #pragma mark -- UICollectionViewDataSource  
    2. //定义展示的UICollectionViewCell的个数  
    3. -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section  
    4. {  
    5.     return 8;  
    6. }  
    7. //定义展示的Section的个数  
    8. -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView  
    9. {  
    10.     return 1;  
    11. }  
    12. //每个UICollectionView展示的内容  
    13. -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath  
    14. {  
    15.     static NSString * CellIdentifier = @"depresscell";  
    16.       
    17.     //重用cell  
    18.     ActivityCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];  
    19.       
    20.     cell.imgView.image = [UIImage imageNamed:[imageArray objectAtIndex:indexPath.row]];  
    21.     cell.titleLabel.text = [titleArray objectAtIndex:indexPath.row];  
    22.       
    23.     return cell;  
    24. }  
    25.   
    26. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{  
    27.     CGSize size={0,0};  
    28.     return size;  
    29. }  
    30.   
    31. #pragma mark --UICollectionViewDelegateFlowLayout  
    32. //定义每个UICollectionView 的大小  
    33. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
    34. {  
    35.     return CGSizeMake(SCREEN_WIDTH/4.0, 80);  
    36. }  
    37. //定义每个UICollectionView 的 margin  
    38. -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  
    39. {  
    40.     return UIEdgeInsetsMake(2.5, 0, 0, 0);  
    41. }  
    42.   
    43. // 定义上下cell的最小间距  
    44. - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {  
    45.     return 0;  
    46. }  
    47.   
    48. // 定义左右cell的最小间距  
    49. - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {  
    50.     return 0;  
    51. }  


    最后定义collectionViewCell的点击事件,来代理button的点击事件,就可以了

     

     

    [objc]  view plain copy
    1. #pragma mark --UICollectionViewDelegate  
    2. //UICollectionView被选中时调用的方法  
    3. -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath  
    4. {  
    5.     [self btnclicked:indexPath.row];//代替button的点击事件  
    6. }  
    7. //返回这个UICollectionView是否可以被选择  
    8. -(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath  
    9. {  
    10.     return YES;  
    11. }  


    写完之后再run一下,发现卡顿问题解决了,collectionView是个神奇的东西,还有瀑布流,自定义标签等等功能。

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-1-11 21:07 , Processed in 0.057853 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表