Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


1. Making UI image to work as a button. 2. Making UI image to change it's color

  1. As I understand, UI buttons may only have rectangular or round-ish shapes. I have a set of images of different shapes (e.g. pants, t-shirt, beard etc.) and each of them should work as a button. How do I make UI Image to work as a button?

  2. Second question: how do I make mentioned UI images to change color. I'm building an app where you can describe your look using paper doll kinda tool ( https://www.behance.net/gallery/49171187/ICEBREAKER-(work-in-progress) ). You tap an element > it calls a keyboard where each key represents a color > after you tap a key and choose a color the element you've tapped before changes it's color accordingly.

Thank you ?

2 Answers

Ahmed Seddek
Ahmed Seddek
iOS Development Techdegree Student 6,448 Points

hi , for your first question:
there are 2 ways : first way : by drag button in your storyboard and change image background from utilities .

second way : You can add a UITapGestureRecognizer to the imageView .

  1. just write in the right search bar in utilities (gesture) and will appear first one (Tap Gesture Recognizer) and drag it into your Storyboard
  2. Ctrl-drag from the imageView to the gestureRecognizer (will find it near the view controller yellow circle in the bar of story board),
  3. Ctrl-drag from the gestureRecognizer to the Swift-file to make an IBAction
  4. You'll also need to enable (user interactions) and (multiple touch) on the UIImageView utilities ,
  5. write what u want to do with pressing the image view in IBAction function .

for second question : i think u can use same way with each key (u can make each key a button or imageView and write what u want to do in the action function to change the color of any thing u want like another button which u made it's @IBOutlet for it . i hope my answer is clear .

Thanks for your answer, Ahmet.

First solution works here. In the second question I meant how do I technically change the color. Of course there is a button and it calls an action. I've received an answer on stack overflow and will give it a try soon. Here is the thread http://stackoverflow.com/questions/42773692/1-making-ui-image-to-work-as-a-button-2-making-ui-image-to-change-its-color/42774160?noredirect=1#comment72666481_42774160

And here is another option http://stackoverflow.com/questions/31803157/how-to-color-a-uiimage-in-swift

Thanks man, appreciate it!

Ahmed Seddek
Ahmed Seddek
iOS Development Techdegree Student 6,448 Points

ooh sorry i misunderstood the second question and here is 2 lines of code to solve this second question if u still not find the solution :)) swift 2

yourImageView.image = yourImageView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
yourImageView.tintColor = UIColor.redColor()

swift 3

yourImageView.image = yourImageView.image!.withRenderingMode(.alwaysTemplate)
yourImageView.tintColor = UIColor.red

i tried this solution and it is worked perfect on arrow icon shape or triangle shape , here is a link for the solution too (http://stackoverflow.com/questions/19274789/how-can-i-change-image-tintcolor-in-ios-and-watchkit)