iOS 仿QQ列表【原创】

最近项目中需要做一个类似QQ列表的列表样式来展示并操作数据，刚开始的想法是用for循环创建cell，但是这样如果数据较多感觉性能不太好，所以网上参考一番，现在的做法是用一个字典记录每一个section的状态，假设点击一次展开，设置当前section对应字典中的值。然后reloadData再点击一次，状态改变，设置section对应的字典值，同时reloadData就可以了。
具体步骤：

一.首先创建列表UITableView

- (void)initUI{
    scanningTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, kScreenWidth, kScreenHeight - 64) style:UITableViewStyleGrouped];
    scanningTableView.backgroundColor = [UIColor clearColor];
    scanningTableView.delegate = self;
    scanningTableView.dataSource = self;
    scanningTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    [self.view addSubview:scanningTableView];
}

并实现协议：

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>{
    //列表
    UITableView *scanningTableView;
}

二.实现一些协议方法

#pragma mark -- tableView代理方法
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return parentMutArray.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSArray *childArray = [parentMutArray[section] objectForKey:@"child"];
    return childArray.count;
}

这里的showDic字典记录每一个section的状态

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if ([showDic objectForKey:[NSString stringWithFormat:@"%ld",(long)indexPath.section]]) {
        return 40;
    }
    return 0;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 40;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    return 10;
}

大分组是用UITableView的头部视图来实现的,每个分组之间的间隔用尾部视图

//section头部显示的内容
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    UIView *header = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 40)];
    header.backgroundColor = [UIColor whiteColor];
    header.tag = section;
    
    UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 4, 40)];
    blueView.backgroundColor = [UIColor colorWithRed:19/255.0f green:116/255.0f blue:226/255.0f alpha:1];
    [header addSubview:blueView];
    
    UILabel *nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(9, 0, kScreenWidth - 9 - 108, 40)];
    nameLabel.textColor = [UIColor blackColor];
    nameLabel.font = FONT(15);
    nameLabel.text = [NSString stringWithFormat:@"%@",[parentMutArray[section] objectForKey:@"name"]];
    [header addSubview:nameLabel];
    
    UIImageView *rightImgView = [[UIImageView alloc] initWithFrame:CGRectMake(kScreenWidth - 23, 15, 14, 9)];
    rightImgView.image = [UIImage imageNamed:@"arrows_icon_down"];
    [header addSubview:rightImgView];
    
    if ([showDic objectForKey:[NSString stringWithFormat:@"%ld",(long)section]]) {
        blueView.hidden = NO;
        rightImgView.image = [UIImage imageNamed:@"arrows_icon_up"];
    }else{
        blueView.hidden = YES;
        rightImgView.image = [UIImage imageNamed:@"arrows_icon_down"];
    }
    
    UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 39, kScreenWidth, 1)];
    lineView.backgroundColor = [UIColor colorWithRed:245/255.0f green:245/255.0f blue:245/255.0f alpha:1];
    [header addSubview:lineView];
    
    //单击收缩分组cell
    UITapGestureRecognizer *singleRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(SingleTap:)];
    singleRecognizer.numberOfTapsRequired = 1; //点击的次数 =1:单击
    [singleRecognizer setNumberOfTouchesRequired:1];//1个手指操作
    [header addGestureRecognizer:singleRecognizer];//添加一个手势监测
    
    return header;
}
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
    UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 10)];
    footerView.backgroundColor = [UIColor colorWithRed:245/255.0f green:245/255.0f blue:245/255.0f alpha:1];
    
    return footerView;
}

在cellForRowAtIndexPath中把数据赋值展示

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *indefier = @"cell";
    QQlistTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:indefier];
    if (!cell) {
        cell = [[QQlistTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:indefier];
    }
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    cell.separatorInset = UIEdgeInsetsZero;
    cell.clipsToBounds = YES;
    
    NSMutableArray *tempArray = [NSMutableArray array];
    for (NSDictionary *childDict in childMutArray) {
        if ([[NSString stringWithFormat:@"%@",childDict[@"parent_id"]] isEqualToString:[NSString stringWithFormat:@"%@",[parentMutArray[indexPath.section] objectForKey:@"parent_id"]]]) {
            [tempArray addObjectsFromArray:childDict[@"child"]];
        }
    }
    NSDictionary *tempDict = tempArray[indexPath.row];
    cell.nameLabel.text = [NSString stringWithFormat:@"%@",tempDict[@"child_name"]];
    
    return cell;
}

三.展开、折叠section中cell的手势监听

- (void)SingleTap:(UITapGestureRecognizer*)recognizer{
    NSInteger didSection = recognizer.view.tag;
    
    if (!showDic) {
        showDic = [[NSMutableDictionary alloc]init];
    }
    
    NSString *key = [NSString stringWithFormat:@"%ld",(long)didSection];
    if (![showDic objectForKey:key]) {
        [showDic setObject:@"1" forKey:key];
    }else{
        [showDic removeObjectForKey:key];
    }
    [scanningTableView reloadSections:[NSIndexSet indexSetWithIndex:didSection] withRowAnimation:UITableViewRowAnimationFade];
}

对每一个好友的点击处理

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSArray *childArray = [parentMutArray[indexPath.section] objectForKey:@"child"];
    NSDictionary *tempDict = childArray[indexPath.row];
    NSLog(@"%@",tempDict[@"child_name"]);
}

附上demo：QQlistTest

转载时请注明出处及相应链接，本文永久地址：http://blog.meken.net/21669.html

微信打赏

支付宝打赏