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

/**
* 全选按钮事件
*
* @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.10 计算总价格

#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;
}

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

源码下载：http://xiazai.jb51.net/201612/yuanma/AndroidShoppingList(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• 总结IOS界面间跳转的几种方法
• iOS图片界面翻页切换效果
• iOS仿微信图片分享界面实现代码
• IOS 聊天界面（自适应文字）的实现
• iOS中使用UItableviewcell实现团购和微博界面的示例
• IOS实现微信朋友圈相册评论界面的翻转过渡动画
• Unity iOS混合开发界面切换思路解析
• iOS高仿微信相册界面翻转过渡动画效果
• iOS开发之级联界面(推荐界面)搭建原理
• iOS制作带弹跳动画发布界面