Change appearance of UIStepper

Question

UIStepper is very convenient but I want to change the appearance of it, I need to have customized icon not the plus and minus and also I want to change the color of the cont

Answer 1

Here is solution that works for me.

Platform iOS 7.1

[stepper setBackgroundImage:[UIImage new] forState:UIControlStateNormal];
[stepper setDividerImage:[UIImage new] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal];

The result is only increment, decrement images are visible.

Answer 2

Here's the Swift 4.0 version:

stepper.setDecrementImage(UIImage(named: "yourDecrementImage.png"), for: UIControlState.normal)
stepper.setIncrementImage(UIImage(named: "yourIncrementImage.png"), for: UIControlState.normal)

I also found that shrinking custom images to fit into the stepper buttons would blur them. This is the only extension function I found that properly shrunk the images down without blurring:

extension UIImage {
  func resize(targetSize: CGSize) -> UIImage {
        return UIGraphicsImageRenderer(size:targetSize).image { _ in
            self.draw(in: CGRect(origin: .zero, size: targetSize))
        }
    }
}

Answer 3

You can always step through the UIViews and guess, too. Anyway, this is my code, which doesn't answer the question directly, but is kind of neat.

@implementation UIStepper (Util)

- (void) fixForIos7 {
    if (!IS_IOS7)
        return;
    for (UIView *view in self.subviews) {
        view.backgroundColor = [UIColor whiteColor];
        UIButton *button = (UIButton*)view;
        [button setTintColor:[UIColor blackColor]];
    }
}

@end

Answer 4

As of iOS 6.0 you can use - (UIImage *)decrementImageForState:(UIControlState)state and - (UIImage *)incrementImageForState:(UIControlState)state to change the labels on the UIStepper control.

This works for iOS 6.0:

[_stepper setDecrementImage:[UIImage imageNamed:@"decrementIcon.png"] forState:UIControlStateNormal];

Answer 5

This works:

[[UIButton appearanceWhenContainedIn:[UIStepper class], nil] setBackgroundImage:[UIImage imageNamed:@"normal.png"] forState:UIControlStateNormal];
[[UIButton appearanceWhenContainedIn:[UIStepper class], nil] setBackgroundImage:[UIImage imageNamed:@"highlighted.png"]  forState:UIControlStateHighlighted];
[[UIButton appearanceWhenContainedIn:[UIStepper class], nil] setBackgroundImage:[UIImage imageNamed:@"disabled.png"]  forState:UIControlStateDisabled];

Not sure how future proof it is though.

Answer 6

You cannot presently do this. You'll have to write a custom UIControl object if you want to customize the icons.

From the UIStepper Class Reference, the only parameters you can change are

  continuous  property
  autorepeat  property
  wraps  property
  minimumValue  property
  maximumValue  property
  stepValue  property

  value  property

You cannot customize the icons.

However, since it is a subclass of UIView, you can try changing the backgroundColor.