开发者

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 colo开发者_JAVA技巧rs and textures, such as in Foodish?


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜