2

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:

enter image description here

enter image description here

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. enter image description here

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?

Krunal
  • 77,632
  • 48
  • 245
  • 261
Nicolai Harbo
  • 1,064
  • 12
  • 25
  • did you use autolayout ? – KKRocks May 09 '17 at 09:08
  • I'm using AutoLayout (sorry, i called it interface builder), to align the text to the left, but I wasnt able to place the image on the same distance from the right side on each button, from autolayout no.. :/ – Nicolai Harbo May 09 '17 at 09:11
  • did you add trailing and bottom constraint ? these two constraints are required for image – KKRocks May 09 '17 at 09:12
  • Not when adding an image to a UIButton - right?.. You cant add an image inside a button like you regularly do with images in views.. – Nicolai Harbo May 09 '17 at 09:15
  • sorry it was button . did you assigned to button ? – KKRocks May 09 '17 at 09:16
  • Yes, but in code.. Because otherwise the image would align right beside the text, and not on the most right side always :) Thats the issue.. – Nicolai Harbo May 09 '17 at 09:17
  • No you need to set image to button on storyboard . and give Trailing (10) and Bottom constraint and remove all code related to this button. – KKRocks May 09 '17 at 09:18
  • But this will set the image 10 from the text - and the length of the text differs from each button. It will not set the image 10px from the button edge. I've tried this already mate – Nicolai Harbo May 09 '17 at 09:20
  • it is leading constraint not trailing . i say about trailing . – KKRocks May 09 '17 at 09:22

1 Answers1

0

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

Krunal
  • 77,632
  • 48
  • 245
  • 261
  • 1
    Thanks! But I would prefer a solution with UIButtons if possible :) If not, your solution might be useful – Nicolai Harbo May 09 '17 at 15:14
  • Offcouse it is possible with Button but a customized button, not a pure UIButton. Width of your buttons are flexible with screen dimension (not fixed size button), so UIButton won't give you exact solution you want. – Krunal May 09 '17 at 15:34