iOS 實作一個類似電商購物車界面示例
先看界面效果圖:
主要實作了商品的展示,并且可以對商品進行多選操作,以及改變商品的購買數量。與此同時,計算出,選中的總價格。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICN1kjNzMDM1EzMyQDM1EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
做此類型項目:要注意的:視圖與資料要分離開來。視圖的展現來源是資料模型層。是以我做的操作就是改變資料層的内容,在根據資料内容,去更新視圖界面。
已下是具體實作思路與代碼:
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;
}
-(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 ()<UITableViewDataSource,UITableViewDelegate,MyCustomCellDelegate>
然後實作代碼如下:
#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.8 全選方法的實作
-(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;
}
短時間手寫:代碼比較粗糙,沒有完全整理;