Problems customizing UIStepper with translucent divider, button sizes and deferring tint color

Question

Having problems customizing the UIStepper control for my iOS app.

So far I've been able to customize it to the point where the background and divider are translucent, as well as changed the increment and decrement images using the code below...

func decorate(stepper: UIStepper) {
    let greyLeft   = UIImage(named: Assets.Button.leftGrey)
    let greenLeft  = UIImage(named: Assets.Button.leftGreen)
    let greyRight  = UIImage(named: Assets.Button.rightGrey)
    let greenRight = UIImage(named: Assets.Button.rightGreen)
    let blank      = UIImage(named: Assets.Button.translucent)
    let color      = UIColor(red:   147/255,
                             green: 148/255,
                             blue:   81/255,
                             alpha: 1.0)
    
    stepper.setDecrementImage(greenLeft,  for: .normal)
    stepper.setDecrementImage(greyLeft,   for: .disabled)
    stepper.setIncrementImage(greenRight, for: .normal)
    stepper.setIncrementImage(greyRight,  for: .disabled)
    stepper.setBackgroundImage(blank, for: .normal)
    stepper.setDividerImage(blank,
                            forLeftSegmentState: .normal,
                            rightSegmentState: .normal)
    stepper.tintColor = color
}

I have 3 problems though...

While the divider is translucent in normal state, when I tap the control it seems to flash an image. I've tried using a second call to the "setDividerImage" method for all the other states available including "selected", "highlighted", "focused", "disabled", "application" and "reserved" but the flash is still there (see screenshot below). How do I replace that image with my own or prevent the flash?

Even though I'm using two different images (same shape, different color) for the increment and decrement images their original colors are being overridden by the tint color. I think I can just cycle the tint color when it changes, but is it possible to defer the tint color so it doesn't override the image? Then I can avoid a solid color.
The images that I've got for the increment and decrement images are too small. Can I adjust the size programmatically? So I don't have to edit the images or go back to my graphic artist for larger ones.

Question #1 is my primary concern, because I think I can deal with #2 and #3 if needs be. However, it would be great if I could at least get confirmation that the answers to those are "NO" if that's the case.

DonMag DonMag · Accepted Answer · 2022-01-05T18:53:53

Change this line:

let blank = UIImage(named: Assets.Button.translucent)

to:

let blank = UIImage()

that should get rid of the highlighted separator.

If your images are simple arrows, you could easily generate those via code "on-the-fly" with the desired colors, or use them as tint-able images.

If you load the images like this:

let greyLeft   = UIImage(named: Assets.Button.leftGrey)?.withRenderingMode(.alwaysOriginal)
let greenLeft  = UIImage(named: Assets.Button.leftGreen)?.withRenderingMode(.alwaysOriginal)
let greyRight  = UIImage(named: Assets.Button.rightGrey)?.withRenderingMode(.alwaysOriginal)
let greenRight = UIImage(named: Assets.Button.rightGreen)?.withRenderingMode(.alwaysOriginal)

they shouldn't be affected by the tint color.

Problems customizing UIStepper with translucent divider, button sizes and deferring tint color

1 Answers