Tag Archives: UIButton

How to create a Facebook Like button in your iOS App

Adding a Facebook Like button to a website in HTML is extremely easy, thanks to Facebook’s Developer API. But it’s not as straightforward to implement it in an iOS App.

Thanks to UIWebViews we can create a small web view, perhaps 80 pixels tall, and load the Facebook Like button into it. Here’s how:

This content is for members only.

Now you can react however you see fit: open a URL in Safari, open the Facebook App, etc.

Another thing of note: since the button will be pulled in from Facebook.com, it will not be displayed when a user is not online. Check via UIWebViewDelegate and if the URL can’t be loaded present an image from your bundle instead.





How to add touch events to a UITableViewFooter (or header)

Table View headers or footers can’t be tapped. Sometimes however that’s exactly what we want to do.

In this example we’ll add a new UIView to out table view and add it to the table’s footer. Inside this view we’ll have a custom button which we’ll create with an image. We’ll also have a method that is called when the user presses the button:

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {

    // height of the footer
    // this needs to be set, otherwise the height is zero and no footer will show
    return 80;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {

    // creates a custom view inside the footer
    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 80)];

    // create a button with image and add it to the view
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 320, 78)];
    [button setImage:[UIImage imageNamed:@"image.png"] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(footerTapped) forControlEvents:UIControlEventTouchUpInside];

    [footerView addSubview:button];

    return footerView;
}

- (void)footerTapped {

    NSLog(@"You've tapped the footer!");
}

The result is a row at the bottom of the table view which stays in place even if the table is scrolled – ideal of anything users should see at all times.

You can do the same for table view headers, just add the code to the “headerInSeaction” variants of the methods above.

Example of a tappable footer image/button
Example of a tappable footer image/button




How to create a custom button

We can do this by setting properties of the UIButton for the states “normal” and “highlighted”. First we create pointers to the images, then we tell the button to use said images for each state:

If the button has transparency enabled use the “custom” setting in your Storyboard.
If the button should have a dynamic width to accommodate a changing text label you can use the following values:

UIImage *normal = [[UIImage imageNamed:@"greyoffbutton.png"]stretchableImageWithLeftCapWidth:12.0 topCapHeight:0.0];




How to change the text on a Button

You can set the title of a button depending on its control state. An unselected untoched button has a UIControlStateNormal, but Xcode will show you all the other options you have at your fingertips.

To access this property you need to create an IBOutlet on the button. If you also want the button to trigger an action you also have to define an IBAction.

[self.myButtonLabel setTitle:@"Your text here" forState:UIControlStateNormal];