CODEWITHSUNDEEP
objective-cxcodeuiimageuibutton
bmende
bmende

Reputation: 741

best way to make images with tap functionality in Xcode?

I am trying to make a game where if you tap something a small 50X53 image displays right where you tapped it, i started by making the 50x53 image thing a button, that when you touch the button the background of the button changes to red (to simulate that an image was just added there) so here i have about 48 buttons (6X8) on my viewController and whenever i press one of those button the background changes to red, ok simple enough, but now what i want to do is have the UI be completely blank (you can't see any buttons) and then when you press a given area an image pops up in that small space you pressed. I figured instead of doing 

-(IBAction)imagePressed
{
sender.background=[UIColor redColor];
}


-(IBAction)imagePressedAgain
{
sender.background=[UIColor whiteColor];
}

i was going to do something like 

-(IBAction)imagePressed
{
sender.image=@"whateverImage.png";
//I know this isn't the right syntax to change a buttons image (and i don't even know if i can change a buttons image) but anyways i was going to try to here
}
-(IBAction)imagePressedAgain
{
sender.image=@"imageThatIsJustAWhiteBackground";
}

so i tried doing this and then thought to myself, hmmm maybe I'm not supposed to do it this way, am i supposed to use a bunch of tiny UIImageViews and put them all on the interfaceBuilder? Like instead of having 48 buttons across the screen i would have 48 UIImageViews? and then I guess i would add a tap gesture recognizer to each? Or should i just stick to my old plan and change the buttons image?

(o, and btw i can't have the images show exactly in proportion to where the user touched his finger on the screen, i have to have it in an organized grid so i have to have like 48 of them.)

Upvotes: 2

Views: 2774

Answers (3)

ravron
ravron

Reputation: 11221

EDIT: I apparently didn't see that the original question includes:

(o, and btw i can't have the images show exactly in proportion to where the user touched his finger on the screen, i have to have it in an organized grid so i have to have like 48 of them.)

As such, my answer isn't really what the asker was looking for. ezekielDFM answered it quite well. I'll post it anyways, though, in case anyone is looking to show an image at the location of a user's arbitrary touch.

Original Answer

As rdelmar said, the best way to set this up would be with a UITapGestureRecognizer. The gesture recognizer can intercept touch events on its view and give you useful information about them.

In your view controller implementation, you'll first want to attach an appropriate UITapGestureRecognizer to your view:

- (id)init 
{
    UITapGestureRecognizer *tapRecognizer = 
    [[UITapGestureRecognizer alloc] initWithTarget:self 
                                            action:@selector(handleSingleTap:)];

    // The gesture recognizer requires only one finger to fire
    [tapRecognizer setNumberOfTouchesRequired:1];

    // Make recognizer cancel any touches that it recognizes, so they don't
    // "fall through" to the actual view
    [tapRecognizer setCancelsTouchesInView:YES];
    [[self view] addGestureRecognizer:tapRecognizer];
}

Then, implement that handleSingleTap: selector somewhere in the same implementation. It might look something like this:

- (void)handleSingleTap:(UITapGestureRecognizer *)recognizer
{
    // Get the location of the touch
    CGPoint touchPoint = [recognizer locationOfTouch:0 inView:[self view]];

    // Init a new image, or get an image in some other way
    UIImage *myImage = [UIImage imageNamed:@"test_image.png"];

    // Create a new imageView for that image... 
    UIImageView *imageView = [[UIImageView alloc] initWithImage:myImage];
    // ... and center it at the touch location
    [imageView setCenter:touchPoint];

    // Add the new UIImageView to your view's subviews
    [[self view] addSubview:imageView];
}

That should get you started. Let me know if you need more specific help.

Upvotes: 1

ezekielDFM
ezekielDFM

Reputation: 1977

If you want to maintain the gird-like arrangement as you described (6x8), you can do something like the following:

 NSMutableArray *buttons = [[NSMutableArray alloc] init];

// Loop through and create 48 buttons at 50 x 53
for(int i = 0; i < 48; i++)
{
    UIButton *pressMe = [UIButton buttonWithType:UIButtonTypeCustom];

    [buttons addObject:pressMe];
    pressMe.frame = CGRectMake(0, 0, 50, 53);
    // Set background image for when button is selected
    [pressMe setBackgroundImage:[UIImage imageNamed:@"selectedImage.png"] forState:UIControlStateSelected];
    // Add target to toggle selected state of button
    [pressMe addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
}

int col = 0;
int row = 0;
int maxPerRow = 6;
float spacingHorizontal = 50;
float spacingVertical = 53;

for(UIButton *view in buttons)
{
    // position buttons in 6 x 8 grid
    view.frame = CGRectMake(col * spacingHorizontal, row * spacingVertical, view.frame.size.width, view.frame.size.height);
    [self.view addSubview:view];

    if(col % maxPerRow == maxPerRow-1)
    {
        col = 0;
        row++;
    }
    else
    {
        col++;
    }
}

You can see the important part is setting the selected image for the button. This will allow you to show your custom image when the button is tapped. Here's a screen cap of my test. If you want i can give you the project files.

enter image description here

Upvotes: 5

rdelmar
rdelmar

Reputation: 104082

I'm not in front of my computer right now, so I can't test this, but I think the easiest way to do this is to just add a gesture recognizer to your view -- you shouldn't need image views or buttons predefined. When the user taps the view, get the location from the event and use that information to place an image view in the location closest to the touch point that lies on your grid.

Upvotes: 0

Related Questions