很多app都有这样的功能:(大家一看就能懂吧)
这个功能我们要实现的话,估计一开始就会想到使用 btn-label-btn的方式来做。
是的,这样确实能做到,但是这样做的话,每次都是需要点击一次按钮,数量值才会变化。
如果我们的需求是点住 "+" 或者 "-"按钮,数量就一直递增递减的话,上面的方式可能就不太好用了,当然,做还是可以做到的,比如(举2种):
1.给 "+" "-" 添加单击,长按事件,单击的话就做+1或-1的操作,如果长按的话,长按开始,开启定时器,递增或者递减,长按结束,定时器停止。
2.还是btn-label-btn方式,根据btn的不同点击状态,开启定时器,关闭定时器,原理跟 1 相同。
以上2种方式虽然都能实现我们的需求,但是我们会发现,这样做或许代码不多,但逻辑上总感觉不爽(我不太爽),再一个不爽的原因是这2种方式都只能实现匀速的递增和递减,因为timer的TimeInterval是固定的,而一般我们点住不放的话,应该递增递减的速度是加快的,匀速的真的不好用...
那么,还有什么更好的办法吗?
如题:
对于UIStepper,我们可以去看官网API,也可以直接点进这个类去看它的属性和方法,UIStepper还是很简单的,我们直接看它属性方法就能知道它怎么用了。
这是它的属性:
从属性我们可以知道,UIStepper可以设置它的最大最小value,还有它的增和减的stepValue,另外它是继承UIControl的,它的事件触发是UIControlEventValueChanged。
这是它的方法:
从方法我们可以知道,UIStepper可以设置加和减按钮的图片.(知道这个就行了,虽然能设置加减按钮的图片,但是图片颜色会固定成stepper的tintColor,也不满足需求)
OK,既然知道了这些东西,那我们就开始实现我们的需求吧。
实现需求:
需求是这样的
而我们的stepper是这样的
为了完成这个需求特地去看了官网api和介绍,发现没有可直接使用的属性和方法呀,官网才不会教你这种功能怎么做呀。
OK,那就自己想想办法:
发现没有,这个控件的size是死的,宽94高29,那么我们是不是可以这样做呢?
给个29X29的减和加图片放在两边,这样宽度用去了58,还剩36,这36的宽度是不是可以用来放一个label呢?嗯,应该是可以的。那咱们就试一下!
stepper = [[UIStepper alloc]initWithFrame:CGRectMake(100, 200, 8, 5)];
stepper.tintColor = [UIColor clearColor];
stepper.minimumValue = 0;
stepper.maximumValue = 1000;
stepper.stepValue = 1;
[stepper addTarget:self action:@selector(valuechange) forControlEvents:UIControlEventValueChanged];
// step.wraps = YES; //写了这个属性从0递减是100,从100递增是0
[self.view addSubview:stepper];
UIImageView *decrementImgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 29, 29)];
decrementImgView.image = [UIImage imageNamed:@"reduce"];
[stepper addSubview:decrementImgView];
UIImageView *incrementImgView = [[UIImageView alloc]initWithFrame:CGRectMake(65, 0, 29, 29)];
incrementImgView.image = [UIImage imageNamed:@"plus"];
[stepper addSubview:incrementImgView];
label = [[UILabel alloc]initWithFrame:CGRectMake(129, 201, 36, 27)];
label.backgroundColor = [UIColor whiteColor];
label.textAlignment = NSTextAlignmentCenter;
label.text = @"0";
[self.view addSubview:label];
- (void)valuechange{
label.text = [NSString stringWithFormat:@"%d",(int)stepper.value];
}
然后效果是这样的:
点击 加 减 按钮也能实现数值的递增递减,并且递增递减不是匀速的,而是越来越快的...瞧,现在多爽!
好了,到这里需求也解决了,demo已放到github:https://github.com/qingmomo/UIStepper 希望对大家有帮助!