Creating a button image with padding bottom in Swift - swift

Question

I'm creating a system of Filters.
I'm trying to do that:
Currently I'm using the setBackgroundImage func, and I don't have this little rect below the picture:
filterButton.setBackgroundImage(imageForButton, for: .normal)
I tried functions like this one:
filterButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 20, right: 0)
But it's not effective if I keep the setBackgroundImage func.
If I use setImage(), the results is good but the click is not effective any more.
filterButton.setImage(imageForButton, for: UIControlState.normal)
Do you have an idea to do what I would like ?
The full snippet:
for i in 0 ..< CIFilterNames.count {
itemCount = i
// Button properties
let filterButton = UIButton(type: .custom)
// filterButton.frame = CGRectMake(xCoord, yCoord, buttonWidth, buttonHeight)
filterButton.frame = CGRect(x: xCoord, y: yCoord, width: buttonWidth, height: buttonHeight)
filterButton.tag = itemCount
filterButton.addTarget(self, action: #selector(self.filterButtonTapped(_:)), for: .touchUpInside)
// filterButton.layer.cornerRadius = 6
// filterButton.clipsToBounds = true
let ciContext = CIContext(options: nil)
let coreImage = CIImage(image: originalImage.image!)
let filter = CIFilter(name: "\(CIFilterNames[i])" )
filter!.setDefaults()
filter!.setValue(coreImage, forKey: kCIInputImageKey)
let filteredImageData = filter!.value(forKey: kCIOutputImageKey) as! CIImage
let filteredImageRef = ciContext.createCGImage(filteredImageData, from: filteredImageData.extent)
let imageForButton = UIImage(cgImage: filteredImageRef!)
filterButton.backgroundColor = UIColor.red
filterButton.setImage(imageForButton, for: UIControlState.normal)
//filterButton.imageEdgeInsets = UIEdgeInsets(top: 0,left: 0,bottom: 15,right: 0)
//filterButton.setBackgroundImage(imageForButton, for: .normal)
filterButton.setTitle("A\(i)", for: .normal)
// filterButton.backgroundImage.contentMode = .scaleAspectFill
filterButton.setTitleColor(UIColor(red: 22 / 255, green: 21 / 255, blue: 22 / 255, alpha: 1), for: .normal)
filterButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 20, right: 0)
filterButton.titleEdgeInsets.top = 140
// Add Buttons in the Scroll View
xCoord += buttonWidth + gapBetweenButtons
filtersScrollView.addSubview(filterButton)
}

Answer 1

It looks like you are trying to do everything in a single UIButton. I would suggest creating a custom element to handle this.
There are a few ways you could setup a custom UI element with the functionality that you want:
Use a UILabel to display the "A1" label with the colored background and display the image itself in a separate UIImageView. These could be overlaid with a invisible UIButton to receive the touchUpInside event and pass to your controller.
Alternatively, you could create a custom UIControl add add a UILabel and UIImageView as subviews. Disabling userInteraction on the subviews should allow the UIControl to receive the touch events. This could be contained in a single reusable class as if it's one UI element.