Why does border thickness change with color of button (blue gets 2px border)?

Question

I'm working on a game, and for some reason the border thickness changes depending on what color the button is. This problem didn't happen until I put a background image on the app, so I'm not sure what's causing it. I took a couple screenshots to show what I mean. For some reason, the border thickness changes to 2px instead of 1px when the button that is being bordered is blue.

In addition, there are some problems with the borders on the control buttons. By control buttons, I mean the 6 buttons up top that are in the order of Red, Blue, Brown, Green, Purple, and Yellow.

Here are the screenshots:

I create the borders by putting a button in the background which starts at x-1,y-1 and has a width of width+2 and height of height+2. Here is a piece of code to give you an idea:

 UIButton *borderButton = [UIButton buttonWithType:UIButtonTypeCustom];
 borderButton.frame = CGRectMake((controlX-1), (controlY-1), 42, 32);
 borderButton.backgroundColor = [UIColor blackColor];
 [self.view addSubview:borderButton];

 UIButton *controlButton = [UIButton buttonWithType:UIButtonTypeCustom];
 [controlButton addTarget:self
                      action:@selector(doMove:)
            forControlEvents:UIControlEventTouchDown];
 controlButton.frame = CGRectMake(controlX, controlY, 40, 30);
 controlButton.tag = 500 + i;
 tmpColor = [self.colors objectAtIndex:i];
 controlButton.backgroundColor = tmpColor;
 [self.view addSubview:controlButton];

This code is taken from a loop, where controlX and controlY give x/y values for where the control buttons should start.

If anyone knows how to fix this I would greatly appreciate it. If I am going about borders in the wrong way and there is an easier and less problematic way of achieving the same look, I would be willing to do that as well, because there wouldn't be much code to change on my end. Thanks in advance to anyone who can help me solve this irritating UI glitch.

Answer 1

The easiest way to implement custom button with border is to use the button's layer:

#import <QuartzCore/QuartzCore.h>
...
UIButton *controlButton = [UIButton buttonWithType:UIButtonTypeCustom];
 [controlButton addTarget:self
                      action:@selector(doMove:)
            forControlEvents:UIControlEventTouchDown];
 controlButton.frame = CGRectMake(controlX, controlY, 40, 30);
 controlButton.tag = 500 + i;

 // Set layer properties
 controlButton.layer.borderWidth = 1.0;
 controlButton.layer.borderColor = [UIColor blackColor].CGColor;
 controlButton.layer.cornerRadius = 5.0; // if you want rounded corners...

 tmpColor = [self.colors objectAtIndex:i];
 controlButton.backgroundColor = tmpColor;
 [self.view addSubview:controlButton];

You may also need to check that button and other elements (like labels) are located at integral coordinates to avoid blurred images. To correct the coordinates use CGRectIntegral

PS For complex animations/game logic it is better to use frameworks like Cocos2D