Question

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 50×53 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.)

Answer 1

If you want to maintain the gird-like arrangement as you described (6×8), 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.