「iOS」折叠cell

embedded/2024/12/22 2:39:33/

iOS学习

  • 前言
  • 简单的折叠cell
    • 效果
    • 原理
  • 稍作修改
  • 总结

前言

在暑期仿写中,3G share项目里我们简单的使用了折叠cell。现在写一篇博客来总结该方法。


简单的折叠cell

效果

先看效果:
请添加图片描述

原理

将cell的高度设置为一个单元格的高度。创建一个按钮,点击按钮时,自定义cell的高度展开,使cell的高度变为展示所有单元格的高度。点击单元格后重新将cell的高度变为单个单元格的高度,也就实现了cell的折叠。下面给出代码实现。

首先将tableView的高度设置为只能容纳一个单元格的高度。

 self.tableView0 = [[UITableView alloc] initWithFrame:CGRectMake(250, 200, 120, 40) style:UITableViewStylePlain];

添加按钮,并且为其加入响应事件更改tableView的高度。即可实现cell的展开。

-(void) pressbtn_switch:(UIButton *)btn
{btn.selected = !btn.selected;if (btn.selected == YES) {self.tableView0.frame = CGRectMake(250, 200, 120, 40*4);} else {self.tableView0.frame = CGRectMake(250, 200, 120, 40);}
}

此后,我们使用- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath方法,即可实现点击单元格,选中后更替折叠cell中的内容。
需要注意的是:我们需要保留原来单元格所展示的内容,只是进行更换。所以此处先获得我们点击的单元格,再用字符串保留单元格的文本内容。
遍历数组,找到我们点击的单元格,更换第一个单元格和点击单元格的内容,最后维护tableView的高度以实现折叠。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {VCUpload_foldCell* cell = [self.tableView0 cellForRowAtIndexPath:indexPath];NSString* str = [NSString stringWithString:cell.label.text];for (int i = 0; i < 4; i++) {if ([str isEqualToString:self.nsarray[i]]) {self.nsarray[i] = self.nsarray[0];break;}}self.nsarray[0] = str;self.btn_switch.selected = !self.btn_switch;if (self.btn_switch.selected == YES) {self.tableView0.frame = CGRectMake(250, 200, 120, 40*4);} else {self.tableView0.frame = CGRectMake(250, 200, 120, 40);}[self.tableView0 reloadData];
}

稍作修改

如果每次更改单元格的内容,都交换数组的位置,稍微显得不人性化。因此可以将单元格的内容多设置一个,将第一个单元格固定展示内容。并且在
-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 方法中,加入判断使选中的单元格变色,实现如下效果。
请添加图片描述

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{NSString *str = @"VCUpload_foldCell";VCUpload_foldCell *cell = [self.tableView0 dequeueReusableCellWithIdentifier:str];cell.label.text = self.nsarray[indexPath.row];cell.label.backgroundColor = [UIColor whiteColor];if (indexPath.row > 0 && [cell.label.text isEqualToString:self.nsarray[0]]) {cell.label.backgroundColor = [UIColor colorWithRed:47/255.0f green:134/255.0f blue:196/255.0f alpha:1.0];;}return cell;
}

总结

对折叠cell的简单原理总结,该UI的设计还是需要对单元格有熟练的基础,才能设计出好看的折叠cell。


http://www.ppmy.cn/embedded/111192.html

相关文章

云服务器 卸载mysql5并安装mysql8(图文)

目录 1. 卸载2. ubuntu安装3. Bug彩蛋3.1 mysql5配置3.2 跳出密码验证4. 补充centos1. 卸载 在云服务器上卸载 MySQL 5 并安装 MySQL 8 的过程涉及几个步骤,包括 MySQL 版本的移除、系统清理、安装 MySQL 8,以及配置数据库 1.检查 MySQL 版本:mysql --version 2. 停止 My…

【即时通讯】轮询方式实现

技术栈 LayUI、jQuery实现前端效果。django4.2、django-ninja实现后端接口。 代码仓 - 后端 代码仓 - 前端 实现功能 首次访问页面并发送消息时需要设置昵称发送内容为空时要提示用户不能发送空消息前端定时获取消息&#xff0c;然后展示在页面上。 效果展示 首次发送需要…

docker入门安装及使用

docker概述 docker是一种容器技术&#xff0c;它提供了标准的应用镜像&#xff08;包含应用和应用多需要的依赖&#xff09;&#xff0c;因此&#xff0c;我们可以非常轻松的在docker中安装应用&#xff0c;安装好的应用相当于一个独立的容器 如下图所示&#xff0c;为docker中…

phpmyadmin报错mysqli::real_connect(): (HY000/1045): Access denied for user ‘

问题分析 这是因为本身还安装了MySQL&#xff0c;导致发生冲突&#xff0c;只需要找到自己安装的进行关闭即可 方法 在任务管理器(快捷键&#xff1a;ctrlaltdelete)-服务中&#xff0c;找到对应的MySQL进行关闭

使用多进程或多线程进行requests请求数据并比较score

要在Python中使用多进程或多线程并发地向多个接口请求数据&#xff0c;并且每个接口返回一个包含score字段的字典&#xff0c;可以使用requests库结合concurrent.futures模块来实现。这里将提供两种实现方式&#xff1a;一种使用多线程&#xff0c;另一种使用多进程。 1. 使用多…

柯桥外语学习生活日语之与台风有关的日语表达

与台风有关的日语表达&#xff1a; 台風が近づいている (たいふうがちかづいている) - 台风正在靠近 台風が上陸する (たいふうがじょうりくする) - 台风登陆 台風の進路 (たいふうのしんろ) - 台风的路径 強い台風 (つよいたいふう) - 强烈的台风 台風の目 (たいふうのめ…

HP电脑如何启动硬件检测

许多人都在使用HP电脑&#xff0c;但是当出现问题时候&#xff0c;不知道该如何测试&#xff0c;本文来分享一下&#xff0c;如何在电脑能开机但是有问题时进行检测。 使用F2键进行组件测试 步骤&#xff1a;开机后不停敲击键盘上【F2】的按键&#xff0c;进入BIOS设置界面&am…

VSCode中latex文件(Misplaced alignment tab character .LaTeX

Misplaced alignment tab character &.LaTeX 先给出参考文章1 Misplaced alignment tab character &.LaTeX 把bib文件中的 &改为 and 。删除原有的bbl文件、重新运行 选择这个运行 这个错误在overleaf上并没有遇到、在vscode上遇到了 方法二就是把 &改为…