iOS 实现一个类似电商购物车界面示例

iOS 实现一个类似电商购物车界面示例

先看界面效果图：

主要实现了商品的展示，并且可以对商品进行多选操作，以及改变商品的购买数量。与此同时，计算出，选中的总价格。

做此类型项目：要注意的：视图与数据要分离开来。视图的展现来源是数据模型层。所以我做的操作就是改变数据层的内容，在根据数据内容，去更新视图界面。

已下是具体实现思路与代码：

1. 实现步骤

  1. 在AppDelegate.m中包含ViewController.h头文件，创建ViewController对象（vc），接着创建一个UINavigationController对象(nVC)将vc设置为自己的根视图，最后设置self.window.rootViewController为nVC。
  2. 在ViewController.m中创建一个全局的可变数组，并往里面添加表格需要的数据字典对象。
  3. 创建一个GoodsInfoModel 类，继承于NSObject 类，用于做数据模型
  4. 创建一个MyCustomCell 类 ，继承于UITableViewCell，自定义单元格类
  5. 在MyCustomCell.m 类中，实现单元格的布局
  6. 在 ViewController.m 创建表格视图，并且创建表格尾部视图
  7. MyCustomCell 类中定义协议，实现代理，完成加、减的运算。
  8. 在 ViewController.m 实现全选运算。

2. 代码实现

2.1 完成界面的导航栏创建

在AppDelegate.m中包含ViewController.h头文件，创建ViewController对象（vc），接着创建一个UINavigationController对象(nVC)将vc设置为自己的根视图，最后设置self.window.rootViewController为nVC。

2.1.1 代码

在AppDelegate.m的 - (BOOL)application:(UIApplication
)application didFinishLaunchingWithOptions:(NSDictionary )launchOptions方法中实现以下代码（记得包含#import "ViewController.h"）：

//创建窗口

self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];

self.window.backgroundColor = [UIColor whiteColor];

//创建一个导航控制器，成为根视图

UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:[ViewController new]];

self.window.rootViewController = nav;

//显示窗口

[self.window makeKeyAndVisible];

在 ViewController.m 的 viewDidLoad 中去设置，导航栏标题

self.title = @"购物车";

//设置标题的属性样式等

[self.navigationController.navigationBar    setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor  blackColor],NSFontAttributeName:[UIFont systemFontOfSize:23.0f]}];

效果图：

2.2 创建一个模型类用于存放数据模型

创建一个GoodsInfoModel 类 ，继承于 NSObject

实现代码如下： GoodsInfoModel.h 中

@interface GoodsInfoModel : NSObject

@property(strong,nonatomic)NSString *imageName;//商品图片

@property(strong,nonatomic)NSString *goodsTitle;//商品标题

@property(strong,nonatomic)NSString *goodsPrice;//商品单价

@property(assign,nonatomic)BOOL selectState;//是否选中状态

@property(assign,nonatomic)int goodsNum;//商品个数

-(instancetype)initWithDict:(NSDictionary *)dict;

@end

GoodsInfoModel.m 中

-(instancetype)initWithDict:(NSDictionary *)dict

{

if (self = [super init])

{

self.imageName = dict[@"imageName"];

self.goodsTitle = dict[@"goodsTitle"];

self.goodsPrice = dict[@"goodsPrice"];

self.goodsNum = [dict[@"goodsNum"]intValue];

self.selectState = [dict[@"selectState"]boolValue];

}

return  self;

}

2.3 创建设置表格数据的数据

在ViewController.m中创建一个全局的可变数组，并往里面添加表格需要的数据字典对象。

2.3.1 代码

在ViewController.m的- (void)viewDidLoad中实现以下代码（先在ViewController.m中声明infoArr对象）。代码如下

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,MyCustomCellDelegate>

{

UITableView *_MyTableView;

float allPrice;

NSMutableArray *infoArr;

}

@property(strong,nonatomic)UIButton *allSelectBtn;

@property(strong,nonatomic)UILabel *allPriceLab;

@end

---------------------------------------------------------------

//初始化数据

allPrice = 0.0;

infoArr = [[NSMutableArray alloc]init];

/**

*  初始化一个数组，数组里面放字典。字典里面放的是单元格需要展示的数据

*/

for (int i = 0; i<7; i++)

{

NSMutableDictionary *infoDict = [[NSMutableDictionary alloc]init];

[infoDict setValue:@"img6.png" forKey:@"imageName"];

[infoDict setValue:@"这是商品标题" forKey:@"goodsTitle"];

[infoDict setValue:@"2000" forKey:@"goodsPrice"];

[infoDict setValue:[NSNumber numberWithBool:NO] forKey:@"selectState"];

[infoDict setValue:[NSNumber numberWithInt:1] forKey:@"goodsNum"];

//封装数据模型

GoodsInfoModel *goodsModel = [[GoodsInfoModel alloc]initWithDict:infoDict];

//将数据模型放入数组中

[infoArr addObject:goodsModel];

}

2.4 创建表格视图

代码如下： /* 创建表格，并设置代理 /

_MyTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];

_MyTableView.dataSource = self;

_MyTableView.delegate = self;

//给表格添加一个尾部视图

_MyTableView.tableFooterView = [self creatFootView];

[self.view addSubview:_MyTableView];

2.5 创建尾部视图

代码如下：

/* * 创建表格尾部视图 * * @return 返回一个UIView 对象视图，作为表格尾部视图
/

-(UIView *)creatFootView{

UIView *footView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 150)];

//添加一个全选文本框标签

UILabel *lab = [[UILabel alloc]initWithFrame:CGRectMake(self.view.frame.size.width - 150, 10, 50, 30)];

lab.text = @"全选";

[footView addSubview:lab];

//添加全选图片按钮

_allSelectBtn = [UIButton buttonWithType:UIButtonTypeCustom];

_allSelectBtn.frame = CGRectMake(self.view.frame.size.width- 100, 10, 30, 30);

[_allSelectBtn setImage:[UIImage imageNamed:@"复选框-未选中"] forState:UIControlStateNormal];

[_allSelectBtn addTarget:self action:@selector(selectBtnClick:) forControlEvents:UIControlEventTouchUpInside];

[footView addSubview:_allSelectBtn];

//添加小结文本框

UILabel *lab2 = [[UILabel alloc]initWithFrame:CGRectMake(self.view.frame.size.width - 150, 40, 60, 30)];

lab2.textColor = [UIColor redColor];

lab2.text = @"小结：";

[footView addSubview:lab2];

//添加一个总价格文本框，用于显示总价

_allPriceLab = [[UILabel alloc]initWithFrame:CGRectMake(self.view.frame.size.width - 100, 40, 100, 30)];

_allPriceLab.textColor = [UIColor redColor];

_allPriceLab.text = @"0.0";

[footView addSubview:_allPriceLab];

//添加一个结算按钮

UIButton *settlementBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];

[settlementBtn setTitle:@"去结算" forState:UIControlStateNormal];

[settlementBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

settlementBtn.frame = CGRectMake(10, 80, self.view.frame.size.width - 20, 30);

settlementBtn.backgroundColor = [UIColor blueColor];

[footView addSubview:settlementBtn];

return footView;

}

2.6 创建自定义cell类，并实现初始化方法

创建一个类名叫MyCustomCell继承UITableViewCell,在MyCustomCell.m中实现重写的初始化方法。

2.6.1 代码：

MyCustomCell.h ：

#import <UIKit/UIKit.h>

#import "GoodsInfoModel.h"

//添加代理，用于按钮加减的实现

@protocol MyCustomCellDelegate <NSObject>

-(void)btnClick:(UITableViewCell *)cell andFlag:(int)flag;

@end

@interface MyCustomCell : UITableViewCell

@property(strong,nonatomic)UIImageView *goodsImgV;//商品图片

@property(strong,nonatomic)UILabel *goodsTitleLab;//商品标题

@property(strong,nonatomic)UILabel *priceTitleLab;//价格标签

@property(strong,nonatomic)UILabel *priceLab;//具体价格

@property(strong,nonatomic)UILabel *goodsNumLab;//购买数量标签

@property(strong,nonatomic)UILabel *numCountLab;//购买商品的数量

@property(strong,nonatomic)UIButton *addBtn;//添加商品数量

@property(strong,nonatomic)UIButton *deleteBtn;//删除商品数量

@property(strong,nonatomic)UIButton *isSelectBtn;//是否选中按钮

@property(strong,nonatomic)UIImageView *isSelectImg;//是否选中图片

@property(assign,nonatomic)BOOL selectState;//选中状态

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

//赋值

-(void)addTheValue:(GoodsInfoModel *)goodsModel;

MyCustomCell.m :先写一个宏定义宽度。#define WIDTH ([UIScreen mainScreen].bounds.size.width)

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])

{

//布局界面

UIView * bgView = [[UIView alloc]initWithFrame:CGRectMake(5, 5, WIDTH-10, 95)];

bgView.backgroundColor = [UIColor whiteColor];

//添加商品图片

_goodsImgV = [[UIImageView alloc]initWithFrame:CGRectMake(5, 10, 80, 80)];

_goodsImgV.backgroundColor = [UIColor greenColor];

[bgView addSubview:_goodsImgV];

//添加商品标题

_goodsTitleLab = [[UILabel alloc]initWithFrame:CGRectMake(90, 5, 200, 30)];

_goodsTitleLab.text = @"afadsfa fa";

_goodsTitleLab.backgroundColor = [UIColor clearColor];

[bgView addSubview:_goodsTitleLab];

//促销价

_priceTitleLab = [[UILabel alloc]initWithFrame:CGRectMake(90, 35, 70, 30)];

_priceTitleLab.text = @"促销价:";

_priceTitleLab.backgroundColor = [UIColor clearColor];

[bgView addSubview:_priceTitleLab];

//商品价格

_priceLab = [[UILabel alloc]initWithFrame:CGRectMake(160, 35, 100, 30)];

_priceLab.text = @"1990";

_priceLab.textColor = [UIColor redColor];

[bgView addSubview:_priceLab];

//购买数量

_goodsNumLab = [[UILabel alloc]initWithFrame:CGRectMake(90, 65, 90, 30)];

_goodsNumLab.text = @"购买数量：";

[bgView addSubview:_goodsNumLab];

//减按钮

_deleteBtn = [UIButton buttonWithType:UIButtonTypeCustom];

_deleteBtn.frame = CGRectMake(180, 65, 30, 30);

[_deleteBtn setImage:[UIImage imageNamed:@"按钮-.png"] forState:UIControlStateNormal];

[_deleteBtn addTarget:self action:@selector(deleteBtnAction:) forControlEvents:UIControlEventTouchUpInside];

_deleteBtn.tag = 11;

[bgView addSubview:_deleteBtn];

//购买商品的数量

_numCountLab = [[UILabel alloc]initWithFrame:CGRectMake(210, 65, 50, 30)];

_numCountLab.textAlignment = NSTextAlignmentCenter;

[bgView addSubview:_numCountLab];

//加按钮

_addBtn = [UIButton buttonWithType:UIButtonTypeCustom];

_addBtn.frame = CGRectMake(260, 65, 30, 30);

[_addBtn setImage:[UIImage imageNamed:@"按钮+.png"] forState:UIControlStateNormal];

[_addBtn addTarget:self action:@selector(addBtnAction:) forControlEvents:UIControlEventTouchUpInside];

_addBtn.tag = 12;

[bgView addSubview:_addBtn];

//是否选中图片

_isSelectImg = [[UIImageView alloc]initWithFrame:CGRectMake(WIDTH - 50, 10, 30, 30)];

[bgView addSubview:_isSelectImg];

[self addSubview:bgView];

}

return self;

}

/**

*  给单元格赋值

*

*  @param goodsModel 里面存放各个控件需要的数值

*/

-(void)addTheValue:(GoodsInfoModel *)goodsModel

{

_goodsImgV.image = [UIImage imageNamed:goodsModel.imageName];

_goodsTitleLab.text = goodsModel.goodsTitle;

_priceLab.text = goodsModel.goodsPrice;

_numCountLab.text = [NSString stringWithFormat:@"%d",goodsModel.goodsNum];

if (goodsModel.selectState)

{

_selectState = YES;

_isSelectImg.image = [UIImage imageNamed:@"复选框-选中"];

}else{

_selectState = NO;

_isSelectImg.image = [UIImage imageNamed:@"复选框-未选中"];

}

}

/**

*  点击减按钮实现数量的减少

*

*  @param sender 减按钮

*/

-(void)deleteBtnAction:(UIButton *)sender

{

//判断是否选中，选中才能点击

if (_selectState == YES)

{

//调用代理

[self.delegate btnClick:self andFlag:(int)sender.tag];

}

}

/**

*  点击加按钮实现数量的增加

*

*  @param sender 加按钮

*/

-(void)addBtnAction:(UIButton *)sender

{

//判断是否选中，选中才能点击

if (_selectState == YES)

{

//调用代理

[self.delegate btnClick:self andFlag:(int)sender.tag];

}

}

2.7 实现表格的代理方法

//返回单元格个数

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:  (NSInteger)section

{

return infoArr.count;

}

//定制单元格内容

- (UITableViewCell *)tableView:(UITableView *)tableView     cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

static NSString *identify =  @"indentify";

MyCustomCell *cell = [tableView    dequeueReusableCellWithIdentifier:identify];

if (!cell)

{

cell = [[MyCustomCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identify];

cell.delegate = self;

}

//调用方法，给单元格赋值

[cell addTheValue:infoArr[indexPath.row]];

return cell;

}

//返回单元格的高度

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

return 120;

}

//单元格选中事件

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

/**

*  判断当期是否为选中状态，如果选中状态点击则更改成未选中，如果未选中点击则更改成选中状态

*/

GoodsInfoModel *model = infoArr[indexPath.row];

if (model.selectState)

{

model.selectState = NO;

}

else

{

model.selectState = YES;

}

//刷新整个表格

//    [_MyTableView reloadData];

//刷新当前行

[_MyTableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];

[self totalPrice];

}

2.8 实现单元格加、减按钮代理

先要再ViewController.m 中导入MyCustomCellDelegate 协议

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,MyCustomCellDelegate>

然后实现代码如下：

#pragma mark -- 实现加减按钮点击代理事件

/**

*  实现加减按钮点击代理事件

*

*  @param cell 当前单元格

*  @param flag 按钮标识，11 为减按钮，12为加按钮

*/

-(void)btnClick:(UITableViewCell *)cell andFlag:(int)flag

{

NSIndexPath *index = [_MyTableView indexPathForCell:cell];

switch (flag) {

case 11:

{

//做减法

//先获取到当期行数据源内容，改变数据源内容，刷新表格

GoodsInfoModel *model = infoArr[index.row];

if (model.goodsNum > 1)

{

model.goodsNum --;

}

}

break;

case 12:

{

//做加法

GoodsInfoModel *model = infoArr[index.row];

model.goodsNum ++;

}

break;

default:

break;

}

//刷新表格

[_MyTableView reloadData];

//计算总价

[self totalPrice];

}

2.8 全选方法的实现

/**

*  全选按钮事件

*

*  @param sender 全选按钮

*/

-(void)selectBtnClick:(UIButton *)sender

{

//判断是否选中，是改成否，否改成是，改变图片状态

sender.tag = !sender.tag;

if (sender.tag)

{

[sender setImage:[UIImage imageNamed:@"复选框-选中.png"]   forState:UIControlStateNormal];

}else{

[sender setImage:[UIImage imageNamed:@"复选框-未选中.png"] forState:UIControlStateNormal];

}

//改变单元格选中状态

for (int i=0; i<infoArr.count; i++)

{

GoodsInfoModel *model = [infoArr objectAtIndex:i];

model.selectState = sender.tag;

}

//计算价格

[self totalPrice];

//刷新表格

[_MyTableView reloadData];

}

2.9 计算总价格

#pragma mark -- 计算价格

-(void)totalPrice

{

//遍历整个数据源，然后判断如果是选中的商品，就计算价格（单价 * 商品数量）

for ( int i =0; i<infoArr.count; i++)

{

GoodsInfoModel *model = [infoArr objectAtIndex:i];

if (model.selectState)

{

allPrice = allPrice + model.goodsNum *[model.goodsPrice intValue];

}

}

//给总价文本赋值

_allPriceLab.text = [NSString stringWithFormat:@"%.2f",allPrice];

NSLog(@"%f",allPrice);

//每次算完要重置为0，因为每次的都是全部循环算一遍

allPrice = 0.0;

}

短时间手写：代码比较粗糙，没有完全整理；

请点击：Demo示例下载   或：http://download.csdn.net/detail/ljh910329/8624357

时间： 2024-08-23 19:19:31

iOS 实现一个类似电商购物车界面示例的相关文章

互联网电商购物车架构演变案例

       购物车主要作用在于:1.和传统卖场类似,方便用户一次选择多件商品去结算.2.充当临时收藏夹的功能.3.对于商家来说,购物车是向用户推销的最佳场所之一. 早期 ERP拆分 业务服务化拆分 WCS拆分 购物车功能模块概况 层级设计 群集设计 云购物车从应用层 面上设计了三个-- 交互层.业务组装,基础服(横向)每一都 由一个或多集群组成     交互层 分为购物页 (加入购物车,车一去结算),结算页(车二,立即购,提交订单去 支付) ? 业务组装层 提供标准购物车流程 ,非提供标准购物

一个垂直电商公司开发的故事

来这家电商公司已经工作了1年半了,从零开始,一个人用一年时间构建了一套电商系统,手机+PC端网页,后台ERP系统.有通宵熬夜.周末加班.有累到脑子疼.公司的业务越来越大,IT系统也随之越来越复杂.整体的开发工作量已经减少很多,但目前来看未来的挑战依然很大. 现在日常的工作状态是:开发补漏,维护系统.处理使用咨询.日常维护的时间的比重越来越大.比如经常发现有很多浏览器.各色特殊场景的使用问题,以及系统运行中,网络.第三方邮箱.第三方短信通道等等的问题.开发的工作量没有减少,与此同时运维相对开发的比

iOS 电商购物车倒计时时间计算

/** * 倒计时 * * @param endTime 截止的时间戳 * * @return 返回的剩余时间 */ - (NSString*)remainingTimeMethodAction:(long long)endTime { //得到当前时间 NSDate *nowData = [NSDate date]; //把时间戳转换成date格式 NSDate *endData=[NSDate dateWithTimeIntervalSince1970:endTime]; //创建日历对象

电商-购物车总结

1---------------------购物车-------------------------------------------- 购物车顾名思义是将你准备购买的东西先放置到购物车中,等到你想到付款的时候直接去购物车中去付款.是一个商城必备的功能之一. 2.-------------------------大型商城的购物车方式------------------------------------- (1)目前京东是可以在未登录的状态将你点击到购物车的商品添加到你之后登录账户的购物车中,

电商购物车解决方案

购物车列表:cartlist cookies存储 Redis存储 SecurityContextHolder 如果在配置文件配置security="none" 通过上面获取用户名则会报错 空指针 可以通过匿名角色解决 购物车对象:cart 商家ID: 商家NAME: 购物明细列表:orderitemlist 数量: 价格: orderitem 购物车对象: 后端注意事项:安全性 购物车购物明细数量小于等于0 前端控制层注意:把cart 和orderitem 单独出来 便于后期使用 ()

Demo—cookie电商购物车

说明:cookie的操作须有域名,简单点说就是需要用发布的方式去访问,查看cookie信息请用开发者模式进入application栏 1.页面布局(结构)(根目录) 商品列表 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品列表</title> <link rel="styleshee

类似电商倒计时代码

<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="apple-mobile-web-app-title" content=""> <meta http-equiv="Cache-Contr

电商总结（八）如何打造一个小而精的电商网站架构

前面写过一些电商网站相关的文章,这几天有时间,就把之前写得网站架构相关的文章,总结整理一下.把以前的一些内容就连贯起来,这样也能系统的知道,一个最小的电商平台是怎么一步步搭建起来的.对以前的文章感兴趣的朋友可以看这个,http://www.cnblogs.com/zhangweizhong/category/879056.html 本文大纲: 1. 小型电商网站的架构 2. 日志与监控系统的解决方案 3. 构建数据库的主从架构 4. 基于共享存储的图片服务器架构 5. 移动M站建设 6. 系统容

如何一步一步用DDD设计一个电商网站（七）—— 实现售价上下文

阅读目录 前言 明确业务细节 建模 实现 结语 一.前言 上一篇我们已经确立的购买上下文和销售上下文的交互方式,传送门在此:http://www.cnblogs.com/Zachary-Fan/p/DDD_6.html,本篇我们来实现售价上下文的具体细节. 二.明确业务细节 电商市场越来越成熟,竞争也越来越激烈,影响客户流量的关键因素之一就是价格,运营的主要打法之一也是价格,所以是商品价格是一个在电商中很重要的一环.正因为如此也让促销演变的越来越复杂,那么如何在编码上花点心思来尽可能的降低业务的