iOS 类似于礼物说分类栏TableView,CollectionView联动的实现

最近看了各大公司的App上都有左边滑动关联右边跟着一起移动的页面,所以这两天也闲下来了,尝试了一下写了个Demo。写的有点乱,还是希望各位多多见谅,如果有错误或者而优化的地方可以跟我联系 e-mail:[e-mail] 希望大家一起进步

这里是个继承于UIView的类,也就是主页面,在Vc里如果要使用的话直接引头文件调用

////  LianDongView.m//  TryFiles////  Created by ChuXiang on 16/1/8.//  Copyright © 2016年 ChuXiang. All rights reserved.//#import "LianDongView.h"#import "LeftTableViewCell.h"#import "UIView+UIViewAdditions.h"#import "RightCollectionViewCell.h"#import "CXNetWorkTool.h"//限制左边tableView和右边collectionView滑动不会冲突,只保证走一种方法static BOOL isGetWhatWay = YES;@interface LianDongView () <UITableViewDelegate, UITableViewDataSource, UICollectionViewDelegate, UICollectionViewDataSource>//tableView选中时底部会有一根红线,其实就是个UIView@property (nonatomic, strong) UIView *bottomView;//左边的tableView@property (nonatomic, strong) UITableView *tab;//记录上次点击的是哪个cell的IndexPath@property (nonatomic, strong) NSIndexPath *oldIndexpath;//右边的collection@property (nonatomic, strong) UICollectionView *collect;//记录目前选中的cell的IndexPath@property (nonatomic, strong) NSIndexPath *recordIndex;//左边tableView的数据数组@property (nonatomic, strong) NSArray *leftData;@end@implementation LianDongView- (void)dealloc {//因为使用了夜间模式，所以写了个通知,这里是给它dealloc    [[NSNotificationCenter defaultCenter] removeObserver:self];}- (instancetype)initWithFrame:(CGRect)frame {    self = [super initWithFrame:frame];    if (self) {        self.data = [NSMutableArray arrayWithCapacity:0];        self.oldIndexpath = [NSIndexPath indexPathForRow:0 inSection:0] ;        self.recordIndex = [NSIndexPath indexPathForRow:0 inSection:0];        self.tab = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.width / 5, self.height) style:UITableViewStylePlain];        self.tab.delegate = self;        self.tab.dataSource = self;        self.tab.separatorStyle = UITableViewCellSeparatorStyleNone;        self.tab.showsVerticalScrollIndicator = NO;        [self.tab registerClass:[LeftTableViewCell class] forCellReuseIdentifier:@"LeftTableViewCellIdentifier"];        [self addSubview:self.tab];        _bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tab.width / 17, 44)];        _bottomView.backgroundColor = [UIColor colorWithRed:255 / 255.0 green:38 / 255.0 blue:56 / 255.0 alpha:1.0];        [self.tab addSubview:_bottomView];        UICollectionViewFlowLayout *flowLaout = [[UICollectionViewFlowLayout alloc] init];        flowLaout.scrollDirection = UICollectionViewScrollDirectionVertical;        //    item的大小        flowLaout.itemSize = CGSizeMake((self.width - self.tab.width - 10) / 3 , 120);        //    item的最小行间距        flowLaout.minimumLineSpacing = 5;        //    item的最小列间距        flowLaout.minimumInteritemSpacing = 5;        self.collect = [[UICollectionView alloc] initWithFrame:CGRectMake(self.width / 5, 20, self.width / 5 * 4, self.height) collectionViewLayout:flowLaout];        [self.collect registerClass:[RightCollectionViewCell class] forCellWithReuseIdentifier:@"RightCollectionViewCellIdentifier"];        [self.collect registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView1"];        self.collect.backgroundColor = [UIColor whiteColor];        self.collect.decelerationRate = 5.0;        self.collect.delegate = self;        self.collect.dataSource = self;        [self addSubview:self.collect];        NSNotificationCenter *center = [NSNotificationCenter defaultCenter];        [center addObserver:self selector:@selector(changeDays:) name:@"Color" object:nil];    }    return self;}//这里需要从外面传个整个数据数组进来,大家别忘记在.h里写个数组属性,外面好传值进来-(void)setData:(NSMutableArray *)data {    if (_data != data) {        _data = data;        [self.tab reloadData];        [self.collect reloadData];    }    //    夜间模式换cell得背景颜色    if ([[[NSUserDefaults standardUserDefaults] objectForKey:@"Color"] isEqualToString:@"BlackColor"]) {        self.backgroundColor = [UIColor colorWithRed:35 / 255.0 green:34 / 255.0 blue:38 / 255.0 alpha:1.0];    }else{        self.backgroundColor =  [UIColor whiteColor];    }}#pragma mark - Collection- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    self.leftData = [self.data[section] subcategorie];    return self.leftData.count;}- (NSInteger) numberOfSectionsInCollectionView:(UICollectionView *)collectionView {    return self.data.count;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {    self.leftData = [self.data[indexPath.section] subcategorie];    RightCollectionViewCell *item = [collectionView dequeueReusableCellWithReuseIdentifier:@"RightCollectionViewCellIdentifier" forIndexPath:indexPath];    item.model = self.leftData[indexPath.item];    return item;}- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {        if (kind == UICollectionElementKindSectionHeader) {            UICollectionReusableView *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView1" forIndexPath:indexPath];            [reusableView removeAllSubviews];            UILabel *label = [UILabel new];            label.frame = CGRectMake(0, 20, self.width / 5 * 4, 30);            [label setFont:[UIFont fontWithName:@"FZLanTingHei-EL-GBK" size:11]];            label.textAlignment = NSTextAlignmentCenter;            CXOUtModel *model = self.data[indexPath.section];            NSString *str = [NSString stringWithFormat:@"————————— %@ —————————", model.name];            label.textColor = [UIColor grayColor];            label.text = str;            [reusableView addSubview:label];            return reusableView;        }else{            UICollectionReusableView *resableviewtow = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath ];            return resableviewtow;    }}// 头视图高度-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{    return  CGSizeMake(self.width / 5 * 4, 70);}// collectionView的头视图出现的时候tableView切换- (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {    if (indexPath.section == 0) {        return;    }    if (isGetWhatWay == YES) {        self.recordIndex = [NSIndexPath indexPathForRow:self.recordIndex.section - 1 inSection:self.recordIndex.row];        //    夜间模式换cell得背景颜色        if ([[[NSUserDefaults standardUserDefaults] objectForKey:@"Color"] isEqualToString:@"BlackColor"]) {            LeftTableViewCell *cell1 = [self.tab cellForRowAtIndexPath:self.recordIndex];            cell1.label.textColor = [UIColor whiteColor];            LeftTableViewCell *cell2 = [self.tab cellForRowAtIndexPath:self.oldIndexpath];            cell2.label.textColor = [UIColor whiteColor];        }else{            LeftTableViewCell *cell1 = [self.tab cellForRowAtIndexPath:self.recordIndex];            cell1.label.textColor = [UIColor blackColor];            LeftTableViewCell *cell2 = [self.tab cellForRowAtIndexPath:self.oldIndexpath];            cell2.label.textColor = [UIColor blackColor];        }        NSIndexPath *path = [NSIndexPath indexPathForRow:indexPath.section - 1 inSection:indexPath.row];        LeftTableViewCell *cell = [self.tab cellForRowAtIndexPath:path];        cell.label.textColor = [UIColor colorWithRed:255 / 255.0 green:38 / 255.0 blue:56 / 255.0 alpha:1.0];        self.bottomView.frame = CGRectMake(0, 44 * path.row, self.tab.width / 17, 44);        NSInteger section = indexPath.section;        NSIndexPath *tabIndexPath = [NSIndexPath indexPathForRow:section - 1 inSection:0];        [self.tab selectRowAtIndexPath:tabIndexPath animated:YES scrollPosition:UITableViewScrollPositionMiddle];        self.recordIndex = indexPath;    }}#pragma mark - CollectionView Click- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {    self.leftData = [self.data[indexPath.section] subcategorie];    NSMutableArray *setArray = [NSMutableArray arrayWithCapacity:0];    CXGiftModel *model = self.leftData[indexPath.item];    NSString *urlStr = [NSString stringWithFormat:@"http://api.liwushuo.com/v2/item_subcategories/%@/items?limit=20&offset=0", model.NewId];    [setArray addObject:urlStr];    [setArray addObject:model.name];    _myBlock(setArray);}#pragma mark - TableView- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {    return self.data.count;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {    LeftTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"LeftTableViewCellIdentifier"];    //    夜间模式换cell得背景颜色    if ([[[NSUserDefaults standardUserDefaults] objectForKey:@"Color"] isEqualToString:@"BlackColor"]) {       cell.label.textColor = [UIColor whiteColor];    }else{       cell.label.textColor = [UIColor blackColor];    }    UIView *back = [[UIView alloc] initWithFrame:cell.frame];    back.backgroundColor = [UIColor clearColor];    cell.selectedBackgroundView = back;    cell.model = self.data[indexPath.row];    return cell;}//点击左边的cell让右边的collectionView item跟着滑动到指定的偏移量- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {        [tableView deselectRowAtIndexPath:indexPath animated:YES];        LeftTableViewCell *cell2 = [tableView cellForRowAtIndexPath:self.recordIndex];        LeftTableViewCell *cell1 = [tableView cellForRowAtIndexPath:self.oldIndexpath];    //    夜间模式换cell得背景颜色        if ([[[NSUserDefaults standardUserDefaults] objectForKey:@"Color"] isEqualToString:@"BlackColor"]) {            cell1.label.textColor = [UIColor blackColor];            cell2.label.textColor = [UIColor blackColor];        }else{            cell1.label.textColor = [UIColor whiteColor];            cell2.label.textColor = [UIColor whiteColor];        }        LeftTableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];        cell.label.textColor = [UIColor colorWithRed:255 / 255.0 green:38 / 255.0 blue:56 / 255.0 alpha:1.0];        self.bottomView.frame = CGRectMake(0, 44 * indexPath.row, self.tab.width / 17, 44);        NSInteger section = indexPath.row + 1;        NSIndexPath *tabIndexPath = [NSIndexPath indexPathForRow:0 inSection:section];        [self.collect scrollToItemAtIndexPath:tabIndexPath atScrollPosition:UICollectionViewScrollPositionBottom animated:YES];        self.oldIndexpath = indexPath;         isGetWhatWay = YES;}

下面是tableView的自定义cell代码，这里就是最简单的部分，大家根据自己项目和公司App的要求在这里更改左边标签的样式，其实看了好多App也基本大同小异都是类似于这种

////  LeftTableViewCell.m//  TryFiles////  Created by ChuXiang on 16/1/8.//  Copyright © 2016年 ChuXiang. All rights reserved.//#import "LeftTableViewCell.h"#import "UIView+UIViewAdditions.h"//static BOOL changeColor = YES;@interface LeftTableViewCell ()@end@implementation LeftTableViewCell- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];    if (self) {        self.label = [UILabel new];        self.label.textAlignment = NSTextAlignmentCenter;        [self.label setFont:[UIFont fontWithName:@"FZLanTingHei-EL-GBK" size:13]];        [self addSubview:self.label];    }    return self;}- (void)layoutSubviews {    [super layoutSubviews];    self.label.frame = CGRectMake(0, 0, self.width, self.height);}- (void)setModel:(CXOUtModel *)model {    if (_model != model) {        _model = model;        }    self.label.text = model.name;    //    夜间模式换cell得背景颜色    if ([[[NSUserDefaults standardUserDefaults] objectForKey:@"Color"] isEqualToString:@"BlackColor"]) {        self.backgroundColor = [UIColor colorWithRed:35 / 255.0 green:34 / 255.0 blue:38 / 255.0 alpha:1.0];        self.label.textColor = [UIColor whiteColor];    }else{        self.backgroundColor =  [UIColor whiteColor];        self.label.textColor = [UIColor blackColor];    }}

CollectionView item的自定义 如上面tableView一样

////  RightCollectionViewCell.m//  TryFiles////  Created by ChuXiang on 16/1/8.//  Copyright © 2016年 ChuXiang. All rights reserved.//#import "RightCollectionViewCell.h"@interface RightCollectionViewCell ()@property (nonatomic, strong) UIImageView *image;@property (nonatomic, strong) UILabel *textLabel;@end@implementation RightCollectionViewCell- (instancetype)initWithFrame:(CGRect)frame {    self = [super initWithFrame:frame];    if (self) {        self.image = [UIImageView new];        [self addSubview:self.image];        self.textLabel = [UILabel new];        self.textLabel.textAlignment = NSTextAlignmentCenter;        [self.textLabel setFont:[UIFont fontWithName:@"FZLanTingHei-EL-GBK" size:12]];        [self addSubview:self.textLabel];    }    return self;}- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {    [super applyLayoutAttributes:layoutAttributes];    self.image.frame = CGRectMake(0, 0, self.width, self.height - 15);    self.textLabel.frame = CGRectMake(0, self.image.bottom, self.width, 15);}- (void)setModel:(CXGiftModel *)model {    if (_model != model) {        _model = model;    }    self.textLabel.text = model.name;    [self.image sd_setImageWithURL:[NSURL URLWithString:model.icon_url]];}

这样就基本实现了，对了，我是直接用AFNetworking请求的数据，装到了Model里，所以我每个cell里都传了个model进去。大家如果用的别的方法传的数据，把那里改了就行。
其实这个东西还是挺简单的，主要就是tableView跟collectionView关联那块有稍微一点点的麻烦，大家多看看就能懂。
请大家多给我找点BUG和代码优化的地方，多跟我交流。这样才能成长

e-mail:[e-mail]