Styled UITableViewCell (trying to copy Facebook iPhone App Look)

Question

On the Facebook iPhone app, there is a slideout view on the left side which shows a UITableView.

I'm trying to copy the look of this table, with each cell having what seems to be a customized border (looks like a very slim light grey and black line?). In addition, when selecting the cell, the cell is highlighted a dark grey, rather than the default blue.

enter image description here

I tried searching on stackoverflow and indeed there was a similar question, but the only two responses replied to use the Three20 library.

I would like to know how to achieve this same look with UIKit and not having to use the Three20 library.

Any help on how to reproduce this specific style of UITableViewCell would be greatly appreciated!

EDIT #1: To clarify, I know how to make the UITableViewCells themselves, with the images and the text. The part I don't know how to do is to customize the borders and the selection color to make it look like the Facebook example image.

EDIT #2: Just to be sure, I'm also not asking how to make a slide out view. I'm merely asking how to style the table according to the screenshot below of the Facebook iphone app. :)

Thank you!

score 1 · Accepted Answer · answered Mar 23 '12 at 11:02

1

It can be done by using images for custom rows and animation for its sliding effect

answered Mar 23 '12 at 11:02

Dushyant Singh

721
4
13

I was just about to put that in an edit. I found this link: http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html and it seems that he is simply using images for the rows. So apart from using images for each row, there isnt much you can do with UIKit? I thought that there might be some CALayer trickery... – kurisukun Mar 23 '12 at 11:03
actully you can change the colors of cell background and separator , but that wont give you the feel you are looking for. For that purpose using images is the best option and easy one too and it will give you the same effect – Dushyant Singh Mar 23 '12 at 11:17
Thank you, that's what I was suspecting! :) – kurisukun Mar 23 '12 at 11:32

score 0 · Answer 2 · answered Nov 01 '12 at 12:34

Here is a Slider with a left and right menu, you can obviously disable the right one in the code like I did!

Slideout Menu: DDMenuController

Here's a few customizations I did that looks similar like the FB one, just not the pictures!

LeftController.m

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

- (void)viewDidLoad {
[super viewDidLoad];

navBarMenuArray = [[NSArray alloc] initWithObjects:
                   @"My Photos",
                   @"My Friends",
                   @"Inbox",
                   @"Stores",
                   @"Offers",
                   @"Settings",nil];

navBarImagesArray = [[NSArray alloc] initWithObjects:
                     @"photos.jpg",
                     @"friends.jpg",
                     @"inbox.jpg",
                     @"stores.jpg",
                     @"settings.jpg", nil];

searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0.0, 0.0, 240.0, 45.0)];
searchBar.tintColor = UIColorFromRGB(0x0075bb);
searchBar.placeholder = @"Search a brand or store...";
[self.view addSubview:searchBar];
[searchBar release];

if (!_tableView) {
    //UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];

    UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 44, 320, 506) style:UITableViewStylePlain];
    tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    tableView.delegate = (id<UITableViewDelegate>)self;
    tableView.dataSource = (id<UITableViewDataSource>)self;
    [self.view addSubview:tableView];
    self.tableView = tableView;
    }
}

- (void)viewDidUnload {
[super viewDidUnload];
self.tableView = nil;
}

- (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section {
    return navBarMenuArray.count;
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

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

    static NSString *CellIdentifier = @"CellIdentifier";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    cell.textLabel.font = [UIFont fontWithName:@"ArialMT" size:17];
    cell.textLabel.text = [navBarMenuArray objectAtIndex:indexPath.row];
    cell.textLabel.textColor = UIColorFromRGB(0xa2a9b9);
    cell.textLabel.shadowColor = UIColorFromRGB(0x212838);
    cell.textLabel.shadowOffset = CGSizeMake(1.0, 1.0);
    cell.textLabel.backgroundColor = UIColorFromRGB(0x32394b);
    self.tableView.backgroundColor = UIColorFromRGB(0x32394b);
    self.tableView.separatorColor = UIColorFromRGB(0x262d3d);
    return cell;
}

Styled UITableViewCell (trying to copy Facebook iPhone App Look)

2 Answers2