仿寫天貓?zhí)詫氋徫镘?/h2>

最近業(yè)務(wù)上需要完成一個購物車，其頁面的UI和天貓、淘寶類似。

GitHub傳送門

包含以下內(nèi)容：

• 已選購商品；
• 推薦商品；
• 廣告

下面是天貓的購物車頁面，上面半部分是一個cell（已選購商品），下面半部分是兩個cell（推薦商品）并列。

image.png

---

可以用UICollectionView和UITableView兩種方式實現(xiàn)。

---

一、UICollectionView實現(xiàn)

用UICollectionView實現(xiàn)，主要是需要自定義Layout和手動計算每個Cell、SupplementaryView的Frame。

1.UICollectionViewFlowLayout

1)自定義一個ShoppingCartLayout（繼承于UICollectionViewFlowLayout），在ShoppingCartLayout中主要關(guān)注五個方法：

1. 設(shè)置CollectionView的contenSize

- (CGSize)collectionViewContentSize;

2. return YES ：允許CollectionView Bounds發(fā)生變化時，重新進行布局。

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

3. 返回值是一個數(shù)組（數(shù)組里面存放著rect范圍內(nèi)所有元素的布局屬性）
 返回值決定了rect范圍內(nèi)所有元素的排布（frame）
 
 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

 4. 返回SectionHeader或者SectionFooter對應(yīng)的UICollectionViewLayoutAttributes

 - (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath

 5. 返回每個Cell對應(yīng)的UICollectionViewLayoutAttributes

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

2)上述五個方法中的1，4，5需要手動計算Size、Frame，為此我們給ShoppingCartLayout添加一個代理方法：ShoppingCartLayoutDataSource并在CollectionViewCotroller中實現(xiàn)該協(xié)議的三個方法。

@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)實現(xiàn)計算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)實現(xiàn)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) 結(jié)果展示

ShoppingCart collectionView

二、UITablviewView實現(xiàn)

最開始以為無法用UITableView實現(xiàn)，后來看到Tmall的購物車的cell可以左滑刪除，就判定Tmall時用UITableView實現(xiàn)的，所以后用Reveal看了Tmall的購物車的View結(jié)構(gòu)，如下：

TmallCart.png

天貓購物車頁面UI結(jié)構(gòu)圖

TmallCartViews.png

1. 購物車列表：AliCartTabelView;
2. 商鋪View：  TMCartShopCell;
3. 已選商品View：TMCartContextCell;
4. 還有一些分割線View：AliCartItemSeparateCell, AliCartFlexibleCell
5. 推薦商品的view：看了View的結(jié)構(gòu)圖可以在一個UITableViewCell中放置兩個推薦商品View

(看了結(jié)構(gòu)，對TangramDoubleColumnLayout這個“View”不是很懂，那位路過的大神懂的話，指導(dǎo)一下)

=============================================

1.數(shù)據(jù)處理

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) 結(jié)果展示

ShoppingCart TableView

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。