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