UIButton - 默认状态下的图像，选定状态下的标题

Question

So I'm working my way through the second assignment for the Winter 2013 Stanford iOS/Objective-C class through iTunes U, and the very last part is driving me crazy.

This is a card matching game. Each card is represented in the view as a UIButton. When the card object is face up the UIButton is in selected state, and when the card is face down the UIButton is in default state. A card can also be disabled after a match is found.

The assignment asks to put an image on the back of the cards. In other words, each UIButton needs to show an image when it is in the default state, but then JUST the title property when it is in the selected or disabled state.

Seems simple enough...

First I tried this in the GUI (Storyboard), setting the background image to my image, and then making sure both the selected and disabled states had no image. This resulted in the image showing, but then the title text just showing over the image. Some searching turned up the reason for this: unless explicitly told so UIButton defaults all other UIControlStates to UIControlStateNormal.

Now I've been trying to get this to work programmatically and still no luck. All the UIButtons which are cards are in an IBOutletCollection which is an NSArray (cardButtons). In the viewDidLoad function I have a for loop that goes through all the buttons:

UIImage *cardBack = [UIImage makeSomeImage...];
for (UIButton *oneButton in cardButtons) {
[oneButton setBackgroundImage:cardBack forState:UIControlStateNormal];
[oneButton setBackgroundImage:nil forState:UIControlStateSelected];
}

Which still gives me the same problem. It is definitely successfully setting the image for the default state, but then when I click on the button in the simulator, the image remains while the title simply displays over it.

In both the GUI and programmatically I can get a different image to show up in selected and disabled state fine. All I have to do is add:

[oneButton setBackgroundImage:anotherImage forState:UIControlStateSelected];

To the loop and all the buttons show that other image when selected.

What I cannot do, and what is driving me crazy, is trying to get there to be no background image when selected so that the UIButton only shows the title...

Edit:

While not an ideal solution (I think something might be possible using the imageView property in UIButton, but I'm not sure), I have come up with a somewhat tacked-on feeling way to make this work.

First I made the UIImage I'm using into a class property called cardBackImage.

Then, in the updateUI function that loops through all the card buttons each time a change is made to the model, I added this line of code:

[cardButton setBackgroundImage:(oneCard.isFaceUp ? nil : self.cardBackImage) forState:UIControlStateNormal];

So every time a card object is "flipped" that UIButton has to load or unload a UIImage into or out of its instance variable. Bleh... like I said, not ideal, but it works.

Answer 1

why dont you try the image Property instead of backgroundImage of the button ?It will hide the title text when an image is there

UIButton *button;
[button setImage:[UIImage imageNamed:@"someImage"] forState:UIControlStateNormal];

Answer 2

I would suggest to simple change the image when the button changes it's state ie get's touched. I'd write a method like this:

- (void)swapBackgroundImagesOfButton:(UIButton *)button
{
    UIImage *normalImage = [button imageForState:UIControlStateNormal];
    UIImage *selectedImage = [button imageForState:UIControlStateSelected];

    [button setImage:selectedImage forState:UIControlStateNormal];
    [button setImage:normalImage forState:UIControlStateSelected];
}

Then, instead of setting the selected state of the button, you simply call that method, when you the image to show or hide.

Answer 3

Here is a simpler solution that let you use just the storyboard to set the UIButton image and title, according to the state. Inside the attribute inspector you set the button image for default state, then you set the button title for the selected state and digit a whitespace character for the image as you can see

then you can change the state programmatically by self.button.isSelected = true and see the image turn into text