ios实现列表与网格两种视图的相互切换（ios实现列表与网格两种视图的相互切换）

下图为京东商城的截图

很多人看到这个，第一眼想到的是用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); } }