iOS中一款高度可定制性商品计数按钮(京东/淘宝/饿了么/美团外卖/百度外卖样式),使用简单!

PPNumberButton (Objective-C版本)

PPNumberButtonSwift (swift版本)

因为之前的项目中需要,在网上找了好多都不符合要求,最后干脆自己撸了一个,现在分享出来,希望能帮到有需要的人。

PPNumberButton.gif

• 支持自定义加/减按钮的标题内容、背景图片;
• 支持设置边框颜色;
• 支持使用键盘输入;
• 支持长按加/减按钮快速加减;
• 支持block回调与delegate(代理)回调;
• 支持使用xib创建、直接在IB面板设置相关属性;
• 支持设置maxValue(最大值)与minValue(最小值).
• 支持按钮自定义为京东/淘宝样式,饿了么/美团外卖/百度外卖样式;

Usage 使用方法

实例化方法

[[PPNumberButton alloc] init];:默认的frame为CGRectMake(0, 0, 110, 30)
或
[[PPNumberButton alloc] initWithFrame:frame];
或
[PPNumberButton numberButtonWithFrame:frame];: 类方法创建

1.自定义加减按钮文字标题

  PPNumberButton *numberButton = [PPNumberButton numberButtonWithFrame:CGRectMake(100, 100, 110, 30)];
    // 开启抖动动画
    numberButton.shakeAnimation = YES;
    // 设置最小值
    numberButton.minValue = 2;
    // 设置最大值
    numberButton.maxValue = 10;
    // 设置输入框中的字体大小
    numberButton.inputFieldFont = 23;
    numberButton.increaseTitle = @"＋";
    numberButton.decreaseTitle = @"－";
    
    numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
    };
    [self.view addSubview:numberButton];

2.边框状态

 PPNumberButton *numberButton = [PPNumberButton numberButtonWithFrame:CGRectMake(100, 160, 150, 30)];
    //设置边框颜色
    numberButton.borderColor = [UIColor grayColor];
    numberButton.increaseTitle = @"＋";
    numberButton.decreaseTitle = @"－";
    
    numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
    };
    
    [self.view addSubview:numberButton];

3.自定义加减按钮背景图片

  PPNumberButton *numberButton = [PPNumberButton numberButtonWithFrame:CGRectMake(100, 220, 100, 30)];
    numberButton.shakeAnimation = YES;
    numberButton.increaseImage = [UIImage imageNamed:@"increase_taobao"];
    numberButton.decreaseImage = [UIImage imageNamed:@"decrease_taobao"];
    
    numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
    };
    
    [self.view addSubview:numberButton];

4.饿了么,美团外卖,百度外卖样式

 PPNumberButton *numberButton = [PPNumberButton numberButtonWithFrame:CGRectMake(100, 280, 100, 30)];
    // 初始化时隐藏减按钮
    numberButton.decreaseHide = YES;
    numberButton.increaseImage = [UIImage imageNamed:@"increase_meituan"];
    numberButton.decreaseImage = [UIImage imageNamed:@"decrease_meituan"];
    
    numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
    };
    
    [self.view addSubview:numberButton];

使用xib创建

在控制器界面拖入UIView控件,在右侧的设置栏中将class名修改为PPNumberButton,按回车就OK了.

示例图1

注意!如果有的同学将控件拖线到代码中,千万不要忘记在拖线的代码文件中导入"PPNumberButton.h"头文件,否则会报错

可以在IB界面设置相关属性

示例图2