iOS开发-仿QQ好友列表展开/关闭

前言：前端时间小编的一个朋友要做一个类似QQ列表的展开与关闭的效果，于是小编在闲暇之余给他写了一个demo，本着好东西大家一起来分享的精神，趁着今天有时间小编把这个demo在此与大家一起共享，希望能够帮到有需要的朋友。

原理：使用UITableView列表形式，对sectionHeaderView添加tap手势，点击展开/关闭该section通过对每个section记录一个是否展开的BOOL值来实现。

小编没有做很细化的效果，先看看简单效果图如下：


未展开.png

展开.png

下面来介绍代码的实现：
由于没有网络数据，小编只能自己伪造了一些假数据，大家在使用的时候替换掉就可以了。

#import "ViewController.h"
#import "QQFriendCell.h"

#define Cell_QQFriend   @"Cell_QQFriend_ID"

@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) UITableView * tableView;
//总数据
@property (nonatomic, strong) NSMutableArray * dataArr;
//每组的标题
@property (nonatomic, strong) NSMutableArray * sectionArr;
//存储是否展开的BOOL值
@property (nonatomic, strong) NSMutableArray * boolArr;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"好友列表";
    [self loadData];
    [self addSubviews];
    [self makeConstraintsForUI];
}

//加载数据
- (void)loadData {
    
    NSArray * secArr = @[@"我的好友", @"小学同学", @"初中同学", @"高中同学", @"大学同学"];
    NSArray * rowsArr = @[@(12), @(10), @(15), @(13), @(22)];
    
    for (int i = 0; i < secArr.count; i++) {
        
        NSMutableArray * friendArr = [[NSMutableArray alloc] init];
        for (int j = 0; j < [rowsArr[i] intValue]; j++) {
            
            [friendArr addObject:@(j)];
        }
        [self.dataArr addObject:friendArr];
        [self.sectionArr addObject:secArr[i]];
        [self.boolArr addObject:@NO];
    }
}

#pragma mark - add subviews

- (void)addSubviews {
    
    [self.view addSubview:self.tableView];
}

#pragma mark - make constraints

- (void)makeConstraintsForUI {
    
    [_tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.size.mas_equalTo(CGSizeMake(Screen_Width, Screen_Height));
        make.left.mas_equalTo(@0);
        make.top.mas_equalTo(@0);
    }];
}

#pragma mark - tableView delegate and dataSource

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    
    return self.dataArr.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    //判断是否展开，如果未展开则返回0
    if ([self.boolArr[section] boolValue] == NO) {
        
        return 0;
    }else {
        
        return [self.dataArr[section] count];
    }
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    QQFriendCell * cell = [tableView dequeueReusableCellWithIdentifier:Cell_QQFriend forIndexPath:indexPath];
    
    if (indexPath.row < [self.dataArr[indexPath.section] count]) {
        //这里可以传入请求的数据，此方法可以根据自己的需求做更改
        [cell configCellWithData:nil row:indexPath.row];
    }
    return cell;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    
    //创建header的view
    UIView * headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, Screen_Width, 50)];
    headerView.tag = 2016 + section;
    headerView.backgroundColor = [UIColor colorWithRed:235/255.0 green:235/255.0 blue:235/255.0 alpha:1];
    
    //添加imageview
    UIImageView * iv = [[UIImageView alloc] initWithFrame:CGRectMake(10, 15, 20, 20)];
    
    //三目运算选择展开或者闭合时候的图标
    iv.image = [_boolArr[section] boolValue] ? [UIImage imageNamed:@"buddy_header_arrow_down"] : [UIImage imageNamed:@"buddy_header_arrow_right"];
    [headerView addSubview:iv];
    
    //添加标题label
    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(35, 0, Screen_Width - 100, 50)];
    label.text = self.sectionArr[section];
    [headerView addSubview:label];
    
    //添加分组人数和在线人数显示的label
    UILabel * labelR = [[UILabel alloc] initWithFrame:CGRectMake(Screen_Width - 60, 0, 60, 50)];
    labelR.textAlignment = NSTextAlignmentCenter;
    //这里小编把在线人数全部设置成了0，可以根据需求更改
    labelR.text = [NSString stringWithFormat:@"%d/%lu", 0, [self.dataArr[section] count]];
    [headerView addSubview:labelR];
    
    //添加轻扣手势
    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGR:)];
    [headerView addGestureRecognizer:tap];
    
    return headerView;
}

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

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    return 70;
}

#pragma mark - action
- (void)tapGR:(UITapGestureRecognizer *)tapGR {
    
    //获取section
    NSInteger section = tapGR.view.tag - 2016;
    //判断改变bool值
    if ([_boolArr[section] boolValue] == YES) {
        [_boolArr replaceObjectAtIndex:section withObject:@NO];
    }else {
        [_boolArr replaceObjectAtIndex:section withObject:@YES];
    }
    //刷新某个section
    [_tableView reloadSections:[NSIndexSet indexSetWithIndex:section] withRowAnimation:UITableViewRowAnimationFade];
}

#pragma mark - setter and getter

- (UITableView *)tableView {
    
    if (!_tableView) {
        
        _tableView = [[UITableView alloc] init];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        [_tableView registerClass:[QQFriendCell class] forCellReuseIdentifier:Cell_QQFriend];
        //下面这行代码可以避免分组都没展开时，空白处出现的横线
        _tableView.tableFooterView = [[UIView alloc] init];
    }
    return _tableView;
}

- (NSMutableArray *)dataArr {
    
    if (!_dataArr) {
        
        _dataArr = [[NSMutableArray alloc] init];
    }
    return _dataArr;
}

- (NSMutableArray *)sectionArr {
    
    if (!_sectionArr) {
        
        _sectionArr = [[NSMutableArray alloc] init];
    }
    return _sectionArr;
}

- (NSMutableArray *)boolArr {
    
    if (!_boolArr) {
        
        _boolArr = [[NSMutableArray alloc] init];
    }
    return _boolArr;
}

@end

上边是ViewController里边的代码，小编对Cell也进行了简单的定制，同时SectionHeaderView在此写的有些复杂，代码比较多，其实可以单独拉出来进行定制，定制之后再次调用会看起来清爽很多，但是小编时间有限就没有定制，只是对Cell进行了简单的定制，在此只看.m中的代码即可：

#import "QQFriendCell.h"

@interface QQFriendCell ()
//头像
@property (nonatomic, strong) UIImageView * image_icon;
//昵称
@property (nonatomic, strong) UILabel * lab_nickname;
//签名
@property (nonatomic, strong) UILabel * lab_signature;
@end
@implementation QQFriendCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    
    if (self) {
        
        [self addSubviews];
    }
    return self;
}

#pragma mark - add subviews

- (void)addSubviews {
    
    [self addSubview:self.image_icon];
    [self addSubview:self.lab_nickname];
    [self addSubview:self.lab_signature];
}

#pragma mark - layout subviews

- (void)layoutSubviews {
    
    [super layoutSubviews];
    
    [_image_icon mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.size.mas_equalTo(CGSizeMake(50, 50));
        make.left.mas_equalTo(@15);
        make.top.mas_equalTo(@10);
    }];
    
    [_lab_nickname mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.mas_equalTo(_image_icon.mas_top);
        make.left.mas_equalTo(_image_icon.mas_right).with.offset(15);
        make.right.mas_equalTo(@-15);
        make.height.mas_equalTo(@21);
    }];
    
    [_lab_signature mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.bottom.mas_equalTo(_image_icon.mas_bottom);
        make.left.mas_equalTo(_lab_nickname.mas_left);
        make.right.mas_equalTo(_lab_nickname.mas_right);
        make.height.mas_equalTo(@21);
    }];
}

#pragma mark - config cell
//此方法为外漏方法，可以根据自己的需求更改
- (void)configCellWithData:(NSDictionary *)dic row:(NSInteger)row {
    
    _image_icon.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1.0];
    _lab_nickname.text = [NSString stringWithFormat:@"好友%lu", row + 1];
    _lab_signature.text = [NSString stringWithFormat:@"这是好友%lu的签名", row + 1];
}

#pragma mark - setter and getter

- (UIImageView *)image_icon {
    
    if (!_image_icon) {
        
        _image_icon = [[UIImageView alloc] init];
        _image_icon.contentMode = UIViewContentModeScaleAspectFill;
        _image_icon.layer.cornerRadius = 25.0;
        _image_icon.layer.masksToBounds = YES;
    }
    return _image_icon;
}

- (UILabel *)lab_nickname {
    
    if (!_lab_nickname) {
        
        _lab_nickname = [[UILabel alloc] init];
        _lab_nickname.font = [UIFont systemFontOfSize:18];
    }
    return _lab_nickname;
}
@end

看到这里就结束了，是不是很简单呢，其实只要知道点击展开/关闭的原理，相信大家都可以写出效果来的。

总结一下此demo用到的几个关键的点：
1、需要一个存储各个分组是否展开的BOOL值的数组；
2、tableView刷新某个Section的动态方法

demo下载地址：https://github.com/guorenhao/TencentQQ.git

最后，小编还是希望此文能够帮助到有需要的朋友们，愿同是程序猿的我们能够共同学习进步，在开发的道路上越走越远！谢谢！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4赞 62
  • 一起穿高跟鞋、挤地铁的闺蜜，要结婚了
    前几天，薛之谦转发的北京地铁粗暴事件的视频，想必大家都看了。 孰是孰非，公众也已经有了比较公允的说法。 我只是看到...
    硝煙阅读 575评论 0赞 0
  • 发现语言密码，照亮习作之路
    2017年4月15日，中原小语工作室联盟第三次活动如期举行，河南省著名教师刘娟娟老师做客许昌实验小学，为实验小学教...
    李艳平名师工作室成员梅琳阅读 672评论 0赞 0
  • 5月7日:带娃遇上拉肚子
    哎呦，不好肚子好痛，得赶紧冲进厕所……贤哥怎么办？此时他还在怀里抱着，最近这家伙特别粘人，估计好难脱身，家里水管又...
    燕纪事阅读 464评论 9赞 1
  • 老歌-邝鉴萍
    老歌OT你的背包 填词：邝鉴萍 作曲：蔡政勋 街角的老屋 你我笑过也悲哭 如今返 找不到三婶七叔 岁月匆匆 不问 ...
    邝鉴萍阅读 242评论 0赞 2