下图为京东商城的截图
很多人看到这个，第一眼想到的是用tableview和collectionview来做切换，笔者刚开始也是认为这么做，后来发现还有一个非常的简单方法，就可以实现这个功能。
实现代码
1、首先创建一个collectionview。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
- (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;} |
然后去京东商城抓取json数据，再去解析数据装入模型，objectwithdictionary:是将字典转化为模型，这个工具是我用 runtime 写的，一行代码解析数据。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
- (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]]; }} |
再去自定义collectionviewcell，给cell添加一个属性isgrid，用来判断是列表还是格子视图。
.h文件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
#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;@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]; _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 - 60); _titlelabel.frame = cgrectmake(5, self.bounds.size.width - 45, screenwidth/2, 20); _pricelabel.frame = cgrectmake(5, self.bounds.size.width - 20, screenwidth/2, 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 - 20);; _pricelabel.frame = cgrectmake(self.bounds.size.height + 10, self.bounds.size.height - 30, screenwidth/2, 20);; }}- (void)setmodel:(gridlistmodel *)model{ _model = model; [_imagev sd_setimagewithurl:[nsurl urlwithstring:model.imageurl]]; _titlelabel.text = model.wname; _pricelabel.text = [nsstring stringwithformat:@"￥%.2f",model.jdprice];}@end |
再添加一个切换视图的按钮，按钮的点击事件如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#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]; }} |
最后还要设置一下切换时的collectionview的itemsize。
|
1
2
3
4
5
6
7
8
|
- (cgsize)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout *)collectionviewlayout sizeforitematindexpath:(nsindexpath *)indexpath{ if (_isgrid) { return cgsizemake((screenwidth - 6) / 2, (screenwidth - 6) / 2 + 40); } else { return cgsizemake(screenwidth - 4, (screenwidth - 6) / 4 + 20); }} |
这样子就大体实现了列表视图和网格视图的相互切换，是不是很简单。
总结
以上就是这篇文章的全部内容了，可能由于笔者水平有限，文中如果有错误的地方，还望大家能够指出。或者有更好的方法和建议，我们也可以一起交流。希望这篇文章的内容对大家能有所帮助。
