文档章节

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

Divorce
 Divorce
发布于 2016/05/17 09:21
字数 2254
阅读 24
收藏 0

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

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

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;

}

© 著作权归作者所有

共有 人打赏支持
Divorce
粉丝 0
博文 2
码字总数 2302
作品 0
广州
私信 提问
加载中

评论(1)

S
Sydneady
楼主,有源码吗
Unity免费插件分享 Bluetooth LE for iOS, tvOS and Android 2.3.0 Unity蓝牙插件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/KiTok/article/details/83177703 Unity免费插件分享 Bluetooth LE for iOS, tvOS and Android 2.3.0 Unity蓝牙...

KitStar
10/19
0
0
(转)直接拿来用!最火的iOS开源项目(二)

“每一次的改变总意味着新的开始。”这句话用在iOS上可谓是再合适不过的了。GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有的项目...

孙启超
2013/06/21
0
1
iOS电商常见动画与布局、微信悬浮窗、音乐播放器、歌词解析、拖动视图等源码

iOS精选源码 MXScroll 介绍 混合使用UIScrollView(http://www.code4app.com/thread-30678-1-1.html) ios 电商demo(实现各种常见动画效果和页面布局)(http://www.code4app.com/thread-30689......

sunnyaigd
08/07
0
0
iOS 9应用开发教程之创建iOS 9项目与模拟器介绍

iOS 9应用开发教程之创建iOS 9项目与模拟器介绍 编写第一个iOS 9应用 本节将以一个iOS 9应用程序为例,为开发者讲解如何使用Xcode 7.0去创建项目,以及iOS模拟器的一些功能、编辑界面等内容。...

大学霸
2015/08/06
0
0
js和原生应用常用的数据交互方式

场景1 在原生app中经常会使用到H5页面,比如说电商中的活动页,一些电商中的详情页,等等...这些页面都有一个特点,那就是在未来修改的可能性,和一次性的几率特别的大。所以用H5的页面是最睿...

Jamesdanner
11/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里云建站

阿里云自营建站 没想到阿里云已经切入这块市场了。可以用拖动的方式来建站的模式,真的还是6.

miaojiangmin
24分钟前
2
0
linux系统top命令:virt,res,shr详解

VIRT:virtual memory usage 虚拟内存 1、进程“需要的”虚拟内存大小,包括进程使用的库、代码、数据等 2、假如进程申请100m的内存,但实际只使用了10m,那么它会增长100m,而不是实际的使用...

刘祖鹏
30分钟前
2
0
day154-2018-11-21-英语流利阅读-待学习

快手网红发明家:百万粉丝 vs 零销量 雪梨 2018-11-21 1.今日导读 “我做了一个‘雷神锤’的斜挎包,你看这里可以打开,里面可以装手机、卫生纸、钱包,觉得轻的话可以放一些砖头。咱们把它背...

飞鱼说编程
37分钟前
10
0
图灵奖得主华人高徒发布AI芯片!64位RISC-V、高度可编程,低功耗

作为RISC-V架构下的旗手玩家,睿思芯科自然希望通过产品展现出RISC-V可编程架构的巨大潜力。 https://mbd.baidu.com/newspage/data/landingshare?context=%7B%22nid%22:%22news_917924603675...

whoisliang
37分钟前
4
0
xcode 10 缺少 libstdc++6.0.9 解决方案

image.png 本方案基于xcode10正式版操作,其它版本请自行验证! 苹果在XCode10中移除了libstdc++(libstdc++.6、libstdc++6.0.9)库。 项目解决方法:删除libstdc++(libstdc++.6、libstdc++6....

壹峰
41分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部