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

2020-01-18 16:43:37王冬梅

.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);
  }
}

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