下图为京东商城的截图
很多人看到这个，第一眼想到的是用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);
}
}
|
这样子就大体实现了列表视图和网格视图的相互切换，是不是很简单。
总结
以上就是这篇文章的全部内容了，可能由于笔者水平有限，文中如果有错误的地方，还望大家能够指出。或者有更好的方法和建议，我们也可以一起交流。希望这篇文章的内容对大家能有所帮助。