Set image background for UINavigationController

[Rodrigo Alves Vieira]

Hi everybody,

I want to add a background image to my UINavigationController and still keep the central icon, just like Everclip does http://itunes.apple.com/us/app/everclip/id536058926?mt=8

Currently, my code looks like this (in app_delegate.rb) I have:

...

items_controller = ProductsController.alloc.initWithNibName(nil, bundle: nil)

@window.rootViewController = UINavigationController.alloc.initWithRootViewController(items_controller)

...

then in my items_controller.rb I have:

...

self.navigationItem.titleView = UIImageView.alloc.initWithImage(UIImage.imageNamed('logo.png')) # Declaring central icon/logo

... 

Important to note that it might need tell the program to repeat the bg image through the UINavigationController. How can I do that?

Thanks,

-- rodrigo alves vieira

[Joel Bryan Juliano]

What I have is a whole 320x44 image, I think you can clip each 44x44
image aside to each other to make a whole 320x44 navigational image.

> --
>
>
>

[Ruben Fonseca]

You could use the iOS5 appearance APIs to set the whole image like this:

image = UIImage.imageNamed('navbar-portrait.png')
self.navigationBar.appearance.setBackgroundImage(image, forBarMetrics:UIBarMetricsDefault)

and again for landscape

image = UIImage.imageNamed('navbar-landscape.png')
self.navigationBar.appearance.setBackgroundImage(image, forBarMetrics:UIBarMetricsLandscapePhone)

If you have a repetable pattern image, you can easly use it to fill the
navigation bar, by creating a strechable image:

image = UIImage.imageNamed('navbar.png').resizaableImageWithCapInsets(UIEdgeInsetsMake(top, left, bottom, right))

and then use it like above on the navigationBar appearance proxy.

Cheers
Ruben

> --
>
>
>

[Rodrigo Alves Vieira]

Tried that, but looks like RM can't handle the coordinates:

main)> 2012-07-22 10:48:50.281 Itema[5511:ec03] items_controller.rb:16:in `viewDidLoad': undefined local variable or method `top' for #< ItemsController:0x8896c60> (NameError)
2012-07-22 10:48:50.285 Itema[5511:ec03] *** Terminating app due to uncaught exception 'NameError', reason: 'items_controller.rb:16:in `viewDidLoad': undefined local variable or method `top' for #<ItemsController:0x8896c60> (NameError)

How do I define top and the other coordinates?

-- rodrigo alves vieira

> --
>
>
>

[Ruben Fonseca]

Hi Rodrigo,

On Sun Jul 22, 2012 at 10:50:23AM -0300, Rodrigo Alves Vieira wrote:
> Tried that, but looks like RM can't handle the coordinates:
>
> main)> 2012-07-22 10:48:50.281 Itema[5511:ec03] items_controller.rb:16:in `viewDidLoad': undefined local variable or method `top' for #< ItemsController:0x8896c60> (NameError)
> 2012-07-22 10:48:50.285 Itema[5511:ec03] *** Terminating app due to uncaught exception 'NameError', reason: 'items_controller.rb:16:in `viewDidLoad': undefined local variable or method `top' for #<ItemsController:0x8896c60> (NameError)
>

by top, left, bottom right I meant the number of pixels :) I think this
blog post explains it very simply

http://mobiledevelopertips.com/user-interface/ios-5-uiimage-and-resizableimagewithcapinsets.html

Also, if you have access to WWDC 2012 videos, check session 216
"Advanced appearance customization on iOS", and the correspondant slides
from page 19 on.

Cheers
Ruben

> --
>
>
>

[Rodrigo Alves Vieira]

Oh, I see. How dumb I was!

But now I get this error

(main)> 2012-07-22 11:23:09.575 Brechoh[8970:ec03] items_controller.rb:23:in `viewDidLoad': undefined method `resizaableImageWithCapInsets' for #<UIImage:0x8522510> (NoMethodError)
2012-07-22 11:23:09.579 Brechoh[8970:ec03] *** Terminating app due to uncaught exception 'NoMethodError', reason: 'items_controller.rb:23:in `viewDidLoad': undefined method `resizaableImageWithCapInsets' for #<UIImage:0x8522510> (NoMethodError)

My code looks like this in viewDidLoad:

bg_image = UIImage.imageNamed('texture.png').resizaableImageWithCapInsets(UIEdgeInsetsMake(12, 12, 12, 12))

self.navigationBar.appearance.setBackgroundImage(bg_image, forBarMetrics:UIBarMetricsLandscapePhone)

In this very method I am also using adding a button to self.navigationItem. Oh yes, what's the difference between navigationItem and navigationBar?

Am I doing any mistake?

Thanks,

-- rodrigo alves vieira

> --
>
>
>

[Ruben Fonseca]

.resizaableImageWithCapInsets vs .resizableImageWithCapInsets :)

Ruben

> --
>
>
>

[Rodrigo Alves Vieira]

Hi,

it keeps throwing a NoMethodError at me :(

Full stack trace:

main)> 2012-07-24 11:08:19.598 Brechoh[5142:ec03] products_controller.rb:16:in `viewDidLoad': undefined method `resizableImageWithCapInsets' for #<UIImage:0x8a7b3e0> (NoMethodError)

2012-07-24 11:08:19.604 Brechoh[5142:ec03] *** Terminating app due to uncaught exception 'NoMethodError', reason: 'products_controller.rb:16:in `viewDidLoad': undefined method `resizableImageWithCapInsets' for #<UIImage:0x8a7b3e0> (NoMethodError)

My code looks like this:

bg_image = UIImage.imageNamed('texture.png').resizableImageWithCapInsets(UIEdgeInsetsMake(12, 12, 12, 12))

self.navigationBar.appearance.setBackgroundImage(bg_image, forBarMetrics:UIBarMetricsLandscapePhone)

Apparently, the method name is correct: http://mobiledevelopertips.com/user-interface/ios-5-uiimage-and-resizableimagewithcapinsets.html

I can't figure out what is happening, I appreciate any possible help.