「iOS」折叠cell

iOS学习

前言

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


简单的折叠cell

效果

先看效果:

原理

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

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

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

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

objectivec 复制代码
-(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的高度以实现折叠。

objectivec 复制代码
- (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 方法中,加入判断使选中的单元格变色,实现如下效果。

objectivec 复制代码
-(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。

相关推荐
2501_915921432 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
2501_915909066 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915106326 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915909066 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007476 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
Zender Han11 小时前
Flutter 实现人脸检测 — 使用 google_mlkit_face_detection
android·flutter·ios
2501_9160088912 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
Mr_zheng17 小时前
iOS 26 UIKit和Swift上的更新
ios·swift
YungFan17 小时前
iOS26适配指南之UISearchController
ios·swift
陈彬技术实践18 小时前
从 Auto Layout 原理看:为什么 UITableView.tableHeaderView 无法自动撑开?
ios