iOS-电商常用上下左右滑动

效果如下

• 整体view的滑动直到蓝色view滑动到顶部的时候,悬浮在顶部.
• 主view是一个tableView,顶部橘黄色tableView的headerView可以做轮播器
• 底部橘黄色tableView的footerView可以做其他
• 蓝色为第一组的headerView,可以做分类按钮
• 中间cell则可以展示产品详情
• 中间是一个tableView的cell,cell中放的是collectionView,每个collectionView的cell里面放的是一个tableView.
• 当点击中间的cell 的时候,通过回调将点击事件返回给控制器

代码如下

#import "ViewController.h"#import "HomeTableViewCell.h"#define kScreenW [UIScreen mainScreen].bounds.size.width#define kScreenH [UIScreen mainScreen].bounds.size.height#define kScreenB [UIScreen mainScreen].bounds@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>@property (nonatomic, strong) UITableView *tableView;@end

---

设置tableView的headerView与footerView

#pragma mark - tableView的头尾view-(void)setTableViewHeaderView{    UIView * tabHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, 80)];    _tableView.tableHeaderView = tabHeaderView;    tabHeaderView.backgroundColor = [UIColor orangeColor];}-(void)setTableViewFooterView{    UIView * tableFooterView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, 80)];    _tableView.tableFooterView = tableFooterView;    tableFooterView.backgroundColor = [UIColor orangeColor];}

---

设置每组的headerView与footerView

- (void)viewDidLoad {    [super viewDidLoad];    //创建tableView    [self setTableView];    //分别设置tableView的头尾view    [self setTableViewHeaderView];    [self setTableViewFooterView];}-(void)setTableView{    UITableView * tableView = [[UITableView alloc] initWithFrame:kScreenB];    _tableView = tableView;    [self.view addSubview:tableView];    tableView.delegate = self;    tableView.dataSource = self;    [tableView registerClass:[HomeTableViewCell class] forCellReuseIdentifier:@"homecell"];    tableView.rowHeight = 200;}#pragma mark - 组头组尾-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{    UIView * secHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, 30)];    secHeaderView.backgroundColor = [UIColor blueColor];    return secHeaderView;}//组头高度为30,可以放置分类按钮-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{    return 30;}//组尾最小0.1(不显示效果)-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{    return 0.1;}

自定义cell

#pragma mark - dataSource-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{    HomeTableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"homecell" forIndexPath:indexPath];#pragma mark - collectionView中tableView的cell的点击回调事件    [cell setDidSelectCell:^{        NSLog(@"选中collectionView中的cell");    }];    return cell;}

在cell初始化时给将cell的contentView中放入collectionView,每个collectionView的cell又是一个tableView以此来展示数据.

1. 从写cell构造方法

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {        //init code ...        //创建collectionView        [self setFLowlayout];        [self setCollectionView];    }    return self;}

1. 创建collectionView以及布局参数flowLayout

-(void)setFLowlayout{    UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc] init];    /**     @property (nonatomic) CGFloat minimumLineSpacing;     @property (nonatomic) CGFloat minimumInteritemSpacing;     @property (nonatomic) CGSize itemSize;     @property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:     @property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical     @property (nonatomic) CGSize headerReferenceSize;     @property (nonatomic) CGSize footerReferenceSize;     @property (nonatomic) UIEdgeInsets sectionInset;     */    flowLayout.minimumLineSpacing = 0;    flowLayout.minimumInteritemSpacing = 0;    flowLayout.itemSize = CGSizeMake(kScreenW, 200);    flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;    _flowLayout = flowLayout;}-(void)setCollectionView{    UICollectionView * collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, 200) collectionViewLayout:_flowLayout];    [self.contentView addSubview:collectionView];    collectionView.pagingEnabled = YES;    collectionView.bounces = NO;    collectionView.delegate = self;    collectionView.dataSource = self;    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"collclass"];}

---

实现collectionView的数据源方法

#pragma mark - collectionView dataSource//每一个collectionViewCell又是一个tableView,创建并实现数据源以及代理方法---选中cell代理方法- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collclass" forIndexPath:indexPath];    UITableView * tableView = [[UITableView alloc] initWithFrame:cell.contentView.bounds];    [tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"tabCell"];    [cell.contentView addSubview:tableView];    tableView.delegate = self;    tableView.dataSource = self;    return cell;}-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    return 1;}//相当于蓝色view分类按钮个数-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 3;}

---

声明属性当点击collectionView中的tableView的cell的时候回调给控制器把点击事件

//属性声明#import <UIKit/UIKit.h>@interface HomeTableViewCell : UITableViewCell/** 点击collectionView中tableView的cell点击回调 */@property(nonatomic,copy) void(^didSelectCell)();@end

• 在.m中调用

#pragma mark - tableView delegate-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{    if (self.didSelectCell) {        self.didSelectCell();    }}

• 控制器中实现

#pragma mark - dataSource-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{    HomeTableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"homecell" forIndexPath:indexPath];#pragma mark - collectionView中tableView的cell的点击回调事件    [cell setDidSelectCell:^{        NSLog(@"选中collectionView中的cell");    }];    return cell;}

克隆地址: https://code.csdn.net/alex_birdlion/hb_sideslip.git
项目地址: https://code.csdn.net/alex_birdlion/hb_sideslip/tree/master