前言：前端時間小編的一個朋友要做一個類似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
最后，小編還是希望此文能夠幫助到有需要的朋友們，愿同是程序猿的我們能夠共同學習進步，在開發的道路上越走越遠！謝謝！
