Styled UITableViewCell (tries to copy Facebook App App App)

The iPhone app for iPhone has a slide view on the left side that shows UITableView


I'm trying to copy the look and feel of this table, with each cell having what appears to be a custom border (looks like a very thin light gray and black line?). Also, when you select a cell, the cell is highlighted in dark gray instead of blue by default.

enter image description here

I tried searching on stackoverflow and there was indeed a similar question, but only two answers answered using the library Three20


I would like to know how to achieve the same look with UIKit

and not use a library Three20


Any help on how to reproduce this particular style UITableViewCell

would be greatly appreciated!

EDIT # 1: To clarify, I know how to render UITableViewCells

myself, with images and text. The part I don't know how to do is adjust the borders and highlight color so they look like a Facebook figurative image.

EDIT # 2: To be sure, I also don't ask how to take a picture. I'm just asking how to style the table as per the screenshot below of the Facebook iphone app. :)



source to share

2 answers

This can be done using images for custom strings and animations for its sliding effect



Here is a left and right menu slider, you can obviously turn off the correct code like I did!

Shutdown menu: DDMenuController

Here are a few tweaks I made that look like FB, not photos!


#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",

navBarImagesArray = [[NSArray alloc] initWithObjects:
                     @"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;




All Articles