首页 > 学院 > 开发设计 > 正文

UITableView的折叠收缩和QQ好友分组效果

2019-11-09 18:08:56
字体:
来源:转载
供稿:网友

可折叠展开的tableView,QQ好友分组列表

demo下载地址https://github.com/zhengwenming/ExpandTableView

这里写图片描述 原理分析:这个可以折叠的table,我们点击的是table的section,每个section下面都对应一个数组,点击section,就展开sction然后展示数组数据。每次点击section都要刷新当前点击的这个section,不用reloadData,提高效率。那么点击的这个sction怎么知道自己是展开呢还是折叠起来呢?那么关键就是对这里的处理,我们自己要加一个条件判断是展开还是折叠。下面上代码看看具体实现。

方法一

NSMutableArray *stateArray = [NSMutableArray array];for (int i = 0; i < dataSource.count; i++){    //所有的分区都是闭合    [stateArray addObject:@"0"];}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{        if ([stateArray[section] isEqualToString:@"1"]){        //如果是展开状态    NSArray *array = [dataSource objectAtIndex:section];        return array.count;}else{    //如果是闭合,返回0    return 0;}}

方法一的原理是用一个stateArray去记录每个section的状态,当然光记录还是不行的,还是不断的改变这个stateArray对应section的值,展开了就把值替换为1,闭合了替换了0.那么这个0和1就是我们的依据,依据这个就可以返回这个scetion对应的row了。

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];[button setFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];[button setTag:section+1];button.backgroundColor = [UIColor whiteColor];[button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 60)];[button addTarget:self action:@selector(buttonPRess:) forControlEvents:UIControlEventTouchUpInside];UIImageView *line = [[UIImageView alloc]initWithFrame:CGRectMake(0, button.frame.size.height-1, button.frame.size.width, 1)];[line setImage:[UIImage imageNamed:@"line_real"]];[button addSubview:line];UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(10, (kCell_Height-22)/2, 22, 22)];[imgView setImage:[UIImage imageNamed:@"ico_faq_d"]];[button addSubview:imgView];UIImageView *_imgView = [[UIImageView alloc]initWithFrame:CGRectMake(self.view.frame.size.width-30, (kCell_Height-6)/2, 10, 6)];if ([stateArray[section] isEqualToString:@"0"]) {    _imgView.image = [UIImage imageNamed:@"ico_listdown"];}else if ([stateArray[section] isEqualToString:@"1"]) {    _imgView.image = [UIImage imageNamed:@"ico_listup"];}[button addSubview:_imgView];UILabel *tlabel = [[UILabel alloc]initWithFrame:CGRectMake(45, (kCell_Height-20)/2, 200, 20)];[tlabel setBackgroundColor:[UIColor clearColor]];[tlabel setFont:[UIFont systemFontOfSize:14]];[tlabel setText:sectionArray[section]];[button addSubview:tlabel];return button;}- (void)buttonPress:(UIButton *)sender//headButton点击{//判断状态值if ([stateArray[sender.tag - 1] isEqualToString:@"1"]){    //修改    [stateArray replaceObjectAtIndex:sender.tag - 1 withObject:@"0"];}else{    [stateArray replaceObjectAtIndex:sender.tag - 1 withObject:@"1"];}[expandTable reloadSections:[NSIndexSet indexSetWithIndex:sender.tag-1] withRowAnimation:UITableViewRowAnimationAutomatic];}

给section中的按钮添加点击事件,然后设置按钮的tag值为section。

方法二

方法二中用一个类去记录和不断的替换状态,用一个model类。看看这个model类的定义

@interface GroupModel : NSObject@property (nonatomic, assign)BOOL isOpened;@property (nonatomic, retain)NSString *groupName;@property (nonatomic, assign)NSInteger groupCount;@property (nonatomic, retain)NSArray *groupFriends;@end

再看看怎么用

 for (NSDictionary *groupInfoDic in JSONDic[@"group"]) {    GroupModel *model = [[GroupModel alloc]init];    model.groupName = groupInfoDic[@"groupName"];    model.groupCount = [groupInfoDic[@"groupCount"] integerValue];    model.isOpened = NO;    model.groupFriends = groupInfoDic[@"groupArray"];    [dataSource addObject:model];}- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{    return dataSource.count;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{GroupModel *groupModel = dataSource[section];NSInteger count = groupModel.isOpened?groupModel.groupFriends.count:0;return count;}

(UIView )tableView:(UITableView )tableView viewForHeaderInSection:(NSInteger)section { UIView *sectionView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)]; sectionView.backgroundColor = [UIColor colorWithWhite:0.9 alpha:0.8]; GroupModel *groupModel = dataSource[section];

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setFrame:sectionView.bounds]; [button setTag:section]; [button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal]; [button setTitle:groupModel.groupName forState:UIControlStateNormal]; [button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 60)]; [button addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchUpInside]; [sectionView addSubview:button]; UIImageView *line = [[UIImageView alloc]initWithFrame:CGRectMake(0, button.frame.size.height-1, button.frame.size.width, 1)]; [line setImage:[UIImage imageNamed:@”line_real”]]; [sectionView addSubview:line];

UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(10, (44-16)/2, 14, 16)]; [imgView setImage:[UIImage imageNamed:@”ico_list”]]; [sectionView addSubview:imgView];

UILabel *numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(self.view.frame.size.width-40, (44-20)/2, 40, 20)]; [numberLabel setBackgroundColor:[UIColor clearColor]]; [numberLabel setFont:[UIFont systemFontOfSize:14]]; NSInteger onLineCount = 0; for (NSDictionary *friendInfoDic in groupModel.groupFriends) { if ([friendInfoDic[@”status”] isEqualToString:@”1”]) { onLineCount++; } } [numberLabel setText:[NSString stringWithFormat:@”%ld/%ld”,onLineCount,groupModel.groupCount]]; [sectionView addSubview:numberLabel];

return sectionView; } - (void)tableView:(UITableView )tableView didSelectRowAtIndexPath:(NSIndexPath )indexPath { GroupModel *groupModel = dataSource[indexPath.section]; NSDictionary *friendInfoDic = groupModel.groupFriends[indexPath.row]; NSLog(@”%@ %@”,friendInfoDic[@”name”],friendInfoDic[@”shuoshuo”]); }

(void)buttonPress:(UIButton *)sender//headButton点击 { GroupModel *groupModel = dataSource[sender.tag]; groupModel.isOpened = !groupModel.isOpened; [expandTable reloadSections:[NSIndexSet indexSetWithIndex:sender.tag] withRowAnimation:UITableViewRowAnimationAutomatic]; }

看看关键代码,就是按钮点击事件里面buttonPress,这一句话 groupModel.isOpened = !groupModel.isOpened; 的意思是如果是展开,那么点击之后就是折叠, 如果是折叠,点击之后就是展开。这个状态被记录下来了,而且可以不断的改变。

好,到此为止。两种方法介绍完毕。想看demo的同学可以直接到Github上下载https://github.com/zhengwenming/ExpandTableView


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表