使用UICollectionView实现
思路
- 很明显整体它是一个列表，它的分组是一个列表，它里面的好友列表也是一个列表，所以就可以使用组头来设置分组列表，使用cell设置好友列表；
- 当点击组头的时候会展开好友列表，其实原理上就是单独刷新某一组的数据。
流程
- 控制器的代码（HomeViewController）：本类主要配置UICollectionView显示，以及处理组展开/关闭状态。
#import "HomeViewController.h"
#import "YDWFriendListShowCollectionViewCell.h"
#import "YDWFriendHeaderReusableView.h"
static NSString * const kYDWFriendListShowCollectionViewCellIndentifier = @"YDWFriendListShowCollectionViewCell";
static NSString * const kYDWFriendHeaderReusableViewIndentifier = @"YDWFriendHeaderReusableView";
@interface HomeViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,FriendHeaderReusableViewDelegate>
@property(nonatomic,strong) UICollectionView *collectionView;
@property(nonatomic,strong) NSArray *headerArray;
@property (nonatomic, strong) NSMutableArray * dataArray;
@property (nonatomic, strong) NSMutableArray * boolArray;
@end
@implementation HomeViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self setupNavigation];
[self addSubviews];
[self getListData];
}
#pragma mark - UICollectionViewDelegate,UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return self.headerArray.count;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
// 判断是否展开，如果未展开则返回0
if ([self.boolArray[section] boolValue] == NO) {
return 0;
} else {
return [self.dataArray[section] count];
}
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
YDWFriendListShowCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kYDWFriendListShowCollectionViewCellIndentifier forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor whiteColor];
cell.nameLabel.text = [NSString stringWithFormat:@"好友%ld", (long)indexPath.item];
cell.detailsLabel.text = [NSString stringWithFormat:@"签名%ld", (long)indexPath.item];
return cell;
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
YDWFriendHeaderReusableView *reusView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kYDWFriendHeaderReusableViewIndentifier forIndexPath:indexPath];
reusView.delegte = self;
reusView.backgroundColor = [UIColor whiteColor];
reusView.tag = indexPath.section;
// 三目运算选择展开或者闭合时候的图标
reusView.imageView.image = [self.boolArray[indexPath.section] boolValue] ? [UIImage imageNamed:[NSString stringWithFormat:@"zhankai"]] : [UIImage imageNamed:[NSString stringWithFormat:@"shouqi"]];
reusView.titleLabel.text = self.headerArray[indexPath.section];
reusView.numLabel.text = [NSString stringWithFormat:@"%ld/%lu",(long)indexPath.section, (unsigned long)[self.dataArray[indexPath.section] count]];
return reusView;
}
#pragma mark - FriendHeaderReusableViewDelegate
- (void)friendHeaderReusableView:(YDWFriendHeaderReusableView *)friendHeaderReusableView didSelectItemAtSection:(NSInteger)section {
if ([self.boolArray[section] boolValue] == YES) {
[self.boolArray replaceObjectAtIndex:section withObject:@NO];
} else {
[self.boolArray replaceObjectAtIndex:section withObject:@YES];
}
[self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:section]];
}
#pragma mark - Private Methods
- (void)setupNavigation {
self.navigationItem.title = @"联系人";
}
- (void)addSubviews {
self.collectionView.frame = CGRectMake(0, 100, SCREEN_WIDTH, SCREEN_HEIGHT - 15);
[self.view addSubview:self.collectionView];
}
- (void)getListData {
// 准备组头的数据
NSArray *headerArr = [NSArray arrayWithObjects:@"特别关心", @"我的好友", @"朋友", @"家人",nil];
self.headerArray = headerArr;
// 准备单元格的数据
NSArray *itemArr = [NSArray arrayWithObjects:@5, @10, @7,@3, nil];
for (int i = 0; i < self.headerArray.count; i++) {
// 所有的分组默认关闭
[self.boolArray addObject:@NO];
// 给每个分组添加数据
NSMutableArray * friendArr = [[NSMutableArray alloc] init];
for (int j = 0; j < [itemArr[i] intValue]; j++) {
[friendArr addObject:@(j)];
}
[self.dataArray addObject:friendArr];
}
[self.collectionView reloadData];
}
#pragma mark - Lazy Loading
- (NSMutableArray *)dataArray {
if (!_dataArray) {
_dataArray = [[NSMutableArray alloc] init];
}
return _dataArray;
}
- (NSMutableArray *)boolArray {
if (!_boolArray) {
_boolArray = [[NSMutableArray alloc] init];
}
return _boolArray;
}
- (UICollectionView *)collectionView {
if (!_collectionView) {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(SCREEN_WIDTH, 70);
layout.minimumLineSpacing = 0;
layout.minimumInteritemSpacing = 0;
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
layout.headerReferenceSize = CGSizeMake(SCREEN_WIDTH, 40);
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.delegate = self;
_collectionView.dataSource = self;
_collectionView.alwaysBounceVertical = YES;
_collectionView.showsVerticalScrollIndicator = YES;
[_collectionView registerClass:[YDWFriendHeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kYDWFriendHeaderReusableViewIndentifier];
[_collectionView registerClass:[YDWFriendListShowCollectionViewCell class] forCellWithReuseIdentifier:kYDWFriendListShowCollectionViewCellIndentifier];
}
return _collectionView;
}
@end
- YDWFriendHeaderReusableView：本类主要布局组标题以及指示（展开/关闭）控件，其次，通过添加点击手势结合委托模式，传递tag值。
YDWFriendHeaderReusableView .h和YDWFriendHeaderReusableView.m：
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@class YDWFriendHeaderReusableView;
@protocol FriendHeaderReusableViewDelegate <NSObject>
- (void)friendHeaderReusableView:(YDWFriendHeaderReusableView *)friendHeaderReusableView didSelectItemAtSection:(NSInteger)section;
@end
@interface YDWFriendHeaderReusableView : UICollectionReusableView
@property(nonatomic,weak) id <FriendHeaderReusableViewDelegate>delegte;
@property(nonatomic,weak) UIImageView *imageView;
@property(nonatomic,weak) UILabel *titleLabel;
@property(nonatomic,weak) UILabel *numLabel;
@end
NS_ASSUME_NONNULL_END
#import "YDWFriendHeaderReusableView.h"
@interface YDWFriendHeaderReusableView ()
@end
@implementation YDWFriendHeaderReusableView
#pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.userInteractionEnabled = YES;
UITapGestureRecognizer *tapGes = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickView:)];
[self addGestureRecognizer:tapGes];
[self addSubviews];
}
return self;
}
#pragma mark - 设置UI界面
- (void)addSubviews {
// 添加图标
UIImageView *imageView = [[UIImageView alloc] init];
[self addSubview:imageView];
self.imageView = imageView;
// 添加标题
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.font = [UIFont systemFontOfSize:18];
titleLabel.textColor = [UIColor darkGrayColor];
[self addSubview:titleLabel];
self.titleLabel = titleLabel;
// 添加人数
UILabel *numLabel = [[UILabel alloc] init];
numLabel.font = [UIFont systemFontOfSize:14];
numLabel.textAlignment = NSTextAlignmentRight;
numLabel.textColor = [UIColor lightGrayColor];
[self addSubview:numLabel];
self.numLabel = numLabel;
}
- (void)layoutSubviews {
[super layoutSubviews];
// 图标
self.imageView.frame = CGRectMake(10, 10, 20, 20);
// 标题
CGFloat numW = 60;
CGFloat titleX = CGRectGetMaxX(self.imageView.frame) + 10;
CGFloat titleW = SCREEN_WIDTH - titleX - numW -15;
self.titleLabel.frame = CGRectMake(titleX, 10, titleW, 20);
// 人数
CGFloat numX = SCREEN_WIDTH - numW - 10;
self.numLabel.frame = CGRectMake(numX, 10, numW, 20);
}
#pragma mark - 监听事件
- (void)clickView:(UITapGestureRecognizer *)tapGes {
if ([self.delegte respondsToSelector:@selector(friendHeaderReusableView:didSelectItemAtSection:)]) {
[self.delegte friendHeaderReusableView:self didSelectItemAtSection:self.tag];
}
}
@end
- YDWFriendListShowCollectionViewCell：主要布局好友信息包括头像、昵称以及签名，具体实现如下：
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface YDWFriendListShowCollectionViewCell : UICollectionViewCell
@property(nonatomic,weak) UIImageView *imageView;
@property(nonatomic,weak) UILabel *nameLabel;
@property(nonatomic,weak) UILabel *detailsLabel;
@end
NS_ASSUME_NONNULL_END
#import "YDWFriendListShowCollectionViewCell.h"
@interface YDWFriendListShowCollectionViewCell ()
@end
@implementation YDWFriendListShowCollectionViewCell
#pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self addSubviews];
}
return self;
}
#pragma mark - 设置UI界面
- (void)addSubviews {
// 添加图标
UIImageView *imageView = [[UIImageView alloc] init];
imageView.layer.cornerRadius = 50/2;
imageView.layer.masksToBounds = YES;
imageView.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0];
[self addSubview:imageView];
self.imageView = imageView;
// 添加标题
UILabel *nameLabel = [[UILabel alloc] init];
nameLabel.font = [UIFont systemFontOfSize:18];
nameLabel.textColor = [UIColor darkGrayColor];
[self addSubview:nameLabel];
self.nameLabel = nameLabel;
// 添加签名
UILabel *detailsLabel = [[UILabel alloc] init];
detailsLabel.font = [UIFont systemFontOfSize:14];
detailsLabel.textAlignment = NSTextAlignmentLeft;
detailsLabel.textColor = [UIColor lightGrayColor];
[self addSubview:detailsLabel];
self.detailsLabel = detailsLabel;
}
- (void)layoutSubviews {
[super layoutSubviews];
//1、图标
self.imageView.frame = CGRectMake(10, 10, 50, 50);
//2、标题
CGFloat nameX = CGRectGetMaxX(self.imageView.frame) + 10;
CGFloat nameW = SCREEN_WIDTH - nameX -10;
self.nameLabel.frame = CGRectMake(nameX, 10, nameW, 20);
//3、人数
CGFloat detailsX = CGRectGetMaxX(self.imageView.frame) + 10;
CGFloat detailsY = CGRectGetMaxY(self.nameLabel.frame) + 5;
CGFloat detailsW = SCREEN_WIDTH - detailsX - 10;
self.detailsLabel.frame = CGRectMake(detailsX, detailsY, detailsW, 20);
}
@end
效果展示
使用UITableView实现
思路
- 这个可以展开收缩的UITableView，点击的是TableView的section，每个section下面都对应一个数组，点击section，就展开sction然后展示数组数据。
- 每次点击section都要刷新当前点击的这个section，不用reloadData，提高效率。
- 那么点击的这个sction怎么知道自己是展开呢还是折叠起来呢？那么关键就是对这里的处理，需要加一个条件判断是展开还是折叠。
实现方法
- 用一个boolArray去记录每个section的状态，当然光记录还是不行的，还是不断的改变这个boolArray对应section的值，展开了就把值替换为1，闭合了替换了0.那么这个0和1就是我们的依据，依据这个就可以返回这个scetion对应的row了。
- 用一个类去记录和不断的替换状态，该model类增加一个状态判断的字段；
流程
- 控制器的代码：本类主要配置UITableView显示，以及处理组展开/关闭状态。
#import "YDWSecondViewController.h"
#import "YDWFriendListShowTableViewCell.h"
#import "YDWFriendHeadView.h"
static NSString * const kYDWFriendListShowTableViewCellIndentifier = @"YDWFriendListShowTableViewCell";
static NSString * const kYDWFriendHeadViewIndentifer = @"YDWFriendHeadView";
@interface YDWSecondViewController ()<UITableViewDelegate,UITableViewDataSource,FriendHeadViewDelegate>
@property (nonatomic, strong) UITableView *tableView;
@property(nonatomic,strong) NSArray *headerArray;
@property (nonatomic, strong) NSMutableArray * dataArray;
@property (nonatomic, strong) NSMutableArray * boolArray;
@end
@implementation YDWSecondViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self setupNavigation];
[self setupAddTableView];
[self getListData];
}
#pragma mark - UITableViewDelegate,UITableViewDataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return self.dataArray.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
if ([self.boolArray[section] boolValue] == NO) {
return 0;
} else {
return [self.dataArray[section] count];
}
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
YDWFriendListShowTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kYDWFriendListShowTableViewCellIndentifier];
if (!cell) {
cell = [[NSBundle mainBundle] loadNibNamed:@"YDWFriendListShowTableViewCell" owner:self options:nil].firstObject;
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 40;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
YDWFriendHeadView *headeView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:kYDWFriendHeadViewIndentifer];
if (headeView == nil) {
headeView = [[YDWFriendHeadView alloc] initWithReuseIdentifier:kYDWFriendHeadViewIndentifer];
}
headeView.delegte = self;
headeView.tag = section;
headeView.imageView.image = [self.boolArray[section] boolValue] ? [UIImage imageNamed:[NSString stringWithFormat:@"zhankai"]] : [UIImage imageNamed:[NSString stringWithFormat:@"shouqi"]];
headeView.titleLabel.text = self.headerArray[section];
headeView.numLabel.text = [NSString stringWithFormat:@"%ld/%lu",(long)section, (unsigned long)[self.dataArray[section] count]];
return headeView;
}
#pragma mark - FriendHeadViewDelegate
- (void)friendHeaderReusableView:(YDWFriendHeadView *)friendHeaderReusableView didSelectItemAtSection:(NSInteger)section {
if ([self.boolArray[section] boolValue] == YES) {
[self.boolArray replaceObjectAtIndex:section withObject:@NO];
} else {
[self.boolArray replaceObjectAtIndex:section withObject:@YES];
}
[self.tableView reloadSections:[NSIndexSet indexSetWithIndex:section] withRowAnimation:UITableViewRowAnimationFade];
}
#pragma mark - Private Methods
- (void)setupNavigation {
self.navigationItem.title = @"联系人";
}
- (void)setupAddTableView {
self.tableView.frame = self.view.bounds;
[self.view addSubview:self.tableView];
}
- (void)getListData {
// 准备组头的数据
NSArray *headerArr = [NSArray arrayWithObjects:@"特别关心", @"我的好友", @"朋友", @"家人",nil];
self.headerArray = headerArr;
// 准备单元格的数据
NSArray *itemArr = [NSArray arrayWithObjects:@5, @10, @7,@3, nil];
for (int i = 0; i < self.headerArray.count; i++) {
// 所有的分组默认关闭
[self.boolArray addObject:@NO];
// 给每个分组添加数据
NSMutableArray * friendArr = [[NSMutableArray alloc] init];
for (int j = 0; j < [itemArr[i] intValue]; j++) {
[friendArr addObject:@(j)];
}
[self.dataArray addObject:friendArr];
}
[self.tableView reloadData];
}
#pragma mark - Lazying Load
- (NSMutableArray *)boolArray {
if (!_boolArray) {
_boolArray = [[NSMutableArray alloc] init];
}
return _boolArray;
}
- (NSMutableArray *)dataArray {
if (!_dataArray) {
_dataArray = [[NSMutableArray alloc] init];
}
return _dataArray;
}
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc] init];
_tableView.backgroundColor = [UIColor whiteColor];
_tableView.showsHorizontalScrollIndicator = NO;
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
_tableView.tableFooterView = [UIView new];
[_tableView registerClass:[YDWFriendHeadView class] forHeaderFooterViewReuseIdentifier:kYDWFriendHeadViewIndentifer];
}
return _tableView;
}
@end
- YDWFriendHeadView：本类主要布局组标题以及指示（展开/关闭）控件，其次，通过添加点击手势结合委托模式，传递tag值。
NS_ASSUME_NONNULL_BEGIN
@class YDWFriendHeadView;
@protocol FriendHeadViewDelegate <NSObject>
- (void)friendHeaderReusableView:(YDWFriendHeadView *)friendHeaderReusableView didSelectItemAtSection:(NSInteger)section;
@end
@interface YDWFriendHeadView : UITableViewHeaderFooterView
@property(nonatomic,weak) id <FriendHeadViewDelegate>delegte;
@property(nonatomic,weak) UIImageView *imageView;
@property(nonatomic,weak) UILabel *titleLabel;
@property(nonatomic,weak) UILabel *numLabel;
@end
NS_ASSUME_NONNULL_END
#import "YDWFriendHeadView.h"
@implementation YDWFriendHeadView
#pragma mark - 初始化
- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithReuseIdentifier:reuseIdentifier]) {
self.userInteractionEnabled = YES;
self.contentView.backgroundColor = [UIColor whiteColor];
UITapGestureRecognizer *tapGes = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickView:)];
[self addGestureRecognizer:tapGes];
[self addSubviews];
}
return self;
}
- (void)awakeFromNib {
[super awakeFromNib];
[self addSubviews];
}
#pragma mark - 设置UI界面
- (void)addSubviews {
// 添加图标
UIImageView *imageView = [[UIImageView alloc] init];
[self addSubview:imageView];
self.imageView = imageView;
// 添加标题
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.font = [UIFont systemFontOfSize:18];
titleLabel.textColor = [UIColor darkGrayColor];
[self addSubview:titleLabel];
self.titleLabel = titleLabel;
// 添加人数
UILabel *numLabel = [[UILabel alloc] init];
numLabel.font = [UIFont systemFontOfSize:14];
numLabel.textAlignment = NSTextAlignmentRight;
numLabel.textColor = [UIColor lightGrayColor];
[self addSubview:numLabel];
self.numLabel = numLabel;
}
- (void)layoutSubviews {
[super layoutSubviews];
// 图标
self.imageView.frame = CGRectMake(10, 10, 20, 20);
// 标题
CGFloat numW = 60;
CGFloat titleX = CGRectGetMaxX(self.imageView.frame) + 10;
CGFloat titleW = SCREEN_WIDTH - titleX - numW -15;
self.titleLabel.frame = CGRectMake(titleX, 10, titleW, 20);
// 人数
CGFloat numX = SCREEN_WIDTH - numW - 10;
self.numLabel.frame = CGRectMake(numX, 10, numW, 20);
}
#pragma mark - 监听事件
- (void)clickView:(UITapGestureRecognizer *)tapGes {
if ([self.delegte respondsToSelector:@selector(friendHeaderReusableView:didSelectItemAtSection:)]) {
[self.delegte friendHeaderReusableView:self didSelectItemAtSection:self.tag];
}
}
@end
- YDWFriendListShowTableViewCell：主要布局好友信息包括头像、昵称以及签名，具体实现如下：
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface YDWFriendListShowTableViewCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIImageView *headImageView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *signLabel;
@end
NS_ASSUME_NONNULL_END
#import "YDWFriendListShowTableViewCell.h"
@implementation YDWFriendListShowTableViewCell
- (void)awakeFromNib {
[super awakeFromNib];
self.headImageView.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0];
[self.headImageView.layer setMasksToBounds:YES];
[self.headImageView.layer setCornerRadius:25];
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
}
@end
效果展示：与UICollectionView实现得的效果一致。
