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字段来&#8;

进行开或者关，然后在加载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;
}

第二：例如多选&#28;删除操作

这里需要注意的是，当删除批量的时候，一定不能再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.&#8;图片的一个组件（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，抛砖引玉，各位觉得不错的可以下载研究下，觉

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

时间： 2024-10-21 10:12:20

iOS高仿淘宝购物车,功能模块应有尽有的相关文章

高仿淘宝客户端

高仿淘宝客户端 仿淘宝安卓客户端的demo源码,主要实现了:商品的基本展示.宝贝详情,图片展示的放大缩小功能.界面之间切换的动画.购物车多项删除.弹窗的动画效果.首页广告的轮播效果.获得本机具有传感器的列表.listView的上拉刷新,下拉加载功能.二维码扫描.刮刮乐等功能和效果. 下载地址:http://www.devstore.cn/code/info/925.html 运行截图:    

android版高仿淘宝客户端源码V2.3

android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏览),下订单,进行付款等流程,该应用一一实现了,同时还可以远程读取图片功能,和实时监控网络状态等操作,大家如果有什么不同的意见可以留下,我们会定时来查看. 原文地址:http://www.cnblogs.com/androidioscom/p/3613035.html [1].[代码] [Java]

高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页.使用ViewDragHelper,滑动比较流畅. scrollView滑动到底部的时候,再行向上拖动时,添加了一些阻力.本项目来源:https://github.com/xmuSistone/android-vertical-slide-view主要代码如下:首先先看一下布局:  <com.stone.verticalslide.DragLayout        a

iOS开发——仿淘宝添加到购物车的动画效果实现

这篇博文实在不知道该起什么名字才能概况我的意思...挫语文水平 类似于淘宝一样,我们在写一些购物.订餐之类的app的时候,在用户选择购买或者加入购物车时可以添加一个商品飞到购物车中的动画效果,如下图所示: 实现这个效果还是不算难的,但涉及的问题比较多,还是挺有学习价值的.主要面对的问题有以下几点 1.cell中有button,如何获得该button,即如何知道用户点击的是哪一个button. 2.坐标系的转换,这里频繁使用坐标系转换,主要原因是这里需要涉及三个视图--cell.tableView

Android仿淘宝购物车demo

夏的热情渐渐退去,秋如期而至,丰收的季节,小编继续着实习之路,走着走着,就走到了购物车,逛过淘宝或者是京东的小伙伴都知道购物车里面的宝贝可不止一件,对于爱购物的姑娘来说,购物车里面的商品恐怕是爆满,添加不进去了,以前逛淘宝的时候,小编没有想过要怎么样实现购物车,就知道在哪儿一个劲儿的逛,但是现在不一样了,小编做为一个开发者,想的就是该如何实现,捣鼓了两天的时间,用listview来实现,已经有模有样了,现在小编就来简单的总结一下实现购物车的心路历程,帮助有需要的小伙伴,欢迎小伙伴们留言交流. 首

jquery仿淘宝购物车页面商品结算（附源码）

1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0

android 仿淘宝京东购物车 ListView嵌套CheckBox

MyActivity===========================代码如下 package com.example.ListViewBoxDemo; import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.view.View;import android.widget.CheckBox;import android.widget.CompoundB

转：：iOS 仿淘宝,上拉进入详情页面

今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 1 // 2 // ViewController.m 3 // 仿淘宝,上拉进入详情 4 // 5 // Created by Amydom on 16/11/22. 6 // Copyright ? 2016年 Amydom. All rights reserved. 7 // 8 9 #import "ViewCont

Vue实现仿淘宝商品详情属性选择的功能

Vue实现仿淘宝商品详情属性选择的功能 2018年09月07日 17:13:35 yx_cos 阅读数:278 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrAndValuees: [   {   'attrId': 1,   'attrName': '味道',   'valuees': [   {   'attrId': 1,   'value': '橘子味'   },   {   'a