厨房玻璃推拉门,抚宁房屋出租,小小彩虹岛
下图为京东商城的截图
很多人看到这个，第一眼想到的是用tableview和collectionview来做切换，笔者刚开始也是认为这么做，后来发现还有一个非常的简单方法，就可以实现这个功能。
实现代码
1、首先创建一个collectionview。
我要评论
- (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 写的，一行代码解析数据。
- (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文件：
#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;
@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
再添加一个切换视图的按钮，按钮的点击事件如下：
#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。
- (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);
}
}
这样子就大体实现了列表视图和网格视图的相互切换，是不是很简单。
总结
以上就是这篇文章的全部内容了，可能由于笔者水平有限，文中如果有错误的地方，还望大家能够指出。或者有更好的方法和建议，我们也可以一起交流。希望这篇文章的内容对大家能有所帮助。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论