iOS列表和網格視圖的相互切換
前言
在很多電商 app 中，都有列表視圖和網格視圖的相互切換。例如京東和淘寶。
先來看下效果圖，下圖為京東商城的截圖。
列表視圖
網格視圖
很多人看到這個，第一眼想到的是用 TableView 和 CollectionView 來做切換，筆者剛開始也是認為這么做，后來發現還有一個非常的簡單方法，就可以實現這個功能。
正文
-
首先創建一個 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]];
}
}</code></pre>
-
再去自定義 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</code></pre>
.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</code></pre>
-
再添加一個切換視圖的按鈕，按鈕的點擊事件如下：
#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];
}
}</code></pre>
- 最后還要設置一下切換時的 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);
}
}</code></pre>
這樣子就大體實現了列表視圖和網格視圖的相互切換，是不是炒雞簡單。
Demo運行的效果圖.gif
來自：http://www.jianshu.com/p/131de575ef9e