cell展开功能的实现

Untitled.gif

• 仿写一个类似QQ分组的展开效果,分析下该效果的结构.根据点击了组的头部视图,判断是否要展开该组.可以理解为点击了每组的头部视图后,动态的改变了每个cell的高度.
• 本代码这是为了实习小功能的Demo,并未对其进行很好的封装,只为举个例子.下面贴出代码进行分析

/** 组数据 */
@property (nonatomic ,strong) NSArray *sectionArray;;
/** 行数据 */
@property (nonatomic ,strong) NSArray *rowArray;

@property (nonatomic ,weak)   UITableView *tableView;
/** 判断cell是否展开 */
@property (nonatomic ,strong) NSMutableDictionary *showDic;

@property (nonatomic ,weak) UILabel *header;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self loadDataSource];
    
    [self setupTableView];  
}
- (void)loadDataSource
{
    self.sectionArray = @[@"第一组",@"第二组",@"第三组",@"第四组",@"第五组",@"第六组"];
    
    self.rowArray = @[@"张三",@"李四",@"王五",@"赵六",@"好友",@"家人",@"朋友",@"同学",@"陌生人",@"黑名单",@"好友",@"家人",@"朋友",@"同学",@"陌生人",@"黑名单",@"好友",@"家人",@"朋友",@"同学",@"陌生人",@"黑名单",@"好友",@"家人",@"朋友",@"同学",@"陌生人",@"黑名单"];
}
-(void)setupTableView
{
    UITableView *tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
    self.tableView = tableView;
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:cellID];
    [self.view addSubview:self.tableView];
    self.tableView.tableFooterView = [[UIView alloc]init];
}
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return  self.sectionArray.count;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.rowArray.count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{   
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellID];
    // 剪掉超出部分
    cell.clipsToBounds = YES;
  
    cell.textLabel.text = [NSString stringWithFormat:@"第 %ld 行： %@",indexPath.row,self.rowArray[indexPath.row]];
    
    return cell;
}

• 上面的代码初始化了一些基本数据,下面将为组头部视图,添加监听

-(UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    UILabel *header = [[UILabel alloc]init];
    self.header = header;
    
    header.userInteractionEnabled = YES;
    header.text = self.sectionArray[section];
    header.userInteractionEnabled = YES;
    header.backgroundColor = [UIColor orangeColor];
    header.tag = section;
    
    UITapGestureRecognizer *singleRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(SingleTap:)];
    [header addGestureRecognizer:singleRecognizer];
    
    return header;
}
-(void)SingleTap:(UITapGestureRecognizer*)recognizer{
    
    // 拿到当前的label
    NSInteger didSection = recognizer.view.tag;
    
    if (!self.showDic) { // 展开字典创建
        self.showDic = [[NSMutableDictionary alloc]init] ;
    }
    // 拿lable的tag作为字典的key
    NSString *key = [NSString stringWithFormat:@"%ld",recognizer.view.tag];
    if (![self.showDic objectForKey:key]) {  //如果当前字典没有对应的值
        [self.showDic setObject:@"isOn" forKey:key]; // 就把当前的key对应的值存起来
        }else{ // 如果展开了
        [self.showDic removeObjectForKey:key];
    }
    [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:didSection] withRowAnimation:UITableViewRowAnimationNone];
}

• 上述代码实现了,组头部视图正常现实和监听组头部视图的点击,添加了点击手势,只剩下最后一步了,就是动态设置cell的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if ([self.showDic objectForKey:[NSString stringWithFormat:@"%ld",indexPath.section]]) {
        return 44;
    }
    return 0.01;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 35;
}

• 上面的代码就是这个效果的核心了,为了现实分割线的效果特地设置Cell不展开时候的高度为0.01,就可以看出明显的分割线了
• 注意点:
  • cell.clipsToBounds = YES; 这行代码包装了cell高度为0.01时,文字堆在一期的难看效果.
  • UITableViewRowAnimationNone 是默认的没有动画的参数,可以设置其他的动画参数,是刷新列表时候的动画

typedef NS_ENUM(NSInteger, UITableViewRowAnimation) {
UITableViewRowAnimationFade,   //淡入淡出
UITableViewRowAnimationRight,  //从右滑入         // slide in from right (or out to right)
UITableViewRowAnimationLeft,   //从左滑入
UITableViewRowAnimationTop,     //从上滑入
UITableViewRowAnimationBottom,  //从下滑入
UITableViewRowAnimationNone,            // available in iOS 3.0
UITableViewRowAnimationMiddle,          // available in iOS 3.2.  attempts to keep cell centered in the space it will/did occupy
UITableViewRowAnimationAutomatic = 100  // available in iOS 5.0.  chooses an appropriate animation style for you
};