最近业务上需要完成一个购物车，其页面的UI和天猫、淘宝类似。
包含以下内容：
- 已选购商品；
- 推荐商品；
- 广告
下面是天猫的购物车页面，上面半部分是一个cell（已选购商品），下面半部分是两个cell（推荐商品）并列。
image.png
可以用UICollectionView和UITableView两种方式实现。
一、UICollectionView实现
用UICollectionView实现，主要是需要自定义Layout和手动计算每个Cell、SupplementaryView的Frame。
1.UICollectionViewFlowLayout
1)自定义一个ShoppingCartLayout（继承于UICollectionViewFlowLayout），在ShoppingCartLayout中主要关注五个方法：
1. 设置CollectionView的contenSize
- (CGSize)collectionViewContentSize;
2. return YES ：允许CollectionView Bounds发生变化时，重新进行布局。
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
3. 返回值是一个数组（数组里面存放着rect范围内所有元素的布局属性）
返回值决定了rect范围内所有元素的排布（frame）
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
4. 返回SectionHeader或者SectionFooter对应的UICollectionViewLayoutAttributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath
5. 返回每个Cell对应的UICollectionViewLayoutAttributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
2)上述五个方法中的1，4，5需要手动计算Size、Frame，为此我们给ShoppingCartLayout添加一个代理方法：ShoppingCartLayoutDataSource并在CollectionViewCotroller中实现该协议的三个方法。
@protocol ShoppingCartLayoutDataSource <NSObject>
/**
计算每个item的CGRect.
@param layout ZShoppingCartLayout.
@param indexPath The index path of the item.
@return current item's rect.
*/
- (CGRect)shoppingCartLayout:(ShoppingCartLayout *)layout frameForItemAtIndexPath:(NSIndexPath *)indexPath;
/**
计算Header或者Footer的CGRect
@param layout ZShoppingCartLayout.
@param elementKind a string that identifies the type of the supplementary view.
@param indexPath The index path of the supplementary view.
@return current supplementary view's rect.
*/
- (CGRect)shoppingCartLayout:(ShoppingCartLayout *)layout frameForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
/**
计算CollectionView的conent size.
@param layout ZShoppingCartLayout
@return the size of collection view.
*/
- (CGSize)collectionViewContentSize:(ShoppingCartLayout *)layout;
3)实现计算Collection的ContentSize
- (CGSize)collectionViewContentSize:(ShoppingCartLayout *)layout {
if (self.dataArray.count > 2) {
return CGSizeZero;
}
NSArray *commodityArray = self.dataArray.firstObject;
NSArray *recommendArray = self.dataArray.lastObject;
NSUInteger commodityCount = commodityArray.count;
NSUInteger recommendCount = recommendArray.count;
CGFloat baseY = 0;
CGFloat height = 0;
baseY = kHeaderHeight + layout.commodityLineSpacing;
//如果购物车为空，section0只有一个值
CGFloat commoityHeight = kCommodityHeight;
commodityCount = commodityCount;
//section0的全部高度
CGFloat section1Height = (commodityCount * (commoityHeight + layout.commodityLineSpacing)) + layout.commodityLineSpacing + layout.recommendLineSpacing;
//section1的全部高度
CGFloat section2Height = 0;
if (recommendCount) {
section2Height = kHeaderHeight + layout.recommendLineSpacing + (ceilf(recommendCount/self.cellNumerPerRow) * (kRecommendHeight + layout.recommendLineSpacing));
}
height = baseY + section1Height + section2Height;
CGSize size = CGSizeMake(KScreenWidth, height);
return size;
}
4)实现sectionHeader\sectionfooter frame的计算
//特别注意在计算section ==1 的header时，其origin.y 需要加上section0的MaxY
- (CGRect)shoppingCartLayout:(ShoppingCartLayout *)layout frameForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {
if (self.dataArray.count > 2) {
return CGRectZero;
}
NSArray *commodityArray = self.dataArray.firstObject;
NSArray *recommendArray = self.dataArray.lastObject;
NSUInteger commodityCount = commodityArray.count;
NSUInteger recommendCount = recommendArray.count;
CGFloat x = 0;
CGFloat y = 0;
CGFloat width = kHeaderWidth;
CGFloat height = kHeaderHeight;
if ([elementKind isEqualToString:UICollectionElementKindSectionHeader]) {
if (indexPath.section == 0) {
height = kHeaderHeight;
} else {
if (!recommendCount) {
return CGRectZero;
}
CGFloat commoityHeight = kCommodityHeight;
commodityCount = commodityCount;
y = kHeaderHeight + commodityCount * (commoityHeight + layout.commodityLineSpacing) + layout.commodityLineSpacing + layout.recommendLineSpacing;
}
}
return CGRectMake(x, y, width, height);
}
5)计算每个cell的frame
- (CGRect)shoppingCartLayout:(ShoppingCartLayout *)layout frameForItemAtIndexPath:(NSIndexPath *)indexPath {
if (self.dataArray.count > 2) {
return CGRectZero;
}
NSArray *commodityArray = self.dataArray.firstObject;
NSArray *recommendArray = self.dataArray.lastObject;
NSUInteger commodityCount = commodityArray.count;
NSUInteger recommendCount = recommendArray.count;
CGFloat marginLeft = (KScreenWidth - kRecommendWidth * self.cellNumerPerRow) / (self.cellNumerPerRow + 1);
CGFloat commoityHeight = kCommodityHeight;
commodityCount = commodityCount;
CGFloat x = marginLeft;
CGFloat y = 0;
CGFloat width = 0;
CGFloat height = 0;
if (indexPath.section == 0) {
width = kCommodityWidth;
height = commoityHeight;
x = 0;
y = kHeaderHeight + layout.commodityLineSpacing + indexPath.row * commoityHeight + indexPath.row * layout.commodityLineSpacing;
} else {
width = kRecommendWidth;
height = kRecommendHeight;
x = indexPath.row % (NSInteger)self.cellNumerPerRow * kRecommendWidth + (indexPath.row % (NSInteger)self.cellNumerPerRow + 1) * marginLeft;
CGFloat baseY = 0;
baseY = kHeaderHeight + layout.commodityLineSpacing + commodityCount * (commoityHeight + layout.commodityLineSpacing) + layout.recommendLineSpacing + kHeaderHeight + layout.recommendLineSpacing;
y = baseY + floor(indexPath.row / self.cellNumerPerRow) * kRecommendHeight + (floor(indexPath.row / self.cellNumerPerRow)) *layout.recommendLineSpacing;
}
return CGRectMake(x, y, width, height);
}
6) 结果展示
ShoppingCart collectionView
二、UITablviewView实现
最开始以为无法用UITableView实现，后来看到Tmall的购物车的cell可以左滑删除，就判定Tmall时用UITableView实现的，所以后用Reveal看了Tmall的购物车的View结构，如下：
TmallCart.png
天猫购物车页面UI结构图
TmallCartViews.png
1. 购物车列表：AliCartTabelView;
2. 商铺View： TMCartShopCell;
3. 已选商品View：TMCartContextCell;
4. 还有一些分割线View：AliCartItemSeparateCell, AliCartFlexibleCell
5. 推荐商品的view：看了View的结构图可以在一个UITableViewCell中放置两个推荐商品View
(看了结构，对TangramDoubleColumnLayout这个“View”不是很懂，那位路过的大神懂的话，指导一下)
=============================================
1.数据处理
1)已选商品和商铺
我提供的Demo中做了简化处理，只包含已选商品；
2)推荐商品
self.cellNumerPerRow = 3; //每行三个推荐
NSMutableArray *finalRecommendArray = [NSMutableArray array];
NSMutableArray *mutaArray = [NSMutableArray arrayWithCapacity:3];
for (NSInteger idx = 0; idx < recommendArray.count; idx++) {
[mutaArray addObject:recommendArray[idx]];
if (mutaArray.count == self.cellNumerPerRow ||
idx == recommendArray.count - 1) {
[finalRecommendArray addObject:[mutaArray copy]];
[mutaArray removeAllObjects];
}
}
[self.dataArray addObject:commodityArray];
[self.dataArray addObject:finalRecommendArray];
3) 结果展示
ShoppingCart TableView
