iOS高仿淘宝购物车,功能模块应有尽有

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS高仿淘宝购物车,功能模块应有尽有相关的知识,希望对你有一定的参考价值。

        刚做完一个淘宝的购物车,按着淘宝做的,换了个产品经理,人家喜欢JD的购物车,一句话,咱换个风格,好心

酸有没有,天天刷存在感,只有我们苦逼了,那么既然需求来了,就要按着大爷的要求改了,为了纪念下,咱写个

Demo给大家分享下。

技术分享 技术分享 技术分享

我擦,我一看代码,我还是用AutoLayout做的,主界面代码都能快接近800了,全加起来想想有点多啊,这简直是用

生命在写Demo啊,该有的效果全有了,各位请看图


技术分享     技术分享


技术分享技术分享再来一组

技术分享


简单分析下功能

1.给UIKit控件增加Badge的扩展(这个扩展需要的去代码里面抠出来)

2.加入购物车的时候凹陷效果(这个效果我单独开了个博客分析的)---> 点击打开链接

3.购物车纯AutoLayout实现双层Cell高度自适应(这个有点叼,没用习惯的估计能看瞎)

4.购物车动态计算价格,多选或单选删除,编辑切换Cell,简单富文本等逻辑 (基础逻辑展示)

5.给购物车底部增加相关商品推荐 (主要是给TableFooterView加了CollectionView)

6.一个展示图片的组件 (JTSImageViewController)

7.为了不让看的人无聊,选了几个妹子

技术分享



简单的看下代码

1.进入购物车之前凹陷效果模拟添加购物车

- (void)show:(UITapGestureRecognizer *)tap
{
    if (!self.chooseVC){
        self.chooseVC = [[ChooseGoodsPropertyViewController alloc] init];
    }
    self.chooseVC.enterType = FirstEnterType;
    __weak typeof(self)weakSelf = self;
    self.chooseVC.block = ^{
        NSLog(@"点击回调去购物车");
        // 下面一定要移除,不然你的控制器结构就乱了,基本逻辑层级我们已经写在上面了,这个效果其实是addChildVC来的,最后的展示是在Window上的,一定要移除
        [weakSelf.chooseVC.view removeFromSuperview];
        [weakSelf.chooseVC removeFromParentViewController];
        weakSelf.chooseVC.view = nil;
        weakSelf.chooseVC = nil;
        MKJShoppingCartViewController *shop = [MKJShoppingCartViewController new];
        [weakSelf.navigationController pushViewController:shop animated:YES];
    };
    self.chooseVC.price = 256.0f;
    [self.navigationController presentSemiViewController:self.chooseVC withOptions:@{
                                                                                     KNSemiModalOptionKeys.pushParentBack    : @(YES),
                                                                                     KNSemiModalOptionKeys.animationDuration : @(0.6),
                                                                                     KNSemiModalOptionKeys.shadowOpacity     : @(0.3),
                                                                                     KNSemiModalOptionKeys.backgroundView : [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background_01"]]
                                                                                    }];
}


这种效果我已经单独写出来了,需要的朋友可以点击打开链接

需要注意到的是他的层级关系,那么如果你像我一样要Push到下个界面的时候,务必把你的控制器和控制器的上

View remove掉,最好直接把指针置nil,类似于上面的代码这样操作,不然你的界面就飞了


2.来看看我吊炸天的AutoLayout布局双层Cell

先看看树形结构

contentView

     NormalView(包含了正常状态下的控件)

     EditBackView(包含了编辑状态下的控件)

     chooseButton

     ProductImageView

需要看详细布局的可以去下载Demo,感觉这种自适应的东西有点难讲,我自己都懵逼了

技术分享

技术分享

这里面有20来个控件,全约束好了,再配合FD一句代码实现高度自适应而且能编辑非编

辑切换,这TM省了几百行代码有木有啊......爽啊

// 高度计算
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    BuyerInfo *buyer = self.buyerLists[indexPath.section];
    if (buyer.buyerIsEditing)
    {
        return 100;
    }
    else
    {
        CGFloat actualHeight = [tableView fd_heightForCellWithIdentifier:shoppongID cacheByIndexPath:indexPath configuration:^(ShoppingCartCell *cell) {
            
            [self configCell:cell indexPath:indexPath];
            
        }];
        return actualHeight >= 100 ? actualHeight : 100;
    }
}


再设置一套代理,那么这个Cell基本交互就解决了

@protocol ShoppingCartCellDelegate <NSObject>
// 点击单个商品选择按钮回调
- (void)productSelected:(ShoppingCartCell *)cell isSelected:(BOOL)choosed;
// 点击buyer选择按钮回调
- (void)buyerSelected:(NSInteger)sectionIndex;
// 点击buyer编辑回调按钮
- (void)buyerEditingSelected:(NSInteger)sectionIdx;
// 点击垃圾桶删除
- (void)productGarbageClick:(ShoppingCartCell *)cell;
// 点击编辑规格按钮下拉回调
- (void)clickEditingDetailInfo:(ShoppingCartCell *)cell;
// 商品的增加或者减少回调
- (void)plusOrMinusCount:(ShoppingCartCell *)cell tag:(NSInteger)tag;
// 点击图片回调到主页显示
- (void)clickProductIMG:(ShoppingCartCell *)cell;
@end

@interface ShoppingCartCell : UITableViewCell

@property (nonatomic,assign) id<ShoppingCartCellDelegate>delegate;


3.简单介绍下购物车里面的交互功能

这里功能的思路基本是一致的,我们给商品model和buyerModel分别添加BOOL字段来

进行开或者关,然后在加载cell的时候做进一步判断

第一:例如计算总价(只需要更改商品的BOOL字段)

#pragma mark - 计算选出商品的总价
- (CGFloat)countTotalPrice
{
    CGFloat totalPrice = 0.0;
    for (BuyerInfo *buyer in self.buyerLists) {
        if (buyer.buyerIsChoosed) {
            for (ProductInfo *product in buyer.prod_list) {
                totalPrice += product.order_price * product.count;
            }
        }else{
            for (ProductInfo *product in buyer.prod_list) {
                if (product.productIsChoosed) {
                    totalPrice += product.order_price * product.count;
                }
            }
        }
    }
    return totalPrice;
}



第二:例如多选删除操作

这里需要注意的是,当删除批量的时候,一定不能再for循环里面一个一个删除,我们需要用一个临时数组抱起来,然

后再统一删除,不然会越界崩掉

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
    // 单个删除
    if (alertView.tag == 101) {
        if (buttonIndex == 1)
        {
            NSIndexPath *indexpath = [self.tableView indexPathForCell:self.tempCellArray.firstObject];
            BuyerInfo *buyer = self.buyerLists[indexpath.section];
            ProductInfo *product = buyer.prod_list[indexpath.row];
            if (buyer.prod_list.count == 1) {
                [self.buyerLists removeObject:buyer];
            }
            else
            {
                [buyer.prod_list removeObject:product];
            }
            // 这里删除之后操作涉及到太多东西了,需要
            [self updateInfomation];
        }
    }
    else if (alertView.tag == 102) // 多个或者单个
    {
        if (buttonIndex == 1)
        {
            // 买手数组
            NSMutableArray *buyerTempArr = [[NSMutableArray alloc] init];
            for (BuyerInfo *buyer in self.buyerLists)
            {
                if (buyer.buyerIsChoosed)
                {
                    // 如果买手都被选择了,那么直接删除买手
                    [buyerTempArr addObject:buyer];
                }
                else
                {
                    // 商品数组
                    NSMutableArray *productTempArr = [[NSMutableArray alloc] init];
                    for (ProductInfo *product in buyer.prod_list)
                    {
                        if (product.productIsChoosed)
                        {
                            // 这里注意,批量删除商品别一次删除一个,需要放到一个容器里面一次性删除
                            [productTempArr addObject:product];
                        }
                    }
                    if (![[MKJRequestHelper shareRequestHelper] isEmptyArray:productTempArr])
                    {
                        [buyer.prod_list removeObjectsInArray:productTempArr];
                    }
                }
            }
            [self.buyerLists removeObjectsInArray:buyerTempArr];
            [self updateInfomation];
        }
    }
}


第三:就是要注意的事项,当你操作删除,选中,增加,减少的操作,都需要一并更新

价格 数量等UI

#pragma mark - 删除之后一些列更新操作
- (void)updateInfomation
{
    // 会影响到对应的买手选择
    for (BuyerInfo *buyer in self.buyerLists) {
        NSInteger count = 0;
        for (ProductInfo *product in buyer.prod_list) {
            if (product.productIsChoosed) {
                count ++;
            }
        }
        if (count == buyer.prod_list.count) {
            buyer.buyerIsChoosed = YES;
        }
    }
    // 再次影响到全部选择按钮
    self.allSelectedButton.selected = [self isAllProcductChoosed];
    
    // 总价选择
    self.totalPriceLabel.text = [NSString stringWithFormat:@"合计¥%.2f",[self countTotalPrice]];
    
    // 结算UI
    [self.accountButton setTitle:[NSString stringWithFormat:@"结算(%ld)",[self countTotalSelectedNumber]] forState:UIControlStateNormal];
    
    // 刷新数据
    [self.tableView reloadData];
    
    // 如果删除干净了
    if ([[MKJRequestHelper shareRequestHelper] isEmptyArray:self.buyerLists]) {
        [self clickAllEdit:self.rightButton];
        self.rightButton.enabled = NO;
    }
}



4.给底部FooterView增加一个CollectionView,来应对各种需要增加的需求

// 请求相关商品数据
    [[MKJRequestHelper shareRequestHelper] requestMoreRecommandInfo:^(id obj, NSError *err) {
       
        [weakSelf.relatedProducts removeAllObjects];
        weakSelf.relatedProducts = [[NSMutableArray alloc] initWithArray:(NSArray *)obj];
        // 刷新数据
        [weakSelf.collectionView reloadData];
        // 根据刷新的数据,来获取CollectionViewlayout对应布局contenSize的高度和宽度(我们需要高度)
        weakSelf.underFooterView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, weakSelf.collectionView.collectionViewLayout.collectionViewContentSize.height);
        // 现在再给FooterView进行UI赋值,避免出现不顺畅的显示
        weakSelf.tableView.tableFooterView = weakSelf.underFooterView;
    }];

5.图片的一个组件(JTSImageViewController)基本用法展示

#pragma mark - 点击图片展示Show
- (void)clickProductIMG:(ShoppingCartCell *)cell
{
    NSIndexPath *indexpath = [self.tableView indexPathForCell:cell];
    BuyerInfo *buyer = self.buyerLists[indexpath.section];
    ProductInfo *product = buyer.prod_list[indexpath.row];
    JTSImageInfo *imageInfo = [[JTSImageInfo alloc] init];
    NSString *imageURLStr = product.image;
    imageInfo.imageURL  = [NSURL URLWithString:imageURLStr];
    JTSImageViewController *imageViewer = [[JTSImageViewController alloc]
                                           initWithImageInfo:imageInfo
                                           mode:JTSImageViewControllerMode_Image
                                           backgroundStyle:JTSImageViewControllerBackgroundOption_Scaled];
    [imageViewer showFromViewController:self transition:JTSImageViewControllerTransition_FromOffscreen];
}

主要的代码就这么点,关键还是些逻辑的判断,最后检查下内存泄漏问题

- (void)dealloc

{

    NSLog(@"%s____dealloc",object_getClassName(self));

}

打印了就OK了


一个简单的Demo就这么写完了,项目中就需要和服务器交互了,这里是本地的数据,各

位觉得需要可以下载Demo看看


Demo地址:点击打开链接


其实写这个需求之前我也去网上搜索了很多相关的购物车Demo,简直不能看啊,处理很

简单,UI也很简单,根本满足不了我,最后还是自己写了一个那么详细的留作纪念,可

能还存在很多问题,毕竟只是个Deme,抛砖引玉,各位觉得不错的可以下载研究下,觉

得有帮到您的记得点个赞哦~~~~~~


技术分享






















































以上是关于iOS高仿淘宝购物车,功能模块应有尽有的主要内容,如果未能解决你的问题,请参考以下文章

iOS播放器Flutter高仿书旗小说卡片动画二维码扫码菜单弹窗效果等源码

iOS高仿城觅-感谢大神分享

浅谈android中仅仅使用一个TextView实现高仿京东,淘宝各种倒计时

浅谈android中只使用一个TextView实现高仿京东,淘宝各种倒计时

模拟淘宝登陆和购物车功能

iOS开发之功能模块--高仿Boss直聘的常用语的开发