说起电商，那就要从前几年开始风行的O2O行业说起，然后呢...然后呢。。。就没有然后了，为啥嘞，卖商品的人太多，人们那个啥有选择恐惧症啊，你口碑不好，拜拜了您呢，咔嚓，倒闭了。

仔细看看AppStore上的程序就知道了，搜索下电商服务，有近乎一般的僵尸应用。都有一个特点，下载了，打不开，注册不了，没商品... 好久没说话，扯得有点远... 言归正传，本文主要说下纵横切换的商品列表页。

D013D4FF-C4C8-459A-AE09-61F0AAFF234D.png

先说下常规的处理方案 1.使用tableview+collectionview 实例化两个view，使用按钮点击方式进行切换， 好处：耦合性低，可以随意创建需要的cell类型 坏处：实在太占空间了，当你切换的时候还必须让另外一个列表手动选择到指定位置，否则就会出现 我翻到下一页了 怎么点了切换跑到首页去了 2. 使用一个collectionview colectionview具有的特性，可以定制item的大小。 好处：一个控件，不存在耦合性问题。 坏处，cell定制的时候需要配置，否则就会出现cell的元素位置错位。

来整个实现过程吧

在storybord中创建一个导航控制器，设置viewcontroller为rootviewcontroller 在viewcontroller中创建一个button 置于导航栏之上。 使用了第三方库 sdwebimage 各位可以使用pod直接安装

先创建我们需要的model.h文件#import 
    
     @interface GridListModel : NSObject@property (nonatomic, strong) NSString *imageurl;@property (nonatomic, strong) NSString *wname;@property (nonatomic, assign) float jdPrice;@property (nonatomic, assign) int totalCount;@end商品cell .h文件#import 
     
      #define kCellIdentifier_CollectionViewCell @"GridListCollectionViewCell"@class GridListModel;@interface GridListCollectionViewCell : UICollectionViewCell/** 0：列表视图，1：格子视图 */@property (nonatomic, assign) BOOL isGrid;@property (nonatomic, strong) GridListModel *model;@end.m文件#import "GridListCollectionViewCell.h"#import "GridListModel.h"#import "UIImageView+WebCache.h"#define ScreenWidth ([UIScreen mainScreen].bounds.size.width)@interface GridListCollectionViewCell ()@property (nonatomic, strong) UIImageView *imageV;@property (nonatomic, strong) UILabel *titleLabel;@property (nonatomic, strong) UILabel *priceLabel;@property (nonatomic, strong) UILabel *haoping;@end@implementation GridListCollectionViewCell- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        [self configureUI];    }    return self;}- (void)configureUI{    _imageV = [[UIImageView alloc] initWithFrame:CGRectZero];    [self.contentView addSubview:_imageV];    _titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];    _titleLabel.numberOfLines = 0;    _titleLabel.font = [UIFont boldSystemFontOfSize:14];    [self.contentView addSubview:_titleLabel];    _haoping = [[UILabel alloc] initWithFrame:CGRectZero];    _haoping.textColor = [UIColor redColor];    _haoping.font = [UIFont systemFontOfSize:16];    [self.contentView addSubview:_haoping];    _priceLabel = [[UILabel alloc] initWithFrame:CGRectZero];    _priceLabel.textColor = [UIColor redColor];    _priceLabel.font = [UIFont systemFontOfSize:16];    [self.contentView addSubview:_priceLabel];}- (void)setIsGrid:(BOOL)isGrid{    _isGrid = isGrid;    if (isGrid) {        _imageV.frame = CGRectMake(5, 5, self.bounds.size.width - 60, self.bounds.size.width - 80);        _titleLabel.frame = CGRectMake(5, self.bounds.size.width - 80, ScreenWidth/2-20, 40);        _haoping.frame = CGRectMake(5, self.bounds.size.width - 45, ScreenWidth/2-10, 20);        _priceLabel.frame = CGRectMake(5, self.bounds.size.width-20 , ScreenWidth/2-10, 20);    } else {        _imageV.frame = CGRectMake(5, 5, self.bounds.size.height - 10, self.bounds.size.height - 10);        _titleLabel.frame = CGRectMake(self.bounds.size.height + 10, 0, ScreenWidth/2, self.bounds.size.height/3);        _haoping.frame = CGRectMake(self.bounds.size.height + 10, self.bounds.size.height/3+10, ScreenWidth/2-30, self.bounds.size.height/6);        _priceLabel.frame = CGRectMake(self.bounds.size.height + 10, self.bounds.size.height/3+10+self.bounds.size.height/6+10, ScreenWidth/2, self.bounds.size.height-(self.bounds.size.height/3+10+self.bounds.size.height/6+10));    }}- (void)setModel:(GridListModel *)model{    _model = model;    [_imageV sd_setImageWithURL:[NSURL URLWithString:model.imageurl]];    _titleLabel.text = model.wname;    _haoping.text = [NSString stringWithFormat:@"?%d",model.totalCount];    _priceLabel.text = [NSString stringWithFormat:@"￥%.2f",model.jdPrice];}viewcontroller的.m实现#import "ViewController.h"#import "GridListCollectionViewCell.h"#import "GridListModel.h"#import "NSObject+Property.m”//使用了一个类别  这是字典转模型的 #define ScreenWidth ([UIScreen mainScreen].bounds.size.width)@interface ViewController () 
      
       @property (nonatomic, strong) UICollectionView *collectionView;@property (nonatomic, strong) NSMutableArray *dataSource;@property (weak, nonatomic) IBOutlet UIButton *swithBtn;@end@implementation ViewController{    BOOL _isGrid;  //切换的关键  定义的cell类型}#pragma mark - Getters- (NSMutableArray *)dataSource{    if (!_dataSource) {        _dataSource = [NSMutableArray array];    }    return _dataSource;}- (UICollectionView *)collectionView{    if (!_collectionView)    {        UICollectionViewFlowLayout *flowlayout = [[UICollectionViewFlowLayout alloc] init];        //设置滚动方向        [flowlayout setScrollDirection:UICollectionViewScrollDirectionVertical];        //左右间距        flowlayout.minimumInteritemSpacing = 2;        //上下间距        flowlayout.minimumLineSpacing = 2;        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(2 , 2 , self.view.bounds.size.width - 4, self.view.bounds.size.height - 4) collectionViewLayout:flowlayout];        _collectionView.delegate = self;        _collectionView.dataSource = self;        _collectionView.showsVerticalScrollIndicator = NO;        _collectionView.showsHorizontalScrollIndicator = NO;        [_collectionView setBackgroundColor:[UIColor clearColor]];        //注册cell        [_collectionView registerClass:[GridListCollectionViewCell class] forCellWithReuseIdentifier:kCellIdentifier_CollectionViewCell];    }    return _collectionView;}- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    // 默认列表视图    _isGrid = NO;    NSString *path = [[NSBundle mainBundle] pathForResource:@"product" ofType:@"json"];    NSData *data = [NSData dataWithContentsOfFile:path];    NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];    [self.view addSubview:self.collectionView];    NSArray *products = dict[@"wareInfo"];    for (id obj in products) {        [self.dataSource addObject:[GridListModel objectWithDictionary:obj]];    }}- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return self.dataSource.count;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    GridListCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCellIdentifier_CollectionViewCell forIndexPath:indexPath];    cell.isGrid = _isGrid;    cell.model = self.dataSource[indexPath.row];    return cell;}- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{    if (_isGrid) {        return CGSizeMake((ScreenWidth - 6) / 2, (ScreenWidth - 6) / 2);    } else {        return CGSizeMake(ScreenWidth - 4, (ScreenWidth - 6) / 2);    }}#pragma mark - Action- (IBAction)onBtnClick:(id)sender{    _isGrid = !_isGrid;    [self.collectionView reloadData];    if (_isGrid) {        [self.swithBtn setImage:[UIImage imageNamed:@"product_list_grid_btn"] forState:0];    } else {        [self.swithBtn setImage:[UIImage imageNamed:@"product_list_list_btn"] forState:0];    }}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end类别使用的是别的小伙伴的，不分享了 等下将代码传到github上。
      
     
    

现在呢，你应该明白怎么创建可以切换的列表了吧 ，

创建一个collectionview 两种类型的item 配置的时候根据状态的不同进行匹配不同的item 当然还需要你就layout的size进行重新配置。 现在你应该学会了吧。