iOS复杂的列表布局处理

作者: HCL黄 | 来源:发表于2019-09-29 16:16 被阅读0次

iOS复杂的列表布局处理
UITableView 的优化技巧
技术博客
iOS Swift CollectionView 列表与网格布局
Recyclerview滚动实现隐藏和显示悬浮按钮
iOS之UIKit的布局和绘制
HTML 5列表、块和布局；学习笔记（二）
webview 微信网页 ios andriod 列表滑动 io
IOS开合列表
ios 使用本地通知

如图 269F0E2B-6B63-42B1-970D-354414CB54B1.png

我们先把他拆分几个部分

顶部对应一个cell 91A2FD14-8056-4E11-830E-EE1FA90EF555.png
sectionView BF76E3DF-E6EE-4EB4-B247-FAD0D4DB8965.png
岗位列表对应的cell DB2F2C1C-0FF5-4F0A-9FA1-BCA6E3BBE39D.png
无岗位列表时对应的cell 65601F1E-CDFB-4017-AE5E-962E2C9DA8C8.png
应聘对话对应的cell A0936199-B0C8-44EA-BE47-4ECE0BEA018A.png
无应聘对话时对应的cell 9A909110-E555-4B5E-9D6C-AF3789AEE39B.png

对应的我们定义一下枚举

typedef enum : NSUInteger {
    LATypeTop, // 默认顶部
    LATypeJobs, // 招聘岗位
    LATypeNoJobs, // 没有发布岗位
    LATypeChat, // 应聘对话
    LATypeNoChat, // 没有应聘对话
} LAType;

同样的我们也定义对应的数据数组

注意初始化这些数组

@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSMutableArray *groupM;
@property (nonatomic, strong) NSMutableArray *topM;
@property (nonatomic, strong) NSMutableArray *jobsM;
@property (nonatomic, strong) NSMutableArray *noJobsM;
@property (nonatomic, strong) NSMutableArray *chatM;
@property (nonatomic, strong) NSMutableArray *noChat;

创建我们的列表，注册对应的cell

- (UITableView *)tableView {
    if (_tableView == nil) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:(UITableViewStylePlain)];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        _tableView.rowHeight = UITableViewAutomaticDimension;
        _tableView.estimatedRowHeight = 100;
        _tableView.backgroundColor = LAColorBackground;
    }
    return _tableView;
}
[self.view addSubview:self.tableView];
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
      make.top.equalTo(self.view);
      make.left.right.bottom.equalTo(self.view);
 }];
[self.tableView registerNib:[LATopCell nib] forCellReuseIdentifier:[LATopCell reuseIdentifier]];
[self.tableView registerNib:[LAEmptyCell nib] forCellReuseIdentifier:[LAEmptyCell reuseIdentifier]];
[self.tableView registerNib:[LAJobsCell nib] forCellReuseIdentifier:[LAJobsCell reuseIdentifier]];
[self.tableView registerNib:[LAChatCell nib] forCellReuseIdentifier:[LAChatCell reuseIdentifier]];

完成tableView代理数据源的配置

#pragma mark - UITableViewDelegate/UITableViewDataSource

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

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    NSDictionary *dict = self.groupM[section];
    if ([[dict allKeys] containsObject:@(LATypeTop)]) {
        return self.topM.count > 0 ? 1 : 0;
    } else if ([[dict allKeys] containsObject:@(LATypeNoJobs)]) {
        return self.noJobsM.count > 0 ? 1 : 0;
    } else if ([[dict allKeys] containsObject:@(LATypeNoChat)]) {
        return self.noChat.count > 0 ? 1 : 0;
    } else if ([[dict allKeys] containsObject:@(LATypeJobs)]) {
        return self.jobsM.count;
    } else if ([[dict allKeys] containsObject:@(LATypeChat)]) {
        return self.chatM.count;
    }
    return 0;
}

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 250;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSDictionary *dict = self.groupM[indexPath.section];
    if ([[dict allKeys] containsObject:@(LATypeTop)]) {
        LATopCell *cell = [tableView dequeueReusableCellWithIdentifier:[LATopCell reuseIdentifier]];
        return cell;
    } else if ([[dict allKeys] containsObject:@(LATypeNoJobs)]) {
        LAEmptyCell *cell = [tableView dequeueReusableCellWithIdentifier:[LAEmptyCell reuseIdentifier]];
        cell.emptyImgStr = @"recruit_bg_noJob";
        return cell;
    } else if ([[dict allKeys] containsObject:@(LATypeNoChat)]) {
        LAEmptyCell *cell = [tableView dequeueReusableCellWithIdentifier:[LAEmptyCell reuseIdentifier]];
        cell.emptyImgStr = @"recruit_bg_noChat";
        return cell;
    } else if ([[dict allKeys] containsObject:@(LATypeJobs)]) {
        LAJobsCell *cell = [tableView dequeueReusableCellWithIdentifier:[LAJobsCell reuseIdentifier]];
        return cell;
    } else if ([[dict allKeys] containsObject:@(LATypeChat)]) {
        LAChatCell *cell = [tableView dequeueReusableCellWithIdentifier:[LAChatCell reuseIdentifier]];
        return cell;
    }
    
    return nil;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    LAMRBGSectionView *sectionView = [LAMRBGSectionView loadFromNib];
    NSDictionary *dict = self.groupM[section];
    @weakify(self);
    if ([[dict allKeys] containsObject:@(LATypeJobs)]||
        [[dict allKeys] containsObject:@(LATypeNoJobs)]) {
        sectionView.titleString = @"招聘岗位";
        sectionView.showMoreBtn = self.jobsM.count != 0;
        sectionView.rightBlock = ^{
            @strongify(self);
        };
        return sectionView;
    } else if ([[dict allKeys] containsObject:@(LATypeChat)]||
        [[dict allKeys] containsObject:@(LATypeNoChat)]) {
        sectionView.titleString = @"应聘对话";
        sectionView.showMoreBtn = self.chatM.count != 0;
        sectionView.rightBlock = ^{
            @strongify(self);
        };
        return sectionView;
    }
    return nil;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    NSDictionary *dict = self.groupM[section];
    if ([[dict allKeys] containsObject:@(LATypeJobs)]||
        [[dict allKeys] containsObject:@(LATypeNoJobs)]||
        [[dict allKeys] containsObject:@(LATypeChat)]||
        [[dict allKeys] containsObject:@(LATypeNoChat)]) {
        return 58;
    }
    return 0;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    @weakify(self);
    NSDictionary *dict = self.groupM[indexPath.section];
    if ([[dict allKeys] containsObject:@(LATypeJobs)]) {
        LAXXXXXXVc *vc = [[LAXXXXXXVc alloc] init];
        [self.navigationController pushViewController:vc animated:YES];
    }else if ([[dict allKeys] containsObject:@(LATypeChat)]) {
        LAModel *m = self.chatM[indexPath.row];
        LAXXXXXXVc *chatVc = [[LAXXXXXXVc alloc] init];
        [self.navigationController pushViewController:chatVc animated:YES];
    }
}

接下来就是填充数据了

先抽取几个方法

/** 删除group数组对应rBgType的数据 */
- (void)deleteRelatedDataWithArrayM:(NSMutableArray *)arrayM rBgType:(LABGType)rBgType {
    [arrayM removeAllObjects];
    for (NSDictionary *dict in self.groupM) {
        if ([[dict allKeys] containsObject:@(rBgType)]) {
            [self.groupM removeObject:dict];
            break;
        }
    }
}
/** 添加对应rBgType的数据：如顶部单独的cell */
- (void)addRelatedDataWithArrayM:(NSMutableArray *)arrayM rBgType:(LABGType)rBgType {
    [self deleteRelatedDataWithArrayM:arrayM rBgType:rBgType];
    [arrayM addObject:@"1"];
    NSDictionary *dict = @{@(rBgType) : arrayM};
    [self.groupM addObject:dict];
}
/** 添加对应rBgType的数据：如应聘对话列表的cell */
- (void)addRelatedDataWithArrayM:(NSMutableArray *)arrayM rBgType:(LABGType)rBgType models:(NSArray *)models {
    [self deleteRelatedDataWithArrayM:arrayM rBgType:rBgType];
    [arrayM addObjectsFromArray:models];
    NSDictionary *dict = @{@(rBgType) : arrayM};
    [self.groupM addObject:dict];
}

开始填充数据

// 默认添加顶部
[self addRelatedDataWithArrayM:self.topM rBgType:LATypeTop];
if (self.b236Model.list.count == 0) {
   // 添加招聘岗位空视图
   [self addRelatedDataWithArrayM:self.noJobsM rBgType:LATypeNoJobs];
} else {
   // 删除招聘岗位空视图
   [self deleteRelatedDataWithArrayM:self.noJobsM rBgType:LATypeNoJobs];
   // 添加招聘岗位
   [self addRelatedDataWithArrayM:self.jobsM rBgType:LATypeJobs models:self.b236Model.list];
 }
if (b233Model.list.count == 0) {
   // 添加应聘对话空视图
   [self addRelatedDataWithArrayM:self.noChat rBgType:LATypeNoChat];
} else {
  // 删除应聘对话空视图
  [self deleteRelatedDataWithArrayM:self.noChat rBgType:LATypeNoChat];
  // 添加应聘对话
 [self addRelatedDataWithArrayM:self.chatM rBgType:LATypeChat models:b233Model.list];
}
[self.tableView reloadData];

OK，到此为止了

iOS复杂的列表布局处理
如图269F0E2B-6B63-42B1-970D-354414CB54B1.png 我们先把他拆分几个部分顶部...
UITableView 的优化技巧
UITableView 是 iOS 开发中的常用控件，用来加载列表数据，当列表数据量大或者列表布局过于复杂的时候有...
技术博客
iOS简单国际化的处理 collectionView的规则流水布局与不规则流水布局 iOS消息推送机制 iOS知识...
iOS Swift CollectionView 列表与网格布局
iOS Swift CollectionView 列表与网格布局之间切换（带动画）图片示例：
Recyclerview滚动实现隐藏和显示悬浮按钮
前言: 最近项目用到很多Recyclerview方面的知识,例如复杂列表布局的显示,瀑布流数据展示,商品列表的刷新...
iOS之UIKit的布局和绘制
整理对于iOS绘制和布局的知识。一.iOS的主RunLoop iOS 的主 RunLoop 负责处理所有的用户输...
HTML 5列表、块和布局；学习笔记（二）
列表、块和布局列表块布局使用元素布局使用元素布局
webview 微信网页 ios andriod 列表滑动 io
布局：flex 对于公众号网页开发，ios和 android的兼容一直都是很让开发头痛功能列表滚动（ios/a...
IOS开合列表
一款ios开合列表本开合列表依据数据处理实现的开合，所以代码量极少，页面处理简洁，轻松实现列表开合项目地址：h...
ios 使用本地通知
IOS10系统 app没有出现在系统设置-通知列表处理