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! While you're at it, check out some resources Treehouse students have shared here.

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

iOS

Laura Paxton
Laura Paxton
2,304 Points

Need to know how to get tapping a button to make an image appear

and for ten different buttons to make different images in the same image area. Thanks.

10 Answers

Taylor Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Taylor Smith
iOS Development Techdegree Graduate 14,153 Points

it's a Christmas miracle! I just realized a way easier way to do it (i'm a novice as well, so i'm still learning!)

   let imageTeresa = UIImage(named:"teresa.png")
        picture.image = imageTeresa

so for whatever image you want, create a constant for it. Now under each button, just put this code in there and change the necessary file name. now yo can do use just 1 image view, and cycle through the images, as opposed to several image views.

also, remember to take out the ".hidden" under you viewdidload function!

Taylor Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Taylor Smith
iOS Development Techdegree Graduate 14,153 Points

A very simple way to accomplish this is after linking both the image view and the button into your viewcontroller.swift, you can use a simple if/else statement to trigger it back and forth.

class ViewController: UIViewController {


    @IBOutlet weak var image: UIImageView! //this is the connection for your image
    @IBAction func buttonPressed(sender: AnyObject) { //this is the ACTION connection for your button

        if image.hidden == true {

            image.hidden = false
        } else {

            image.hidden = true
        }

  }

what this does is toggle the image appearing every time you push the button. Essentially, if the image is not visible, make it visible, and the other way around. now yo can simply do this for the 10 other images as you see fit.

I'm not sure if this is what you were looking for. hope i could help!

Taylor Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Taylor Smith
iOS Development Techdegree Graduate 14,153 Points

"images" was the name I assigned to it, like you would for a variable or constant. You would simply have to control + click (or right click) and drag each image view into your coding to link it. When you do this, the little screen pops up giving you options. Then you simply label each image whatever you wish (image1, image2, mainImage, imageDog, etc.). In the code above, I chose the name "image," but you can choose any name you want to describe your image you want to display. whatever name you choose to use, is now what you will refer to it as. if chose "imageDog" as one of your images, then you would start using imageDog as your reference. (i.e. imageDog.hidden = true)

now if you are using multiple images, you just have to repeat the steps. whatever images you are using you need to drag into your project on the left. Then for each image view, you can select the image you want in the attributes inspector (on the right side under "Image View").

let me know if that's what you needed.. :)

Taylor Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Taylor Smith
iOS Development Techdegree Graduate 14,153 Points

oh ok, well then try something like this:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var catImage: UIImageView!
    @IBOutlet weak var skyImage: UIImageView!

    @IBAction func catButton(sender: AnyObject) {

      skyImage.hidden = true
      catImage.hidden = false
    }

    @IBAction func skyButton(sender: AnyObject) { 

      catImage.hidden = true
      skyImage.hidden = false        
    }


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        catImage.hidden = true
        skyImage.hidden = true
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

I tried it using an image of a cat and an image of the sky, but obviously change the names of whatever you used.

so this code makes each image appear, and stay on the screen until the next button is pushed, which hides the previous image and the new image appears.

remember to place the ".hidden" value of each image to "true" in your "viewDidLoad" func. That will make them both hidden when the app starts. If you want an image to be there when it starts, then simply make that image's ".hidden" value to be "false".

hope we're getting close!!

Taylor Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Taylor Smith
iOS Development Techdegree Graduate 14,153 Points

so Lauren, essentially for each color button you use, you need to make the ".hidden" value of the picture you want to "false" and the ".hidden" value of the picture you want to disappear to "true." that should solve your problem

Laura Paxton
Laura Paxton
2,304 Points

Thanks. Here's what I'm confused about. How do I refer to the images? As .png or just by the name of the image without the extension? (I'm assuming I substitute the image name for the word, "image."

Laura Paxton
Laura Paxton
2,304 Points

I appreciate your help and patience. I am a novice who is doing something that should be way over my head. How I have as much as I have working is a miracle.

Okay, what you describe is what I was doing, but it wasn't working, so I thought I wasn't referring to the images properly. But, I was.

I'm using saint quotes and saint pictures.

I link so that when the gold button is pressed, Teresa should appear. Then, I change the pic in the ImageView to Therese and then right drag that to make another outlet. Then, I drag from the pink button to make the action so that the pink button pressed should make Therese appear.

So, I have: @IBOutlet weak var imageTeresa: UIImageView!

@IBOutlet weak var imageTherese: UIImageView!

(same imageView but with a different pic and outlet attached)

Then,

@IBAction func goldButtonPressed(sender: AnyObject) { if imageTeresa.hidden == true {

    imageTeresa.hidden = false
} else {

    imageTeresa.hidden = true
    }

}

@IBAction func pinkButtonPushed(sender: AnyObject) {if imageTherese.hidden == true
{
imageTherese.hidden = false
     } else {
imageTherese.hidden = true }

All that is showing up is Therese. And when I click Therese's button more than once, her picture flashes off and on and I want her pic to stay up for as long as the pink button is being pushed.

I'm wondering should I just be layering images in the same area, dragging ImageViews on top of each other or can I really have the different pics showing up in just the one container of one ImageView? It isn't working now.

I'm also going to go back to using just "buttonPressed" without the color. That didn't work either but maybe I have to use that because it's the only correct command?

I am doing lots of trial and error.

Thanks, Laura

Laura Paxton
Laura Paxton
2,304 Points

See, I wanted them all to appear in one box, one at a time, each time the colored button is pressed. So, every time I press the gold button, I want St. Teresa's pic to stay there. So, she won't blink off and on with each click. She doesn't need to disappear every other click AND she should go away when the pink (or any other color button) is pressed. Does this make sense?

I have it now so that the pink and gold blink on and off. Sometimes, two pics are staying up at once and I don't want that. Thanks.

Laura Paxton
Laura Paxton
2,304 Points

Taylor, you are brilliant and talented. Everything works PERFECTLY.

I can't thank you enough. I've taken a lot of classes here on TH but this is first app I've ever made. It's very different once you get in there and try to make lots of things work at one time!

So, thanks for your good work.

Taylor Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Taylor Smith
iOS Development Techdegree Graduate 14,153 Points

Laura Paxton, sorry it took so long! I really enjoyed playing around with it myself and helping you figure it out! I learned a lot myself in the process! all the best