说起电商,那就要从前几年开始风行的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 <Foundation/Foundation.h>
@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 <UIKit/UIKit.h>
#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 () <UICollectionViewDataSource, UICollectionViewDelegate>
@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进行重新配置。
现在你应该学会了吧。
https://github.com/qinmi352387597/-collectionView-.git