how to extend UIToolbar to other objects like safari

Question

Im trying to achieve the effect like Safari on Mac and iPad have with tabbing, With the navigation bar and the current tab are one. How can i extent the UINavigationBar/UIToolbar to merge with a UIView subclass to look as 1?

Answer:

I Created my own UIToolbar subclass, and used the drawRect:(CGRect)rect method to make the UIToolbar the same color as my UIView subclass that is only that color.

    - (void)drawRect:(CGRect)rect
{
    // Drawing code
    //// General Declarations
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = UIGraphicsGetCurrentContext();

    //// Color Declarations
    UIColor* gradientColor = [UIColor colorWithRed: 0.916 green: 0.916 blue: 0.916 alpha: 1];
    UIColor* gradientColor2 = [UIColor colorWithRed: 0.811 green: 0.811 blue: 0.811 alpha: 1];

    //// Gradient Declarations
    NSArray* gradientColors = [NSArray arrayWithObjects:
                               (id)gradientColor.CGColor,
                               (id)gradientColor2.CGColor, nil];
    CGFloat gradientLocations[] = {0, 1};
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)gradientColors, gradientLocations);

    //// Rectangle Drawing
    UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: CGRectMake(-1, 0, 769, 45)];
    CGContextSaveGState(context);
    [rectanglePath addClip];
    CGContextDrawLinearGradient(context, gradient, CGPointMake(383.5, -0), CGPointMake(383.5, 45), 0);
    CGContextRestoreGState(context);


    //// Cleanup
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

score 0 · Answer 1 · answered Aug 15 '12 at 15:33

0

It's a custom control with custom appearance. Use UIImageViews with stretchable UIImages and recreate the GUI in PNG images. Or use Core Graphics to render the tabs' appearance. (PaintCode might help with that).

answered Aug 15 '12 at 15:33

DrummerB

39,814
12
105
142

yes i own paint code, i made the tabs that way with stretchable images and so it can make tabs any size. im not so good though, and how would i make it myself? because they also have uibarbuttonitems so i would have to code that to add the same way wouldn't i? – Maximilian Litteral Aug 15 '12 at 16:12
Just put your tab bar below the navigation bar with the buttons. – DrummerB Aug 15 '12 at 16:19
i have the tabs already:P so thats done, just need to know how to merge it then with the same color, i tried color picking tools and overlapping it and using the color, doesnt look the same – Maximilian Litteral Aug 15 '12 at 16:25
Post a screenshot. I don't understand what the problem is. – DrummerB Aug 15 '12 at 16:39
in safari on mac and ipad theres a toolbar/navigation bar, then the tab objects are joined in with it, so if its red, the current tab would be red to and such. how do i get my tabs(can be UIViews, right now UIButtons) to join the toolbar so the color keeps going and it looks like 1 – Maximilian Litteral Aug 15 '12 at 17:29
[Observe](https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/KeyValueObserving/KeyValueObserving.html#//apple_ref/doc/uid/10000177i) the toolbar's tintColor property. Then redraw your tabs if needed with the same color. – DrummerB Aug 15 '12 at 17:44

score 0 · Accepted Answer · answered Dec 05 '12 at 01:52

I Created my own UIToolbar subclass, and used the drawRect:(CGRect)rect method to make the UIToolbar the same color as my UIView subclass that is only that color.

    - (void)drawRect:(CGRect)rect
{
    // Drawing code
    //// General Declarations
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = UIGraphicsGetCurrentContext();

    //// Color Declarations
    UIColor* gradientColor = [UIColor colorWithRed: 0.916 green: 0.916 blue: 0.916 alpha: 1];
    UIColor* gradientColor2 = [UIColor colorWithRed: 0.811 green: 0.811 blue: 0.811 alpha: 1];

    //// Gradient Declarations
    NSArray* gradientColors = [NSArray arrayWithObjects:
                               (id)gradientColor.CGColor,
                               (id)gradientColor2.CGColor, nil];
    CGFloat gradientLocations[] = {0, 1};
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)gradientColors, gradientLocations);

    //// Rectangle Drawing
    UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: CGRectMake(-1, 0, 769, 45)];
    CGContextSaveGState(context);
    [rectanglePath addClip];
    CGContextDrawLinearGradient(context, gradient, CGPointMake(383.5, -0), CGPointMake(383.5, 45), 0);
    CGContextRestoreGState(context);


    //// Cleanup
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

how to extend UIToolbar to other objects like safari

2 Answers2