The switch between IOS implementation list and grid view _ios

The picture below is the screenshot of Jingdong Mall

Many people see this, the first thought is to use TableView and CollectionView to do the switch, the author was just beginning to think so, and later found that there is a very simple method, you can achieve this function.

Implementation code

1, first create a collectionview.

Then go to Jingdong Mall crawl JSON data, and then to parse the data loading model, objectWithDictionary: is the dictionary into a model, this tool is I Runtime write, a line of code to parse the data.

-(void) viewdidload 
{
  [super viewdidload];
  Do no additional setup after loading the view, typically from a nib.

  Default List view
  _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. products) {
    [Self.datasource Addobject:[gridlistmodel Objectwithdictionary:obj]];
  }

To customize CollectionViewCell , cell add an attribute to determine whether isGrid it is a list or a grid view.

. h Files:

#import <UIKit/UIKit.h>

#define Kcellidentifier_collectionviewcell @ "Gridlistcollectionviewcell"

@ Class Gridlistmodel;

@interface Gridlistcollectionviewcell:uicollectionviewcell

/**
 0: List view, 1: Grid view
/@property ( Nonatomic, assign) BOOL Isgrid;

@property (nonatomic, strong) Gridlistmodel *model;

@end

. m file

#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 INITWITHFR
  Ame: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 + 0, SCREENWIDTH/2, self.bounds.size.height-20);
  _pricelabel.frame = CGRectMake (Self.bounds.size.height +, 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 

Add a button to toggle the view, and the Click event for the button is as follows:

#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];
  }

Finally, you have to set the switching CollectionView time ItemSize .

-(Cgsize) CollectionView: (Uicollectionview *) CollectionView layout: (uicollectionviewlayout *) collectionviewlayout Sizeforitematindexpath: (Nsindexpath *) Indexpath
{
  if (_isgrid) {return
    Cgsizemake (ScreenWidth-6)/ 2, (ScreenWidth-6)/2 +);
  } else {return
    cgsizemake (ScreenWidth-4, (ScreenWidth-6)/4 +);
  }
}

This is the overall implementation of the list view and grid view of the switch, is not very simple.

Summarize

The above is the entire content of this article, perhaps due to the author's limited level, if there are errors in the text, I hope you can point out. Or have better methods and suggestions, we can also communicate together. I hope the content of this article will be helpful to everyone.