前言：前端時(shí)間小編的一個(gè)朋友要做一個(gè)類似QQ列表的展開與關(guān)閉的效果，于是小編在閑暇之余給他寫了一個(gè)demo议街，本著好東西大家一起來分享的精神泽谨，趁著今天有時(shí)間小編把這個(gè)demo在此與大家一起共享，希望能夠幫到有需要的朋友特漩。
原理：使用UITableView列表形式吧雹，對(duì)sectionHeaderView添加tap手勢(shì)，點(diǎn)擊展開/關(guān)閉該section通過對(duì)每個(gè)section記錄一個(gè)是否展開的BOOL值來實(shí)現(xiàn)拾稳。
小編沒有做很細(xì)化的效果吮炕，先看看簡(jiǎn)單效果圖如下：
未展開.png
展開.png
下面來介紹代碼的實(shí)現(xiàn)：
由于沒有網(wǎng)絡(luò)數(shù)據(jù)，小編只能自己偽造了一些假數(shù)據(jù)访得，大家在使用的時(shí)候替換掉就可以了龙亲。
#import "ViewController.h"
#import "QQFriendCell.h"
#define Cell_QQFriend @"Cell_QQFriend_ID"
@interface ViewController () <UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, strong) UITableView * tableView;
//總數(shù)據(jù)
@property (nonatomic, strong) NSMutableArray * dataArr;
//每組的標(biāo)題
@property (nonatomic, strong) NSMutableArray * sectionArr;
//存儲(chǔ)是否展開的BOOL值
@property (nonatomic, strong) NSMutableArray * boolArr;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"好友列表";
[self loadData];
[self addSubviews];
[self makeConstraintsForUI];
}
//加載數(shù)據(jù)
- (void)loadData {
NSArray * secArr = @[@"我的好友", @"小學(xué)同學(xué)", @"初中同學(xué)", @"高中同學(xué)", @"大學(xué)同學(xué)"];
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]) {
//這里可以傳入請(qǐng)求的數(shù)據(jù)悍抑，此方法可以根據(jù)自己的需求做更改
[cell configCellWithData:nil row:indexPath.row];
}
return cell;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
//創(chuàng)建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)];
//三目運(yùn)算選擇展開或者閉合時(shí)候的圖標(biāo)
iv.image = [_boolArr[section] boolValue] ? [UIImage imageNamed:@"buddy_header_arrow_down"] : [UIImage imageNamed:@"buddy_header_arrow_right"];
[headerView addSubview:iv];
//添加標(biāo)題label
UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(35, 0, Screen_Width - 100, 50)];
label.text = self.sectionArr[section];
[headerView addSubview:label];
//添加分組人數(shù)和在線人數(shù)顯示的label
UILabel * labelR = [[UILabel alloc] initWithFrame:CGRectMake(Screen_Width - 60, 0, 60, 50)];
labelR.textAlignment = NSTextAlignmentCenter;
//這里小編把在線人數(shù)全部設(shè)置成了0鳄炉，可以根據(jù)需求更改
labelR.text = [NSString stringWithFormat:@"%d/%lu", 0, [self.dataArr[section] count]];
[headerView addSubview:labelR];
//添加輕扣手勢(shì)
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];
}
//刷新某個(gè)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];
//下面這行代碼可以避免分組都沒展開時(shí)，空白處出現(xiàn)的橫線
_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里邊的代碼搜骡，小編對(duì)Cell也進(jìn)行了簡(jiǎn)單的定制拂盯，同時(shí)SectionHeaderView在此寫的有些復(fù)雜，代碼比較多记靡，其實(shí)可以單獨(dú)拉出來進(jìn)行定制谈竿，定制之后再次調(diào)用會(huì)看起來清爽很多，但是小編時(shí)間有限就沒有定制摸吠，只是對(duì)Cell進(jìn)行了簡(jiǎn)單的定制空凸，在此只看.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
//此方法為外漏方法，可以根據(jù)自己的需求更改
- (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
看到這里就結(jié)束了寸痢，是不是很簡(jiǎn)單呢呀洲，其實(shí)只要知道點(diǎn)擊展開/關(guān)閉的原理，相信大家都可以寫出效果來的。
總結(jié)一下此demo用到的幾個(gè)關(guān)鍵的點(diǎn)：
1道逗、需要一個(gè)存儲(chǔ)各個(gè)分組是否展開的BOOL值的數(shù)組兵罢；
2、tableView刷新某個(gè)Section的動(dòng)態(tài)方法
demo下載地址：https://github.com/guorenhao/TencentQQ.git
最后滓窍，小編還是希望此文能夠幫助到有需要的朋友們卖词，愿同是程序猿的我們能夠共同學(xué)習(xí)進(jìn)步，在開發(fā)的道路上越走越遠(yuǎn)贰您！謝謝坏平！
