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

下图为京东商城的截图

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

这样子就大体实现了列表视图和网格视图的相互切换，是不是很简单。

总结

以上就是这篇文章的全部内容了，可能由于笔者水平有限，文中如果有错误的地方，还望大家能够指出。或者有更好的方法和建议，我们也可以一起交流。希望这篇文章的内容对大家能有所帮助。