iOS实现电商购物车界面示例

先看界面效果图：

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

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

1. 实现步骤

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



-(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:@"复选框-未选中"];

}

}


-(void)deleteBtnAction:(UIButton *)sender
{
//判断是否选中，选中才能点击

if (_selectState == YES)

{
 //调用代理
 [self.delegate btnClick:self andFlag:(int)sender.tag];
}


}

-(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 ()
然后实现代码如下：

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



-(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.9 全选方法的实现


-(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

2.10 计算总价格



#pragma mark -- 计算价格
-(void)totalPrice
{
 //遍历整个数据源，然后判断如果是选中的商品，就计算价格（单价 * 商品数量）
 for ( int i =0; i

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


源码下载：http://xiazai.jb51.net/201612/yuanma/AndroidShoppingList(jb51.net).rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。

iOS实现电商购物车界面示例

iOS相关栏目本月热门文章