广告
返回顶部
首页 > 资讯 > 移动开发 >iOS实现折叠单元格
  • 630
分享到

iOS实现折叠单元格

iOS折叠单元格 2022-05-29 10:05:11 630人浏览 安东尼
摘要

本文实例为大家分享了iOS实现折叠单元格的具体代码,供大家参考,具体内容如下 思路 点击按钮或cell单元格来进行展开收缩, 同时使用一个BOOL值记录单元格展开收缩状态。根据BOO

本文实例为大家分享了iOS实现折叠单元格的具体代码,供大家参考,具体内容如下

思路

点击按钮或cell单元格来进行展开收缩, 同时使用一个BOOL值记录单元格展开收缩状态。根据BOOL值对tableView的高度和button的image进行实时变更。

注意点:

在执行- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath( 点击当前单元格)方法时,收缩单元格,显示当前点击的单元格的内容。这一步骤的实现是对存储单元格内容的可变数组进行更改。

代码


//ViewController.h 中

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property UITableView *tableView;
@property UIButton *button;   
@property NSMutableArray *imageViewArr; 
@property NSMutableArray *labelArr;  
@property BOOL select;    //记录单元格展开收缩状态

@end

//ViewController.m 中

#import "ViewController.h"
#import "ViewTableViewCell.h"
#import "Masonry.h"

@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 
 self.view.backgroundColor = [UIColor colorWithWhite:0.92 alpha:1];
 
 _imageViewArr = [[NSMutableArray alloc] initWithObjects:@"1", @"2", @"3", @"4", @"5", nil];
 _labelArr = [[NSMutableArray alloc] initWithObjects:@"发起群聊", @"添加朋友", @"扫一扫", @"收付款", @"帮助与反馈", nil];
 
 _tableView = [[UITableView alloc] init];
 [self.view addSubview:_tableView];

 _tableView.frame = CGRectMake(100, 100, 130, 35);
 //以下使用Masonry对tableView进行约束, 约束不是很规范 可忽略
// [_tableView mas_makeConstraints:^(MASConstraintMaker *make) {
//  make.height.mas_offset(self.view.frame.size.height * 0.0485);
//  make.width.mas_offset(self.view.frame.size.width * 0.335);
//  make.left.equalTo(self.view.mas_left).offset(self.view.frame.size.width * 0.6);
//  make.top.equalTo(self.view.mas_top).offset(self.view.frame.size.height * 0.046);
//
// }];
 
 _tableView.delegate = self;
 _tableView.dataSource = self;
 [_tableView reGISterClass:[ViewTableViewCell class] forCellReuseIdentifier:@"cell"];
 
 _button = [UIButton buttonWithType:UIButtonTypeCustom];
 [self.view addSubview:_button];

 [_button mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(_tableView.mas_right).offset(-28);
  make.top.equalTo(_tableView.mas_top).offset(4);
  make.height.mas_offset(self.view.frame.size.height * 0.0495 * 0.68);
  make.width.mas_offset(self.view.frame.size.width * 0.335 * 0.22);
  
 }];
 [_button setImage:[UIImage imageNamed:@"shou"] forState:UIControlStateNORMal];
 [_button addTarget:self action:@selector(press) forControlEvents:UIControlEventTouchUpInside];
 //默认单元格为收缩 select为0
 _select = 0;
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
 return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 //根据select的值来判断收缩展开状态,返回相应的行数 
 if(_select == 0) {
  return 1;
 } else {
  return 5;
 }
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 40;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
 ViewTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
 cell.iimageView.image = [UIImage imageNamed:_imageViewArr[indexPath.row]];
 cell.label.text = [NSString stringWithString:_labelArr[indexPath.row]];
 return cell;
}

//点击当前单元格
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

 //记录当前单元格的imageView 和 Label的内容
 NSString *imageViewStr = [NSString stringWithString:_imageViewArr[indexPath.row]];
 NSString *labelStr = [NSString stringWithString:_labelArr[indexPath.row]];

 //将当前单元格的内容插入可变数组,作为第一个元素
 [_imageViewArr insertObject:imageViewStr atIndex:0];
 [_labelArr insertObject:labelStr atIndex:0];
 
 //同时删除可变数组中当前单元格的原本所在位置
 [_imageViewArr removeObjectAtIndex:indexPath.row + 1];
 [_labelArr removeObjectAtIndex:indexPath.row + 1];
 
 //更新tableView
 [_tableView reloadData];
 
 //调用press方法, 变更tableView的高度 和 button的image
 [self press];
 
}


- (void)press {

 //通过判断select的值, 判断单元格的展开与收缩,更改tableView的高度 和 button的image
 if (_select == 0) {
  _select = 1;
  
  _tableView.frame = CGRectMake(100, 100, 130, 200);
  
  //以下使用masonry对tableView进行更新约束 (以下代码为更新tableView的高度)
//  [_tableView mas_updateConstraints:^(MASConstraintMaker *make) {
//   make.height.mas_offset(200);
//  }];

  [_button setImage:[UIImage imageNamed:@"kai"] forState:UIControlStateNormal];
  
 } else {
  _select = 0;
  _tableView.frame = CGRectMake(100, 100, 130, 35);
//  [_tableView mas_updateConstraints:^(MASConstraintMaker *make) {
//   make.height.mas_offset(self.view.frame.size.height * 0.0485);
//  }];

  [_button setImage:[UIImage imageNamed:@"shou"] forState:UIControlStateNormal];
 }
 [_tableView reloadData];
}

@end

// ViewTableViewCell.h 中

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface ViewTableViewCell : UITableViewCell

@property UIImageView *iimageView;
@property UILabel *label;

@end

//ViewTableViewCell.m中

#import "ViewTableViewCell.h"

@implementation ViewTableViewCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
 self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
 
 _iimageView = [[UIImageView alloc] init];
 [self.contentView addSubview:_iimageView];
 
 _label = [[UILabel alloc] init];
 [self.contentView addSubview:_label];
 return self;
}

- (void)layoutSubviews {
 [super layoutSubviews];
 _iimageView.frame = CGRectMake(5, 5, 25, 25);
 _label.frame = CGRectMake(37, 5, 80, 25);
 _label.font = [UIFont systemFontOfSize:15];
}

@end

效果图如下

初始状态

点击cell或点击按钮,显示如下:

点击任意cell, 例如点击扫一扫,单元格收回,如图

再次展开单元格, cell的内容如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: iOS实现折叠单元格

本文链接: https://www.lsjlt.com/news/30428.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS实现折叠单元格
    本文实例为大家分享了iOS实现折叠单元格的具体代码,供大家参考,具体内容如下 思路 点击按钮或cell单元格来进行展开收缩, 同时使用一个BOOL值记录单元格展开收缩状态。根据BOO...
    99+
    2022-05-29
    iOS 折叠 单元格
  • iOS实现单元格折叠
    本文实例为大家分享了iOS实现单元格折叠的具体代码,供大家参考,具体内容如下 折叠的核心是单元格的行数或列数实时变化 比较重要的步骤有: 设置数组 (可变数组,用于更新单元格内容) ...
    99+
    2022-06-04
    iOS 单元格 折叠
  • iOS实现列表折叠效果
    本文实例为大家分享了iOS实现列表折叠效果的具体代码,供大家参考,具体内容如下 实现列表折叠效果其实比较简单,点击列表头部的时候,把返回列表行数设为 0,就是收起列表;再次点击列表头...
    99+
    2022-05-26
    iOS 列表 折叠
  • iOS实现图片折叠效果
    本文实例为大家分享了iOS实现图片折叠效果的具体代码,供大家参考,具体内容如下 效果图: 结构布局:拖两个UIImageView到控制器,设置相同的frame和图片,再拖一个大的U...
    99+
    2022-05-15
    iOS 图片折叠
  • HTML5怎么实现折叠菜单
    这篇文章主要介绍“HTML5怎么实现折叠菜单”,在日常操作中,相信很多人在HTML5怎么实现折叠菜单问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5怎么实现折叠菜单”...
    99+
    2022-10-19
  • JavaScript如何实现折叠菜单
    这篇文章主要介绍了JavaScript如何实现折叠菜单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 JavaS...
    99+
    2022-10-19
  • 纯css怎样实现多级折叠菜单折叠树效果
    这篇文章将为大家详细讲解有关纯css怎样实现多级折叠菜单折叠树效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。运用checkbox的checked值来判断下级栏目是否展开,CSS3的选择器中提供了:ch...
    99+
    2023-06-08
  • jquery如何实现折叠菜单效果
    这篇文章将为大家详细讲解有关jquery如何实现折叠菜单效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。这是一个简单的折叠框效果实现,核心内容jQ库里的slideTog...
    99+
    2022-10-19
  • 怎么用CSS实现圆角折叠菜单
    本篇内容主要讲解“怎么用CSS实现圆角折叠菜单”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用CSS实现圆角折叠菜单”吧!代码如下:<html>...
    99+
    2022-10-19
  • iOS使用UICollectionView实现拖拽移动单元格
    目录一.介绍二.方法和步骤三.iOS9之后添加的API本文实例为大家分享了iOS开发UICollectionView拖拽移动单元格的具体代码,供大家参考,具体内容如下 一.介绍 iO...
    99+
    2022-11-13
  • Vue表格隐藏行折叠效果如何实现
    这篇“Vue表格隐藏行折叠效果如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue表格隐藏行折叠效果如何实现”文章吧...
    99+
    2023-07-06
  • 小程序如何实现多折叠展开菜单
    这篇文章主要讲解了“小程序如何实现多折叠展开菜单”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序如何实现多折叠展开菜单”吧!小程序实现多折叠展开菜单效果展示:  开始正题  上方Nav ...
    99+
    2023-06-26
  • 如何使用纯CSS实现圆角折叠菜单
    小编给大家分享一下如何使用纯CSS实现圆角折叠菜单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码如下:<html>...
    99+
    2022-10-19
  • Android使用ExpandableListView实现三层嵌套折叠菜单
    前段时间项目的新功能里有些页面需要三层嵌套列表实现,虽然在移动端这种很丑,但是需求就是需求。 本来想用各种View嵌套,然后发现系统有个ExpandableListView。就直接...
    99+
    2022-11-12
  • iOS怎么使用UICollectionView实现拖拽移动单元格
    这篇“iOS怎么使用UICollectionView实现拖拽移动单元格”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“iOS怎...
    99+
    2023-06-30
  • slideToggle+slideup如何实现手机端折叠菜单效果
    这篇文章主要为大家展示了“slideToggle+slideup如何实现手机端折叠菜单效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“slideToggle+...
    99+
    2022-10-19
  • vue.js实现简易折叠面板
    本文实例为大家分享了vue.js实现简易折叠面板的具体代码,供大家参考,具体内容如下 代码如下: 主文件:app.vue <template> <div ...
    99+
    2022-11-12
  • 如何实现AmazeUI折叠面板
    这篇文章主要介绍了如何实现AmazeUI折叠面板,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Amaze UI 是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏...
    99+
    2023-06-09
  • Bootstrap如何实现可折叠分组侧边导航菜单
    小编给大家分享一下Bootstrap如何实现可折叠分组侧边导航菜单,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!效果图:源码:<!DOCTYPE html> <...
    99+
    2022-10-19
  • 怎么在html5中实现一个BUI折叠菜单插件
    本篇文章为大家展示了怎么在html5中实现一个BUI折叠菜单插件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一个点击显示隐藏的效果, 并且点击的时候, 会先把展开进行隐藏, 再展开自己的. 从界面...
    99+
    2023-06-09
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作