iOS tableView的sectionHeader点击折叠方法

最新推荐文章于 2022-08-30 15:40:26 发布

劉光軍_Shine

最新推荐文章于 2022-08-30 15:40:26 发布

阅读量389

点赞数

分类专栏： iOS日常技术

本文链接：https://blog.csdn.net/qq_26968911/article/details/103954339

版权

iOS日常技术专栏收录该内容

39 篇文章 0 订阅

订阅专栏

效果如图：

4AB0A241-6BFE-42EF-A887-0F6C24CDB9BB.png

812E4841-C091-489B-971C-03165F0C2F2C.png

在项目中遇到这个问题，总结出比较方便使用的方法

《1》
tableView的headerView和cell有些类似，所以先创建一个类，继承自UITableViewHeaderFooterView

.h中
首先明确headerView需要暴露在外部的接口和headerView的大体形态，我做的是在sectionHeaderView上有一个标题titleLabel 一个明细detailLabel 一个表示上下的图片，一个点击section响应的按钮。其次在外部要能改变section的折叠状态。当section折叠状态改变时需要穿到外部进行cellNumber的改变。所以需要一个protocol。

@protocol FoldSectionHeaderViewDelegate <NSObject>

- (void)foldHeaderInSection:(NSInteger)SectionHeader;

@end

声明外部可用的属性：

@property(nonatomic, assign) BOOL fold;/**< 是否折叠 */
@property(nonatomic, assign) NSInteger section;/**< 选中的section */
@property(nonatomic, weak) id<FoldSectionHeaderViewDelegate> delegate;/**< 代理 */

创建sectionHeaderView上控件的方法

- (void)setFoldSectionHeaderViewWithTitle:(NSString *)title detail:(NSString *)detail type:(HerderStyle)type section:(NSInteger)section canFold:(BOOL)canFold;

.m 中
声明内部全局变量

@implementation LGJFoldHeaderView
{
    BOOL _created;/**< 是否创建过 */
    UILabel *_titleLabel;/**< 标题 */
    UILabel *_detailLabel;/**< 其他内容 */
    UIImageView *_imageView;/**< 图标 */
    UIButton *_btn;/**< 收起按钮 */
    BOOL _canFold;/**< 是否可展开 */
    
}

实现方法

- (void)setFoldSectionHeaderViewWithTitle:(NSString *)title detail:(NSString *)detail type:(HerderStyle)type section:(NSInteger)section canFold:(BOOL)canFold {
    if (!_created) {
        [self creatUI];
    }
    _titleLabel.text = title;
    if (type == HerderStyleNone) {
         _detailLabel.hidden = YES;
    } else {
        _detailLabel.hidden = NO;
        _detailLabel.attributedText = [self attributeStringWith:detail];
    }
    _section = section;
    _canFold = canFold;
    if (canFold) {
        _imageView.hidden = NO;
    } else {
        _imageView.hidden = YES;
    }
}
//改变detail上的字体颜色
- (NSMutableAttributedString *)attributeStringWith:(NSString *)money {
    NSString *str = [NSString stringWithFormat:@"应收合计:%@", money];
    NSMutableAttributedString *ats = [[NSMutableAttributedString alloc] initWithString:str];
    NSRange range = [str rangeOfString:money];
    [ats setAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]} range:range];
    return ats;
}
//creatUI
- (void)creatUI {
    _created = YES;
    
    //标题
    _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 5, 90, 30)];
    _titleLabel.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:_titleLabel];
    
    //其他内容
    _detailLabel = [[UILabel alloc] initWithFrame:CGRectMake(105, 5, 320-40, 30)];
    _detailLabel.backgroundColor = [UIColor greenColor];
    [self.contentView addSubview:_detailLabel];
    
    //按钮
    _btn = [UIButton buttonWithType:UIButtonTypeCustom];
    _btn.frame = CGRectMake(0, 0, 320, 30);
    [_btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.contentView addSubview:_btn];
    
    //图片
    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(320 - 30, 15, 8, 9)];
    _imageView.image = [UIImage imageNamed:@"arrow_down_gray"];
    [self.contentView addSubview:_imageView];
    
    //线
    UIImageView *line = [[UIImageView alloc] initWithFrame:CGRectMake(0, 39, 320, 1)];
    line.image = [UIImage imageNamed:@"line"];
    [self.contentView addSubview:line];
}
//重写fold的set方法， 根据fold的状态， 改变图片形状
- (void)setFold:(BOOL)fold {
    _fold = fold;
    if (fold) {
        _imageView.image = [UIImage imageNamed:@"arrow_down_gray"];
    } else {
        _imageView.image = [UIImage imageNamed:@"arrow_up_gray"];
    }
}

//按钮的点击响应方法，将代理传出
- (void)btnClick:(UIButton *)btn {
    if (_canFold) {
        if ([self.delegate respondsToSelector:@selector(foldHeaderInSection:)]) {
            [self.delegate foldHeaderInSection:_section];
        }
    }
}

《2》在viewController中的使用时，引入头文件，遵循代理
在controller中，我们需要一个字典来记录section的折叠状态，这个字典根据当前选中的第几个section和section的状态来记录

_foldInfoDic = [NSMutableDictionary dictionaryWithDictionary:@{
                                                                   @"0":@"1",
                                                                   @"1":@"1",
                                                                   @"2":@"1",
                                                                   @"3":@"0"
                                                                   }];

这里我创建4个section，前三个的默认状态是1，说明此时section是打开的。

在numberOfRowsInSection这个方法中，根据当前section转化成字符串当做key（因为我们一开始字典创建的思路就是根据对应的section和开关状态来创建的）来查找字典中的value 并将value转化成bool类型，说明只有开关两种状态。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    NSString *key = [NSString stringWithFormat:@"%d", (int)section];
    BOOL folded = [[_foldInfoDic objectForKey:key] boolValue];
    
    if (section == 0) {
        return folded?_arr.count:0;
    } else if (section == 1) {
        return folded?_arr.count:0;
    } else if (section == 2) {
        return folded?_arr.count:0;
    } else {
        return folded?_arr.count:0;
    }
}

在viewForHeaderInSection方法中和cell类似，根据identifier先从池子中找headerView 如果没有就创建，创建时记得给headerView加identifier。创建好之后根据当前section 个性定制sectionHeaderView上面的内容。将headerView的delegate= self; 在headerView创建好的这时候，改变字典中的值。

 NSString *key = [NSString stringWithFormat:@"%d", (int)section];
    BOOL folded = [[_foldInfoDic valueForKey:key] boolValue];


- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    LGJFoldHeaderView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"header"];
    if (!headerView) {
        headerView = [[LGJFoldHeaderView alloc] initWithReuseIdentifier:@"header"];
    }
    
    if (section == 0) {
        [headerView setFoldSectionHeaderViewWithTitle:@"我是第一个Section" detail:@"9999" type: HerderStyleTotal section:0 canFold:YES];
    } else if (section == 1) {
        [headerView setFoldSectionHeaderViewWithTitle:@"我是第二个Section" detail:@"8888" type:HerderStyleTotal section:1 canFold:YES];
    } else if (section == 2){
        [headerView setFoldSectionHeaderViewWithTitle:@"我是第三个Section" detail:nil type:HerderStyleNone section:2 canFold:YES];
    } else {
        [headerView setFoldSectionHeaderViewWithTitle:@"我是第四个Seciton" detail:@"777" type:HerderStyleTotal section:3 canFold:NO];
    }
    headerView.delegate = self;
    NSString *key = [NSString stringWithFormat:@"%d", (int)section];
    BOOL folded = [[_foldInfoDic valueForKey:key] boolValue];
    headerView.fold = folded;
    return headerView;
    
}

实现headerView的代理方法

- (void)foldHeaderInSection:(NSInteger)SectionHeader {
    NSString *key = [NSString stringWithFormat:@"%d",(int)SectionHeader];
    BOOL folded = [[_foldInfoDic objectForKey:key] boolValue];
    NSString *fold = folded ? @"0" : @"1";
    [_foldInfoDic setValue:fold forKey:key];
    NSMutableIndexSet *set = [[NSMutableIndexSet alloc] initWithIndex:SectionHeader];
    [_tableView reloadSections:set withRowAnimation:UITableViewRowAnimationLeft];
    
}

好了，一个比较容易理解，操作的一个可折叠的sectionHeaderView基本成型了。
end

代码地址:https://github.com/irembeu/TableViewHeaderFoldDemo.git