iOS搭建简易购物车页面

本文实例为大家分享了iOS实现简单购物车页面的搭建,供大家参考,具体内容如下

1.基础页面的搭建

  • 在storyboard的cell中创建控件并进行约束,继承自定义的AZWineCell
  • 将cell中的子控件和自定义的AZWineCell一一进行连线
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *priceLabel;
@property (weak, nonatomic) IBOutlet UILabel *countLabel;
@property (weak, nonatomic) IBOutlet AZWineButton *minusBtn;
  • 让商品的增加和删减按钮继承于自定义的按钮,实现自定义样式
-(void)awakeFromNib
{
    self.layer.borderWidth=1;
    self.layer.borderColor=[UIColor orangeColor].CGColor;
    self.layer.cornerRadius=self.frame.size.width*0.5;
}

2.加载模型数据

  • 这里使用懒加载的方式加载数据
-(NSMutableArray *)wineArray
{
    if (!_wineArray) {
        // 获得路径
        NSString *path=[[NSBundle mainBundle]pathForResource:@"wine.plist" ofType:nil];
        // 获得数组
        NSArray *array=[NSArray arrayWithContentsOfFile:path];
        // 创建一个临时数组存放模型数据
        NSMutableArray *tempArray=[NSMutableArray array];
        // 添加模型
        for (NSDictionary *dict in array) {
            //字典转模型
            AZWine *wine=[AZWine wineWithDict:dict];
            // 实现对wine模型内num值变化的监听
            [wine addObserver:self forKeyPath:@"num" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
            [tempArray addObject:wine];
        }
        _wineArray=tempArray;

    }
    return _wineArray;;
}
  • 给cell绑定模型数据,在模型的set方法给cell注入数据
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 绑定标识
    static NSString *ID=@"wine";
    // 创建cell
    AZWineCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
    // 给cell注入数据
    cell.wine=self.wineArray[indexPath.row];
    // 返回cell
    return cell;
}
-(void)setWine:(AZWine *)wine
{
    _wine=wine;

    self.iconView.image=[UIImage imageNamed:wine.image];
    self.nameLabel.text=wine.name;
    self.priceLabel.text=wine.money;
    self.countLabel.text=[NSString stringWithFormat:@"%zd",wine.num];
    self.minusBtn.enabled=(wine.num>0);

}

3.设置代理,实现对按钮点击事件的监听

  • 自定义协议,提供协议方法供代理调用,监听按钮的点击
@protocol AZWineCellDelegate <NSObject>

@optional
/*增加商品按钮的点击*/
-(void)wineCellDidClickPlusButton:(AZWineCell *)cell;
/*删减商品按钮的点击*/
-(void)wineCellDidClickMinusButton:(AZWineCell *)cell;
@end

@interface AZWineCell : UITableViewCell
/*模型*/
@property(nonatomic,strong)AZWine *wine;
/*设置代理*/
@property(nonatomic, weak) id<AZWineCellDelegate> delegate;

@end
  • 修改模型数据,修改界面,通知代理实现协议方法
- (IBAction)minusClick {
    // 修改模型
    self.wine.num--;
    // 修改界面
    self.countLabel.text=[NSString stringWithFormat:@"%zd",self.wine.num];
    // 按钮是否可以点击
    if (self.wine.num==0) {
        self.minusBtn.enabled=NO;
    }
    // 通知代理
    if([self.delegate respondsToSelector:@selector(wineCellDidClickMinusButton:)]){
        [self.delegate wineCellDidClickMinusButton:self];
    }

}
- (IBAction)plusClick {
    // 修改模型
    self.wine.num++;
    // 修改界面
    self.countLabel.text=[NSString stringWithFormat:@"%zd",self.wine.num];
    // 按钮是否可以点击
    self.minusBtn.enabled=YES;
    // 通知代理
    if ([self.delegate respondsToSelector:@selector(wineCellDidClickPlusButton:)]) {
        [self.delegate wineCellDidClickPlusButton:self];
    }
}
  • 实现协议方法,完成总价的刷新
-(void)wineCellDidClickPlusButton:(AZWineCell *)cell
{
    // 计算总价
    int totalPrice=self.totalPriceView.text.intValue+cell.wine.money.intValue;
    // 刷新界面
    self.totalPriceView.text=[NSString stringWithFormat:@"%d",totalPrice];
    // 购买按钮
    self.purchaseBtn.enabled=YES;
    // 购物车
    if (![self.shoppingList containsObject:cell.wine]) {
        [self.shoppingList addObject:cell.wine];
    }

}

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

时间: 2022-08-08

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

先看界面效果图: 主要实现了商品的展示,并且可以对商品进行多选操作,以及改变商品的购买数量.与此同时,计算出,选中的总价格. 做此类型项目:要注意的:视图与数据要分离开来.视图的展现来源是数据模型层.所以我做的操作就是改变数据层的内容,在根据数据内容,去更新视图界面. 已下是具体实现思路与代码: 1. 实现步骤 在AppDelegate.m中包含ViewController.h头文件,创建ViewController对象(vc),接着创建一个UINavigationController对象(nV

IOS购物车界面实现效果示例

购物软件不可避免有添加购物车的页面,那么购物车功能是怎么实现的呐?这里提供一种简单的思路,插入本地数据库. 先看效果 页面结构 本页面是由一个tableview和底部的底部的bottomView构成 底部的bottomView上有按钮,也可以添加其他属性,比如总价格,总重量等参数. 代码结构 思路 看到这样的需求,我想到的是插入本地数据库,每一条数据都有对应的id和其他的例如价格等的参数,根据id插入本地是一条可行的方法,为了避免刷新的时候选中的单元格和没选中的单元格的复用,我们需要对按钮做一点

iOS添加购物车动画效果示例

一.计算动画开始结束点位置 方法: - (CGPoint)convertPoint:(CGPoint)point toView:(nullable UIView *)view; 1) 动画开始位置fromCenter 复制代码 代码如下: CGPoint fromCenter =  [animationView convertPoint:CGPointMake(animationView.frame.size.width * 0.5f, animationView.frame.size.heig

iOS实现自定义购物车角标显示购物数量(添加商品时角标抖动 Vie)

前言: 适用场景:商城类的 App .将自定义的购物车 view 设置为 navigationItem 的导航栏按钮.效果图如下: 图1.右上角的购物车即是我们定义的view 实现原理: 1.利用 navigationItem 可以将 UIView 设置为导航栏的按钮: 2.将一个 UIButton 和 一个 UILabel 添加到一个 UIView 上.然后将这个 UIView 设置为 navigationItem 的右侧按钮:3.UILabel 控件的动画效果. 具体实现代码如下:​ ​1

JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)

购物车点击可以减少或者添加商品并自动计算价格: 购物车中可能有这样的功能,那就是点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格,下面就通过代码实例介绍一下如何实现此功能,当然下面的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

iOS中自定义弹出pickerView效果(DEMO)

UIPickerView平常用的地方好像也不是很多,顶多就是一些需要选择的地方,这次项目需要这一个功能,我就单独写了一个简单的demo,效果图如下: 新增主页面弹出view,在主页面添加的代码 有个小问题就是第四个直接添加在主页弹出来的view好像被导航栏给覆盖了,我还没去研究,就着急的先吧功能写了.大家谅解下 最初版本 话说我终于弄了gif了,再也不要去截图每张图都发一遍了!! 这个demo呢,等于是可以拿来直接用的第三方了吧,只需要传数据就可以了,弹出的三个框显示的数据也不一样,我的封装能力

iOS 控制器自定义动画跳转方法(模态跳转)

参考资料: Apple 开发文档 Customizing the Transition Animations WWDC 2013 Custom Transitions Using View Controllers 图例: 跳转的动画有很多,全部可以自定义 创建自定义跳转必须遵循的三个步骤: 1.创建一个类,并实现了 UIViewControllerAnimatedTransitioning 协议 2.创建一个类作为 UIViewControllerTransitioningDelegate 过渡

IOS中自定义类中限制使用原生实例化方法

IOS中自定义类中限制使用原生实例化方法 在自定义的类中,除了有系统自带的实例化方法外,还可能会有开发者自定义的实例化方法.当不想使用系统自定义方法时,而仅使用自定义的实例化方法时,可以这样做下限制. 如下示例所示: #import <UIKit/UIKit.h> @interface MYView : UIView // 限制使用系统方法进行实例化 // 方法1 - (instancetype)init UNAVAILABLE_ATTRIBUTE; // 方法2 - (instancetyp

IOS实现自定义透明背景的tabbar

话不多说,直接看示例代码 ``` // UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, tabBarHeight + 5)]; // [imageView setImage:[self createImageWithColor:[UIColor clearColor]]]; // [imageView setContentMode:UIViewContentModeScal

iOS实现自定义起始时间选择器视图

随着界面的整体效果的各种展现, 起始时间选择器的展现也需求突出! 最近项目中发现时间选择器使用处还挺多, 数了数原型图发现有6处. 便决定自定义时间选择器视图写个 Demo, 封装好在所需控制器里直接调用! 主要功能: 调起时间选择器, 传值(起始时间/截止时间), 两者时间均要合理, 不能超过未来时间, 并且起始时间不能大于截止时间. 点击取消或空白处收起时间选择器. 如果需要可以根据自己的需求来修改界面, 效果如下: 主要步骤: 创建时间选择器Picker 且确认取消按钮实现功能逻辑 创建展

jquery自定义显示消息数量

本文实例为大家分享了jquery自定义显示消息数量展示的具体代码,供大家参考,具体内容如下 根据需求简单的实现一个小功能控件,暂时不支持扩展. $("xxxxxxx").iconCountPlugin(options, start, isOffset) { //三个参数,自定义样式,是否禁止图标位置随浏览器窗口变化而变化,是否禁用偏移量 这个是调用,后面俩参数可以根据需求自行进行调整,以兼容不同的浏览器,可能因为浏览器之间的差异导致出一些意想不到的错误. 复制代码 ; (functio

iOS 10自定义相机功能

本文实例为大家分享了iOS 10自定义相机功能的具体代码,供大家参考,具体内容如下 直接上代码 // // TGCameraVC.swift // TGPhotoPicker // // Created by targetcloud on 2017/7/25. // Copyright © 2017年 targetcloud. All rights reserved. // import UIKit import AVFoundation import Photos @available(iOS

iOS Xcode自定义代码块及迁移的实现方法

前言 文中将要介绍以下四点内容 代码块的意义 自定义代码块入口 代码块迁移 代码块的编写 下面话不多说了,来一起看看详细的介绍吧 一 . 意义在于节约时间成本 like 我在编译器键入 strong, 回车 自动生成 @property (nonatomic, strong) <#Class#> *<#object#>; 二 . 如何自定义代码块 如下图所示 选中一行代码右键 crate code snippet 右上角方框快速进入 图1 下图填入描述, 以及快捷方式 图2 三 .