自定义UITableView,实现cell的三级分组展开收起

原创 2016年05月31日 00:58:07

要实现的效果如下图



其中一级和二级cell都是分组,三级cell为最小单元


思路1:沿着类似QQ通讯录的二级分组展开收起的思路(使用一维数组管理section,使用二维数组管理row,展开和收起使用cell的rowheight控制,展开返回高度,收起时返回对应cell高度为0),可以用使用三维数组来管理第三级cell的显示。but。。。没设计出合适的UI,这思路就放弃了。有兴趣的可以尝试一下

思路2:在二级分组展开的cell里面,根据数据手动循环创建三级“cell(实际上是二级cell的子视图)”的视图,点击section打开关闭的实现不变,当点击cell的时候,显示或者隐藏三级“cell”并且动态改变二级cell的高度使得数据完全显示。这种思路比思路1稍微绕了一些,但是UI的自定义是可以实现的。

思路3:并不对cell进行分组,只使用一个section,对于cell是一级、二级还是三级全部都交给model数据来处理,数据也是一维数组。以下详细介绍第三种实现。

一、数据模型Model的设计

#import <Foundation/Foundation.h>

@interface DemoModel : NSObject

@property (nonatomic ,assign) NSInteger first_index;    //标记所在的一级cell
@property (nonatomic ,assign) NSInteger second_index;   //标记所在的二级cell
@property (nonatomic ,assign) NSInteger third_index;    //标记所在的三级cell
@property (nonatomic ,assign) BOOL is_show;             //是否显示
@property (nonatomic ,assign) BOOL is_open;             //是否打开

@end


二、单元格cell的处理

//  DemoCell.h
//  MultiGroupDemo
//
//  Created by Stronger_WM on 16/5/28.
//  Copyright © 2016年 Stronger_WM. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "DemoModel.h"

@interface DemoCell : UITableViewCell

- (void)updateCellWithModel:(DemoModel *)model;

//  DemoCell.m
//  MultiGroupDemo
//
//  Created by Stronger_WM on 16/5/28.
//  Copyright © 2016年 Stronger_WM. All rights reserved.
//

#import "DemoCell.h"


@implementation DemoCell

- (void)updateCellWithModel:(DemoModel *)model
{
    //如果是一级cell
    if (model.second_index == 0 && model.third_index == 0) {
        self.textLabel.text = [NSString stringWithFormat:@"%ld.%ld.%ld",model.first_index,model.second_index,model.third_index];
        return;
    }
    
    //如果是二级cell
    if (model.third_index == 0) {
        self.textLabel.text = [NSString stringWithFormat:@"     %ld.%ld.%ld",model.first_index,model.second_index,model.third_index];
        return;
    }
    
    //如果是三级cell
    self.textLabel.text = [NSString stringWithFormat:@"         %ld.%ld.%ld",model.first_index,model.second_index,model.third_index];
}

三、核心代码,点击cell时,对应数据的处理

- (void)clickCellAtIndexPath:(NSIndexPath *)indexPath
{
    DemoModel *current_model = _dataArr[indexPath.row];
    if (current_model.second_index == 0 && current_model.third_index == 0) {
        if (current_model.is_open) {
            for (DemoModel *model in _dataArr) {
                BOOL is_belong = model.first_index == current_model.first_index;    
                BOOL is_current = model.second_index == 0;
                if (is_belong && !is_current) {
                    model.is_open = NO;
                    model.is_show = NO;
                }
            }
            current_model.is_open = NO;
            [_tableView reloadData];
            return;
        }
        else
        {
            for (DemoModel *model in _dataArr) {
                BOOL is_belong = model.first_index == current_model.first_index;
                BOOL is_current = model.second_index == 0;
                if (is_belong && !is_current) {
                    if (model.third_index == 0) {
                        model.is_show = YES;
                    }
                }
            }
            current_model.is_open = YES;
            [_tableView reloadData];
            return;
        }
    }
    if (current_model.third_index == 0) {
        if (current_model.is_open) {
            for (DemoModel *model in _dataArr) {
                BOOL is_belong = model.second_index == current_model.second_index && model.first_index == current_model.first_index;
                BOOL is_current = model.third_index == 0;
                if (is_belong && !is_current) {
                    model.is_show = NO;
                }
            }
            current_model.is_open = NO;
            [_tableView reloadData];
            return;
        }
        else
        {
            for (DemoModel *model in _dataArr) {
                BOOL is_belong = model.second_index == current_model.second_index && model.first_index == current_model.first_index;
                BOOL is_current = model.third_index == 0;
                if (is_belong && !is_current) {
                    model.is_show = YES;
                }
            }
            current_model.is_open = YES;
            [_tableView reloadData];
            return;
        }
    }
    NSLog(@"点击了三级cell");
}

源代码下载地址:https://github.com/StrongerWM/ThreeLevelCellDemo

如有更好的思路或者实现方法,欢迎讨论,哪里不足的地方还望不吝赐教。


版权声明:本文为博主原创文章,未经博主允许不得转载。

iOS三级列表展开,不错的开源

对于三级列表展开的空间,在GitHub上面看到一个不错的第三方:https://github.com/YangKa/YKMutableLevelTableView,在用的过程中只要控制好数据源就好了。...
  • xiaoliu665114
  • xiaoliu665114
  • 2017年05月04日 10:37
  • 1215

iOS开发之三级地区选择功能实现

一行代码实现省市区三级地区选择功能
  • Yj_sail
  • Yj_sail
  • 2016年09月03日 23:36
  • 2541

ios三级展开列表

  • 2014年09月28日 18:24
  • 944KB
  • 下载

iOS 三级展开列表

  • 2015年07月06日 15:08
  • 1.25MB
  • 下载

iOS 多级菜单控件

多级菜单 继承: UIView概述依据上级菜单选中项,展示下级菜单.具有良好的可扩展性,并支持请求加载,默认选中,置顶选项等功能.设计基本原理多级菜单视图,包含两种基本...
  • yanchen_ing
  • yanchen_ing
  • 2016年11月15日 14:59
  • 1556

iOS多级列表demo

  • 2015年10月21日 15:58
  • 154KB
  • 下载

在UIViewController里用UITableView及相关的tableHeaderView、tableFooterView实现三级连动页面页面展示效果

实现方案思路大体如下
  • lgm252008
  • lgm252008
  • 2014年09月22日 08:05
  • 8290

iOS 怎么封装一个三级下拉菜单?

要求 1.可以直接指定多少个栏目 2.最少包含三级菜单 3.可以自定义任何栏目为一级、二级还是三级菜单。 想仿照这个(http://code.cocoachina.com/view/126...
  • niyingxie8035
  • niyingxie8035
  • 2017年01月02日 01:27
  • 357

iOS cell的展开与收起

先附上效果图: 这是demo地址:https://github.com/ZJQian/ShowMoreContentDemo
  • Three_Zhang
  • Three_Zhang
  • 2017年02月09日 15:05
  • 314

ios tableView 的cell打开收起功能,类似QQ中的cell折叠功能

类似QQ联系人界面的cell折叠功能。
  • L_weiguo
  • L_weiguo
  • 2017年02月07日 09:51
  • 1140
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义UITableView,实现cell的三级分组展开收起
举报原因:
原因补充:

(最多只允许输入30个字)