仿京东淘宝商品数量的加减按钮

2,406 阅读1分钟

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


PPNumberButton.gif

  • 支持自定义加/减按钮的标题内容、背景图片;
  • 支持设置边框颜色;
  • 支持使用键盘输入;
  • 支持长按加/减按钮快速加减;
  • 支持block回调与delegate(代理)回调.
  • 支持使用xib创建、自定义大小

Usage 使用方法

1.默认样式

 PPNumberButton *numberButton = [[PPNumberButton alloc] initWithFrame:CGRectMake(100, 100, 110, 30)];
 //按钮的block回调
 numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
 };
 [self.view addSubview:numberButton];

2.边框样式

PPNumberButton *numberButton = [[PPNumberButton alloc] initWithFrame:CGRectMake(100, 160, 200, 30)];
//设置边框颜色(如果没有设置颜色就没有边框)
numberButton.borderColor = [UIColor grayColor];
numberButton.numberBlock = ^(NSString *num){
      NSLog(@"%@",num);
 };
[self.view addSubview:numberButton];

3.自定义加减按钮的标题

 PPNumberButton *numberButton = [[PPNumberButton alloc] initWithFrame:CGRectMake(100, 220, 150, 44)];
    //设置加减按钮文字
[numberButton setTitleWithIncreaseTitle:@"加" decreaseTitle:@"减"];
numberButton.numberBlock = ^(NSString *num){
     NSLog(@"%@",num);
};
[self.view addSubview:numberButton];

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

PPNumberButton *numberButton = [[PPNumberButton alloc] initWithFrame:CGRectMake(100, 300, 100, 30)];
//设置加减按钮的背景图片
[numberButton setImageWithIncreaseImage:[UIImage imageNamed:@"➕按钮图片"] decreaseImage:[UIImage imageNamed:@"➖按钮图片"]];
numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
};

[self.view addSubview:numberButton];
注: 加减号按钮的标题和背景图片只能设置其中一个,若全部设置, 则以最后设置的类型为准

使用xib创建

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


示例图

如果你觉得不错,希望Star鼓励一下哈,你的Star是我持续更新的动力!GitHub地址: github.com/jkpang/PPNu…