UINavigationBar texture background

Question

I looked on SO, googled it, tried myself, and I just can't come up with a way to draw a UINavigationBar with a background texture.

Before you start pointing me out to overriding drawRect, setBackgroundImage:forBarMetrics: or any other similar method, let me explain:

What I want is to draw a navigation bar with my background texture (sample attached) and still keep the translucent gradient effect provided by UINavigationBar. From what I searched it looks like the only way to do this is to include that effect in the image itself, but I would rather use the UINavigationBar effect (dynamically, you see) or if there's no way around create a UIImageView, use Quartz to draw the effect and add it as a UINavigationBar subview.

What do you think? Is there any way around drawing the effect in Photoshop?

Thanks

enter image description here

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

You can still try to insert your custom subview in the correct index of your UINavigationBar. But that code would be different on every iOS version. Also you would loose automatic resizing (when rotating). But probably that would be the easiest way for you to go.

Better would be, to draw the gloss/reflection effects directly on the image and to use the standard methods, that you mentioned already. Example: iPhone Glossy Icons Using Core Graphics

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 30 '12 at 12:52

calimarkus

9,955
2
28
48

I've tried inserting it on the index 1 (iOS 5), it works, but doesn't draw the effect, it seems the effect is inside the "background view" inside the UINavigationBar. – fbernardo Mar 30 '12 at 12:55
what about index 0? or on another point in the total hierarchy? – calimarkus Mar 30 '12 at 12:59
Does tintColor = [UIColor clearColor] work? Than you could put it below. – calimarkus Mar 30 '12 at 12:59
i guess its best to draw it right into the image. right in your image editor or if you need it dynamically, use quartzcore/coreimage to draw the reflection onto the uiimage. – calimarkus Mar 30 '12 at 13:27
look eg here: http://stackoverflow.com/questions/5541457/iphone-glossy-icons-using-core-graphics – calimarkus Mar 30 '12 at 14:22
I will take some time to try that, I'll let you know as soon as I tried it. Thanks. – fbernardo Mar 30 '12 at 14:41

score 2 · Accepted Answer · answered Apr 01 '12 at 23:48

Answering to my own question:

It seems that the usual way is indeed to include the shiny gradient on the image itself, but if I manage to do it programmatically by drawing the gradient with CAGradientLayer.

The code I used is

    //Create a image view
    UIImageView *imgView = [[UIImageView alloc] initWithImage:image];    
    imgView.frame = navBar.bounds;
    imgView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;

    //Create a gradient layer
    //Thanks to Kris Johnson's code
    //https://bitbucket.org/KristopherJohnson/gradientbuttons/src/tip/Classes/GradientButton.m    
    CAGradientLayer *shineLayer = [CAGradientLayer layer];
    shineLayer.frame = imgView.bounds;
    shineLayer.colors = [NSArray arrayWithObjects:
                         (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
                         (id)[UIColor colorWithWhite:1.0f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:0.75f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:0.4f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
                         nil];
    shineLayer.locations = [NSArray arrayWithObjects:
                            [NSNumber numberWithFloat:0.0f],
                            [NSNumber numberWithFloat:0.5f],
                            [NSNumber numberWithFloat:0.5f],
                            [NSNumber numberWithFloat:0.8f],
                            [NSNumber numberWithFloat:1.0f],
                            nil];


    //Add the gradient layer to the imageView
    [imgView.layer insertSublayer:shineLayer atIndex:1];    

    //Add the imageview to the navbar
    [navBar insertSubview:imgView atIndex:1];

score -1 · Answer 3 · answered Mar 30 '12 at 12:50

-1

Try this:

   self.navigationBar.tintColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"image.png"]];

answered Mar 30 '12 at 12:50

demon9733

1,054
3
13
35

1

It doesn't work that way, if you do that the navigation bar stays black. – fbernardo Mar 30 '12 at 12:58

score -1 · Answer 4 · answered Mar 30 '12 at 13:19

-1

try this:

if ([self.navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)])
{
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"your_navbar.png"] forBarMetrics:UIBarMetricsDefault];
}
else
{
    UIImageView *imageView = imageView = [[UIImageView alloc] initWithImage:
                     [UIImage imageNamed:@"your_navbar.png"]];
    [imageView setTag:1];
    [self.navigationController.navigationBar insertSubview:imageView atIndex:0];
    [imageView release];
}

answered Mar 30 '12 at 13:19

TompaLompa

949
6
17

sorry... got too triggerhappy – TompaLompa Mar 30 '12 at 14:07
So, do you have any valuable input regarding the issue? – fbernardo Mar 30 '12 at 14:10
Sadly no... Despite for the obvious answer of writing good and neat solutions, why wont you settle with the previously mentioned solutions? – TompaLompa Mar 30 '12 at 14:27
I think I explained why those solutions seem bad to me, I prefer something dynamic instead of having to make resources specific for UINavigationBar, buttons, etc... – fbernardo Mar 30 '12 at 14:40

UINavigationBar texture background

4 Answers4