iOS 使用UICollectionView 模仿QQ好友列表展

作者: Coder_张三 | 来源:发表于2019-05-24 18:05 被阅读64次

前言：

这里给大家分享一个类似于QQ列表的展开收起的功能，网上有很多博主使用了UITabelView来实现，那我这边就使用UICollectionView来实现吧！在这里我需要声明一下，本篇文章是参考了一位博主做的，他是使用Swift来实现，下面贴上他的文章链接：https://www.jianshu.com/p/f93cfb0a7e46?nomobile=yes

下面说一下实现的思路：
1、首先，很明显的它是一个列表，它的分组是一个列表，它里面的好友列表也是一个列表，这个时候我们这么做，使用组头来设置分组列表，使用cell设置好友列表。
2、当我们点击组头的时候会展开好友列表，其实原理上就是单独刷新某一组的数据，具体我就不多说了，还是直接贴上代码吧！

这是控制器里的代码：

#import "ViewController.h"
#import "FSFriendHeaderReusableView.h"
#import "FSFriendListCollectionCell.h"

#define FSScreenW [UIScreen mainScreen].bounds.size.width
#define FSScreenH [UIScreen mainScreen].bounds.size.height

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout,FSFriendHeaderReusableViewDelegate>
/**
 添加collectionView
 */
@property(nonatomic,strong) UICollectionView *collectionView;
/**
 好友组头列表数组
 */
@property(nonatomic,strong) NSArray *headerArr;
/**
 好友列表数据
 */
@property (nonatomic, strong) NSMutableArray * dataArr;
/**
 存储是否展开的BOOL值
 */
@property (nonatomic, strong) NSMutableArray * boolArr;

@end

@implementation ViewController
//****************************cell的ID*************************//
static NSString * const FSFriendListCollectionCellID = @"FSFriendListCollectionCellID";
static NSString * const FSFriendHeaderReusableViewID = @"FSFriendHeaderReusableViewID";
//*************************************************************//
#pragma mark 懒加载
- (NSMutableArray *)dataArr {
    if (!_dataArr) {
        _dataArr = [[NSMutableArray alloc] init];
    }
    return _dataArr;
}

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

- (UICollectionView *)collectionView {
    if (!_collectionView) {
        //1.创建layout
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        layout.itemSize = CGSizeMake(FSScreenW, 70);
        layout.minimumLineSpacing = 0;
        layout.minimumInteritemSpacing = 0;
        layout.scrollDirection = UICollectionViewScrollDirectionVertical;
        layout.headerReferenceSize = CGSizeMake(FSScreenW, 40);
        
        //2.创建UICollectionView
        _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:[FSFriendHeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:FSFriendHeaderReusableViewID];
        [_collectionView registerClass:[FSFriendListCollectionCell class] forCellWithReuseIdentifier:FSFriendListCollectionCellID];
    }
    return _collectionView;
}

#pragma mark 系统回调函数
- (void)viewDidLoad {
    [super viewDidLoad];
    //0、初始化一些值
    self.navigationItem.title = @"好友列表";
    
    //1、添加子视图
    [self addSubviews];
    
    //2、准备数据
    [self getListData];
}

#pragma mark 准备数据
- (void)getListData {
    //1、准备组头的数据
    NSArray *headerArr = [NSArray arrayWithObjects:@"特别关心", @"我的好友", @"朋友", @"家人",nil];
    self.headerArr = headerArr;
    
    //2、准备单元格的数据
    NSArray *itemArr = [NSArray arrayWithObjects:@5, @10, @7,@3,  nil];
    for (int i=0; i<self.headerArr.count; i++) {
        //1、所有的分组默认关闭
        [self.boolArr addObject:@NO];
        
        //2、给每个分组添加数据
        NSMutableArray * friendArr = [[NSMutableArray alloc] init];
        for (int j=0; j<[itemArr[i] intValue]; j++) {
            [friendArr addObject:@(j)];
        }
        [self.dataArr addObject:friendArr];
        
    }
    
    [self.collectionView reloadData];
}

#pragma mark 设置UI界面
- (void)addSubviews {
    //1、添加collectionView
    [self.view addSubview:self.collectionView];
    self.collectionView.frame = self.view.bounds;
}

#pragma mark FSFriendHeaderReusableViewDelegate
- (void)friendHeaderReusableView:(FSFriendHeaderReusableView *)friendHeaderReusableView didSelectItemAtSection:(NSInteger)section {
    
    //判断改变bool值
    if ([self.boolArr[section] boolValue] == YES) {
        [self.boolArr replaceObjectAtIndex:section withObject:@NO];
    }else {
        [self.boolArr replaceObjectAtIndex:section withObject:@YES];
    }
    //刷新某个section
    [self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:section]];;
}

#pragma mark UICollectionViewDataSource,UICollectionViewDelegate
//确定组数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return self.headerArr.count;
}

//确定组内行数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    //判断是否展开，如果未展开则返回0
    if ([self.boolArr[section] boolValue] == NO) {
        return 0;
    }else {
        return [self.dataArr[section] count];
    }

}

//添加组头
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    FSFriendHeaderReusableView *reusView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:FSFriendHeaderReusableViewID forIndexPath:indexPath];
    reusView.delegte = self;
    reusView.backgroundColor = [UIColor whiteColor];
    reusView.tag = indexPath.section;
    
    //三目运算选择展开或者闭合时候的图标
    reusView.imageView.image = [_boolArr[indexPath.section] boolValue] ? [UIImage imageNamed:[NSString stringWithFormat:@"zhankai"]] : [UIImage imageNamed:[NSString stringWithFormat:@"shouqi"]];
    
    reusView.titleLabel.text = self.headerArr[indexPath.section];
    reusView.numLabel.text = [NSString stringWithFormat:@"%ld/%lu",(long)indexPath.section, (unsigned long)[self.dataArr[indexPath.section] count]];
    
    return reusView;
}

//细化单元格
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    FSFriendListCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:FSFriendListCollectionCellID 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;
}

@end

FSFriendHeaderReusableView.h 文件的代码

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN
@class FSFriendHeaderReusableView;
@protocol FSFriendHeaderReusableViewDelegate <NSObject>

- (void)friendHeaderReusableView:(FSFriendHeaderReusableView *)friendHeaderReusableView didSelectItemAtSection:(NSInteger)section;

@end

@interface FSFriendHeaderReusableView : UICollectionReusableView

@property(nonatomic,weak) id <FSFriendHeaderReusableViewDelegate>delegte;

/**
 图标
 */
@property(nonatomic,weak) UIImageView *imageView;
/**
 标题
 */
@property(nonatomic,weak) UILabel *titleLabel;
/**
 人数
 */
@property(nonatomic,weak) UILabel *numLabel;
@end

NS_ASSUME_NONNULL_END

FSFriendHeaderReusableView.m 文件的代码

#import "FSFriendHeaderReusableView.h"

#define FSScreenW [UIScreen mainScreen].bounds.size.width

@interface FSFriendHeaderReusableView ()

@end

@implementation FSFriendHeaderReusableView
#pragma mark 初始化
-(instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        //0、未父类视图添加响应事件
        self.userInteractionEnabled = YES;
        UITapGestureRecognizer *tapGes = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickView:)];
        [self addGestureRecognizer:tapGes];
        
        //1、添加子视图
        [self addSubviews];
    }
    return self;
}

#pragma mark 设置UI界面
- (void)addSubviews {
    //1、添加图标
    UIImageView *imageView = [[UIImageView alloc] init];
    [self addSubview:imageView];
    self.imageView = imageView;
    
    //2、添加标题
    UILabel *titleLabel = [[UILabel alloc] init];
    titleLabel.font = [UIFont systemFontOfSize:18];
    titleLabel.textColor = [UIColor darkGrayColor];
    [self addSubview:titleLabel];
    self.titleLabel = titleLabel;
    
    //3、添加人数
    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];
    //1、图标
    self.imageView.frame = CGRectMake(10, 10, 20, 20);
    
    //2、标题
    CGFloat numW = 60;
    CGFloat titleX = CGRectGetMaxX(self.imageView.frame) + 10;
    CGFloat titleW = FSScreenW - titleX - numW -15;
    self.titleLabel.frame = CGRectMake(titleX, 10, titleW, 20);
    
    //3、人数
    CGFloat numX = FSScreenW - numW - 10;
    self.numLabel.frame = CGRectMake(numX, 10, numW, 20);
}

#pragma nmark 监听事件
- (void)clickView:(UITapGestureRecognizer *)tapGes {
    if ([self.delegte respondsToSelector:@selector(friendHeaderReusableView:didSelectItemAtSection:)]) {
        [self.delegte friendHeaderReusableView:self didSelectItemAtSection:self.tag];
    }
}
@end

FSFriendListCollectionCell.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface FSFriendListCollectionCell : UICollectionViewCell
@property(nonatomic,weak) UIImageView *imageView;
@property(nonatomic,weak) UILabel *nameLabel;
@property(nonatomic,weak) UILabel *detailsLabel;
@end

NS_ASSUME_NONNULL_END

FSFriendListCollectionCell.m

#import "FSFriendListCollectionCell.h"

#define FSScreenW [UIScreen mainScreen].bounds.size.width

@interface FSFriendListCollectionCell ()

@end

@implementation FSFriendListCollectionCell
#pragma mark 初始化
-(instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        
        //1、添加子视图
        [self addSubviews];
    }
    return self;
}

#pragma mark 设置UI界面
- (void)addSubviews {
    //1、添加图标
    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;
    
    //2、添加标题
    UILabel *nameLabel = [[UILabel alloc] init];
    nameLabel.font = [UIFont systemFontOfSize:18];
    nameLabel.textColor = [UIColor darkGrayColor];
    [self addSubview:nameLabel];
    self.nameLabel = nameLabel;
    
    //3、添加签名
    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 = FSScreenW - 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 = FSScreenW - detailsX - 10;
    self.detailsLabel.frame = CGRectMake(detailsX, detailsY, detailsW, 20);
}
@end

最后呢，小编给大家贴上我的Demo的地址：https://github.com/RegretSF/FriendsListDemo，还希望大家多多指教！

iOS 使用UICollectionView 模仿QQ好友列表展

前言：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视图控件