先看界面效果图：
主要实现了商品的展示，并且可以对商品进行多选操作，以及改变商品的购买数量。与此同时，计算出，选中的总价格。
做此类型项目：要注意的：视图与数据要分离开来。视图的展现来源是数据模型层。所以我做的操作就是改变数据层的内容，在根据数据内容，去更新视图界面。
已下是具体实现思路与代码：
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 ()<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; }
短时间手写：代码比较粗糙，没有完全整理；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【iOS实现电商购物车界面示例】相关文章：
★ iOS中使用UItableviewcell实现团购和微博界面的示例