实现类似QQ的折叠效果

时间:2023-03-09 18:06:59
实现类似QQ的折叠效果
实现类似QQ的折叠效果实现类似QQ的折叠效果
//  主要核心是点击自定义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