CODEWITHSUNDEEP
cocoa-touchuitableviewuser-interface
cfischer
cfischer

Reputation: 24912

How to use custom colors and textures in an iOS user interface?

How do you customize UITableViews and the overall UX of an iOS app to use custom colors and textures, such as in Foodish?

Upvotes: 1

Views: 359

Answers (1)

memmons
memmons

Reputation: 40502

That is a very open-ended question. They are doing a lot of different things. I'll address a few of them.

Custom Toolbar
They are creating a custom toolbar extension which uses an image as a background pattern. To do this, create a category on UINavigationBar

@implementation UINavigationBar(CustomBackground)

+ (UIImage *) bgImagePortrait {
    static UIImage *image = nil;
    if (image == nil) {
        image = [[UIImage imageNamed:@"top_bar_portrait"] retain];
        NSAssert(image, @"Image specified must be valid.");
    }
    return image;
}

+ (UIImage *) bgImageLandscape {
    static UIImage *image = nil;
    if (image == nil) {
        image = [[UIImage imageNamed:@"top_bar_landscape"] retain];
        NSAssert(image, @"Image specified must be valid.");
    }
    return image;
}

- (void) drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
    if ([self isMemberOfClass:[UINavigationBar class]] == NO) {
        return;
    }

    UIImage *image = (self.frame.size.width > 320) ?
             [UINavigationBar bgImageLandscape] : [UINavigationBar bgImagePortrait];

    CGContextClip(ctx);
    CGContextTranslateCTM(ctx, 0, image.size.height);
    CGContextScaleCTM(ctx, 1.0, -1.0);
    CGContextDrawImage(ctx, CGRectMake(0, 0, self.frame.size.width, 
                        self.frame.size.height), image.CGImage);

}

Custom Toolbar Buttons
The buttons on the toolbars are just custom buttons with images on them. You can create a custom UIBarButtonItem using the initWithCustomView constructor:

[[UIBarButtonItem alloc] initWithCustomView:container]

Paging ScrollView
I'm not sure they are using a table view at all. It looks like a custom layout of a paging scroll view to me. Seems like it would be fairly straightforward to create a method that takes a collection of images and lays them out on the scroll page in a staggered layout.

Upvotes: 2

Related Questions