UIButton with image on right side of text, with fixed trailing space to button edge

Question

To get right to the case, I need a checkmark on the right side of my text on my UIButtons, and the checkmark has to be in a fixed length from the buttons right edge. To illustrate, i've added two images, of how it's supposed to work:

As you can see, the checkmarks aligns perfectly - so I was happy! But when I run my app on iphone6S PLUS, or on iPad, the checkmarks gets all messy..

Here's another image to illistrate - this is on iPhone 6S PLUS - its even worse on iPad.

I wasn't able to align the checkmarks in Interface Builder (AutoLayout), so I've done all the image-adding in code. Here's my code, for applying a checkmark to a button:

let btnImage = UIImage(named: "checkmarkWhite")

categoryButtonOne.setImage(btnImage, forState: UIControlState.Selected)
categoryButtonOne.semanticContentAttribute = .ForceRightToLeft
categoryButtonOne.imageEdgeInsets = UIEdgeInsetsMake(0, (categoryButtonOne.frame.width / 2) - (btnImage?.size.width)! - 10, 0, 0)

My intension was, to get the length of the button (as it differs according to the screensize from device to device), and then place the image in the same spot, on all the buttons.. But as you see, I didn't really succeed.

Does anyone of you, have an idea about, why the checkmarks are not getting placed equally? I'm using the exact same line of code to place the image, for all the buttons. Has it something to do with the text on the button? If so, would it be possible to make the button ignore the text, and just place the image properly?

Answer 1

A simple and easy solution: Use customised View with Label, Image & Actionable elements that can handle user touch/tap actions (UIButton or Tap Gesture). It would be very easy to handle your requirement.

According to your design, you've shared here, use UICollectionView with custom cell. It's easier than customised view.

Else, you can try this solution: Align button image to right edge of UIButton