神刀安全网

【iOS干货】:列表和网格视图的相互切换

前言

在很多电商 app 中,都有列表视图和网格视图的相互切换。例如京东和淘宝。
先来看下效果图,下图为京东商城的截图。

【iOS干货】:列表和网格视图的相互切换
列表视图

【iOS干货】:列表和网格视图的相互切换
网格视图

很多人看到这个,第一眼想到的是用TableViewCollectionView来做切换,笔者刚开始也是认为这么做,后来发现还有一个非常的简单方法,就可以实现这个功能。

正文

  • 首先创建一个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 写的,一行代码解析数据,具体使用方法可以参考我简书上另一篇文章【Objective-C中的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];     } }
  • 最后还要设置一下切换时的CollectionViewItemSize
- (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);     } }

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

【iOS干货】:列表和网格视图的相互切换
Demo运行的效果图.gif

最后

由于笔者水平有限,文中如果有错误的地方,还望大神指出。或者有更好的方法和建议,我们可以一起交流。
附上本文的 demo 下载链接【GitHub】,配合 demo 一起看文章,效果会更佳。
如果你看完后觉得对你有所帮助,还望在 GitHub 上点个 star。赠人玫瑰,手有余香。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 【iOS干货】:列表和网格视图的相互切换

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址