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

 //创建窗口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];

 self.title = @"购物车"; //设置标题的属性样式等[self.navigationController.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor blackColor],NSFontAttributeName:[UIFont systemFontOfSize:23.0f]}];

@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;@endGoodsInfoModel.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;}

@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];}

/* 创建表格，并设置代理 /_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];

/* * 创建表格尾部视图 * * @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;}

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

//返回单元格个数- (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];}

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

/*** 全选按钮事件** @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];}

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