iPhone Developer Tips Visitor Stats:
122,631 Pageviews and 90,229 visitors in the past 30 days.


Creating Info Button and Increasing Touch Area

Posted on July 13, 2009 by John Muchow in User Interface


The info button offers a familiar symbol for prompting the user to request more information. This is a common button used for “About” screens. The iPhone SDK includes a specific button type for creating an info button, in both dark and light versions, which allows the button to appear over most backgrounds.

Creating an info button is as simple as shown below:

- (void)buttonPressed:(UIButton *)button
{
...
}
 
- (void)someMethod
{
  UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeInfoLight];
  infoButton.frame = CGRectMake(10, 10, 16, 16);
  infoButton.backgroundColor = [UIColor clearColor];
  [infoButton addTarget:self action:@selector(buttonPressed:) 
           forControlEvents:UIControlEventTouchUpInside];    
  [self.view addSubview:infoButton];
}

The image button will look as shown below. Notice the @selector, which specifies which method will be called when someone touches the info button.

Speaking of touching the info button, one change I recommend is to increase the frame size of info button so there is a larger area on the screen that is receptive to a touch. To keep the info button defined above in the same location, and at the same time define a larger touch area, you can change the frame as shown in the code below, which will increase the touch area 40 pixels in both the x and y directions.

infoButton.frame = CGRectMake(-10, -10, 56, 56);

Notice how we need to change the x and y locations (-10, -10) in order to keep the image in the same location on the screen, once we increase it’s size.

Another approach, which I prefer given it’s readability and clear intention to change the frame, is to setup the original frame, then update the x and y coordinates as well as the width and height.

infoButton.frame = CGRectMake(10, 10, 16, 16);
...
// Change the existing touch area by 40 pixels in each direction
// Move the x/y starting coordinates so the button remains in the same location
CGRect rect = CGRectMake(
     infoButton.frame.origin.x - 20,
     infoButton.frame.origin.y - 20,
     infoButton.frame.size.width + 40,
     infoButton.frame.size.height + 40);
[infoButton setFrame:rect];

Comments

15 Responses to “Creating Info Button and Increasing Touch Area”

Leave Comment

(required)

(required)