实现类似QQ的折叠效果

Posted 2020-06-17

//  主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起。

//  ViewController.m
//  实现类似QQ的折叠效果
//
//  Created by skg_Myfly on 16/3/3.
//  Copyright © 2016年 skg_Myfly. All rights reserved.
//

#import "ViewController.h"
#import "QQCellModel.h"
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
/** tableview */
@property (nonatomic , strong ) UITableView *tableView;

/** 全局数据源 */
@property (nonatomic , strong ) NSMutableArray *dateArray;

@end

@implementation ViewController

//懒加载

-(NSMutableArray *)dateArray{
    if (!_dateArray) {
        self.dateArray = [NSMutableArray array];
    }
    return _dateArray;
}

- (void)viewDidLoad {

    [super viewDidLoad];

    //添加数据

    for (int i = ‘A‘;  i <= ‘Z‘; i ++) {
        QQCellModel* model =   [[QQCellModel alloc] init];
        model.name =  [NSString stringWithFormat:@"%c",i];
//        model.isShow = YES;
        for (int j = 0;  j < 10; j ++) {
            [model.array addObject: [NSString stringWithFormat:@"%c - %d",i,j]];
        }
       
        [self.dateArray addObject:model];
       

    }

//实例化表单

    _tableView =  [[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStyleGrouped];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    _tableView.rowHeight = 50;
    [self.view addSubview:_tableView];
   
   
}

 

//合计多少组

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
   
    return  [_dateArray count];
}

 

//每组里面含多少行

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    QQCellModel* model =  [_dateArray objectAtIndex:section];
    if (model.isShow) {
        return  model.array.count;
    }else{
       
        return 0;
    }

}

//添加每行显示的内容

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString* ID = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID ];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
    }
   
    QQCellModel* model =  [_dateArray objectAtIndex:indexPath.section];
    NSString* str =  [[model array] objectAtIndex:indexPath.row];
    cell.textLabel.text = str;
    return cell;
}

// 定义头标题的视图，添加点击事件

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    QQCellModel* model =  [_dateArray objectAtIndex:section];
   
    UIButton* btn =[UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 50);
    [btn setTitle:model.name forState:UIControlStateNormal];
    btn.tag = section;
    [btn addTarget:self action:@selector(btnClick:with:) forControlEvents:UIControlEventTouchUpInside];
    if (section % 2) {
        btn.backgroundColor =  [UIColor darkGrayColor];
       
    }else{
        btn.backgroundColor =  [UIColor lightGrayColor];
       
    }
    return btn;

}

 

//点击后事件相应

-(void)btnClick:(UIButton*)btn with:(NSInteger*)section{
    QQCellModel* model =  [_dateArray objectAtIndex:btn.tag];
   
    if ([model isShow]) {
        [model setIsShow:NO];
    }else{
        [model setIsShow:YES];
    }
   
    [_tableView reloadSections:[NSIndexSet indexSetWithIndex:btn.tag] withRowAnimation:UITableViewRowAnimationFade];
//    [_tableView reloadRowsAtIndexPaths:<#(nonnull NSArray<NSIndexPath *> *)#> withRowAnimation:<#(UITableViewRowAnimation)#>]
}

@end

 

 

-------------------------------------------------------------------------------------------

//
//  QQCellModel.h
//  实现类似QQ的折叠效果
//
//  Created by skg_Myfly on 16/3/3.
//  Copyright © 2016年 skg_Myfly. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface QQCellModel : NSObject
/**名字 */
@property (nonatomic ,copy ) NSString* name;
/**是否展开 */
@property (nonatomic , assign ) BOOL isShow;
/** 每组的数据 */
@property (nonatomic , strong ) NSMutableArray *array;

@end