Changing entire button background color

SoulRed12 · May 11, 2010

I just have a quick question.

I'm writing a tic tac toe game for the heck of it (practice, I guess) and I want to make it so that when a player gets three in a row, it highlights the three buttons in some color. I can get the center rectangle of the buttons to change color but I can't get the entire button to change color like for example when you click on it. Here:

See? I'd like the buttons to nicely highlight the entire button but what they do now is just a rectangle in the middle and ignore the parts on the left and right. Note the buttons are just normal UIButtons (RoundRectButtons) created and placed in the view through code. Here's the code I used to do the highlighting:

Code:

- (void)highlightSpaces:(int)one second:(int)two third:(int)three {
	if (one<9 && two<9 && three<9) {
		//Note the 9 tic tac toe buttons are contained in one NSMutableArray
		[[[buttonsArray objectAtIndex:one] titleLabel] setBackgroundColor:[UIColor greenColor]];
		[[[buttonsArray objectAtIndex:two] titleLabel] setBackgroundColor:[UIColor greenColor]];
		[[[buttonsArray objectAtIndex:three] titleLabel] setBackgroundColor:[UIColor greenColor]];
	}
}

Any ideas would be appreciated. Thanks!

nabl · May 13, 2010

To change the color of a UIButton, I believe you have to use UIButtonTypeCustom (in Interface Builder choose Custom for Type in the Attributes Inspector)—there's no way I know of to change the UIButtonTypeRoundedRect colors. Once you use a custom button, you can use a background image for the buttons, or set the actual backgroundColor property of the UIButton if you don't use an image.

For example,

Code:

- (void)highlightSpaces:(int)one second:(int)two third:(int)three {
	if (one<9 && two<9 && three<9) {
		//Note the 9 tic tac toe buttons are contained in one NSMutableArray
		[[buttonsArray objectAtIndex:one] setBackgroundColor:[UIColor greenColor]];
		[[buttonsArray objectAtIndex:two] setBackgroundColor:[UIColor greenColor]];
		[[buttonsArray objectAtIndex:three] setBackgroundColor:[UIColor greenColor]];
	}
}

If you don't use a background image, the buttons will have whichever background color you set for them either in your view initialization or in Interface Builder until you run this method (unless you change them elsewhere), so there won't be much feedback for the user upon tapping the buttons—only the button labels will animate.

If you use images, you simply need to set the correct image for each state, which is easy either way. In Interface Builder, you simply choose from the State Configuration pop-up button which state you're changing and type in the image name (after adding it to your XCode project). In code, you'll use the setBackgroundImage:forState: method (the states are in the documentation for UIButton). In your case, you could perhaps use the green highlight image for the selected state and then set the buttons to selected at the end of the game.

Code:

- (void)highlightSpaces:(int)one second:(int)two third:(int)three {
	if (one<9 && two<9 && three<9) {
		//Note the 9 tic tac toe buttons are contained in one NSMutableArray
		[[buttonsArray objectAtIndex:one] setSelected:YES];
		[[buttonsArray objectAtIndex:two] setSelected:YES];
		[[buttonsArray objectAtIndex:three] setSelected:YES];
	}
}

One final note: I'd recommend not naming variables after actual numbers. It's very confusing to think that the integer variable one could really be holding the number 42. Perhaps firstIndex, secondIndex, and thirdIndex (or something similar) would be better choices.

xstep · May 13, 2010

The limited research I did on this suggested the only method was the use of an image as nabl mentions.

I did do a little project where I created a color image, via code, to match the size of the button, but when I set it as the background, it filled in the corners too. I don't know an easy way around that problem. I think you'd have to draw your color inside a circular area.

SoulRed12 · May 14, 2010

Alright, thanks. I'll look into using images.

xstep · May 20, 2010

I just found "Fun With UIButtons and Core Animation Layers" over at Cocoa is My Girlfriend.

Changing entire button background color

SoulRed12

nabl

xstep

SoulRed12

xstep

Shop Amazon