Is there a way to make the Facebook button appear correctly in a UITableView?

Question

I'm trying to get Facebook Connect functionality working in my iPhone app. I'm wondering how to get the button lined up correctly in my UITableView:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

    if (indexPath.section == 0){
        if (indexPath.row == 0){

        }
    }
    if (indexPath.section == 1){
        if (indexPath.row == 0){
            cell.textLabel.text = @"Connect with Facebook";
            cell.accessoryView = login;

        }
    }

    return cell;

I've tried using the accessoryView, but it turns out like this:

Also the button only appears when if I tap on the cell.

Please help if you can!

Thanks.

Answer 1

The IMHO easiest way to layout a mostly static UITableView is using InterfaceBuilder.

Answer 2

The accessoryView is definitely going to be framed over to the right, since "accessory" generally refers to the little expando arrow widgets on the right of table cells that open up new pages, etc.

You can have a lot of influence over the layout of the cell and position the FB button wherever you want if you add that button as a subview of the cell's view. You should very definitely check out this sample project which demonstrates how to accomplish a whole slew of custom cell types.

Answer 3

I just came across this self-same issue. The working code I have looks like this:

FBLoginButton* fbbutton = [[FBLoginButton alloc] initWithFrame:CGRectMake(cellwidth - 30.0 - 10.0,
                                                                          (cellheight - 30.0) / 2.0,
                                                                          90.0, 30.0)];
fbbutton.style = FBLoginButtonStyleNormal;
fbbutton.session = session;

cell.accessoryView = fbbutton;
cell.textLabel.text = @"Facebook";
[fbbutton release];

(Obviously I used constants rather than hard-coding the size of the Facebook button.)

The two key bits for the placement of the button is setting the frame and adding the button to the accessoryView. (Adding it to the contentView could also work, though you might need to add the caption manually.)

As for the button only appearing when you press the button, I managed to fix that by explicitly setting the button style. I guess that's a bug in the Facebook Connect library.