Making shiny info button for About page?

[chuck]

I've noticed many iPhone apps have info buttons which looks like (i) and then they light up when tapped which takes you to the About page of the app. My app is complete except for this screen. Can someone tell me if this is a standard button and how I could add it in the Interface builder? I created my project as a View-based project, if that is relevant. Thanks in advance!

[mikeb]

I'm not 100% sure but I think you're talking about a UIButton with the type set to "Info Light" ([button setButtonType:UIButtonTypeInfoLight])

[mxweas]

I know it's in the Utility Application template when you go to make a new xcode project. UICatalog has it as well.

Max

[rjgrune]

In interface builder just add a new button and then in the button attributes, use the drop down menu and instead of custom you can choose info light or dark. That seems to be the simplest way...and i'm pretty sure the highlighting of the button happens as a default setting of that too.

[chuck]

Sorry, other projects came up in the meantime and am now just getting back to this issue.

I probably should've stated in my post that I was trying to put the info button on a navigation bar, but I assumed it didn't matter. So, I tried all the advice above and none of it works. I finally got it working by doing the following:

1. Create a button in the view (not the navigation bar!)
2. Set this button to be Info Light
3. Set the action for this button to be Touch Inside Up
4. Move the button to the navigation bar

If you move the button to the navigation bar before setting the info light property or the action, then you will no longer be able to access these attributes within the Interface Builder! In any case, thanks for the help to get me on the right track.

[doanelinde]

Wait, how did you just add it to the navigation bar? I'm having trouble doing that, my navigation bar isn't visible in interface builder, it's coded in..

[Dutch]

Originally Posted by doanelinde

Wait, how did you just add it to the navigation bar? I'm having trouble doing that, my navigation bar isn't visible in interface builder, it's coded in..

you can't add buttons to a navController... you need to set the leftBarButtonItem and rightBarButtonItem properties ...something like this...

UIBarButtonItem *b=[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"trash.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(deleteCurrentMessage)];
self.navigationItem.rightBarButtonItem=b;
[b release];

[doanelinde]

Ah lovely stuff, cheers.

But if

 self.navigationItem.leftBarButtonItem = self.editButtonItem;

adds an edit button, what's the property for an info button? I tried self.infoButtonItem but that didn't work...



Edit: Ok well I found a list of all the default buttons but the info button isn't there...

   UIBarButtonSystemItemDone,
   UIBarButtonSystemItemCancel,
   UIBarButtonSystemItemEdit,
   UIBarButtonSystemItemSave,
   UIBarButtonSystemItemAdd,
   UIBarButtonSystemItemFlexibleSpace,
   UIBarButtonSystemItemFixedSpace,
   UIBarButtonSystemItemCompose,
   UIBarButtonSystemItemReply,
   UIBarButtonSystemItemAction,
   UIBarButtonSystemItemOrganize,
   UIBarButtonSystemItemBookmarks,
   UIBarButtonSystemItemSearch,
   UIBarButtonSystemItemRefresh,
   UIBarButtonSystemItemStop,
   UIBarButtonSystemItemCamera,
   UIBarButtonSystemItemTrash,
   UIBarButtonSystemItemPlay,
   UIBarButtonSystemItemPause,
   UIBarButtonSystemItemRewind,
   UIBarButtonSystemItemFastForward,
   UIBarButtonSystemItemUndo,        // iPhoneOS 3.0
   UIBarButtonSystemItemRedo,

[Dutch]

The way to do this is as I told you.

1. Download this Image http://cowboyprogramming.com/wp-cont.../07/info44.png

2. Place into your app's bundle.

3. Use this code

UIBarButtonItem *b=[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"info44.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(deleteCurrentMessage)];
self.navigationItem.leftBarButtonItem=b;
[b release];

or

self.navigationItem.leftBarButtonItem=[[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"info44.png"] style:UIBarButtonItemStylePlain target:self action:@selector(showAbout)] autorelease];

[doanelinde]

Ok well that kind of works, but it's still not the standard info button, it's the info button inside a big chunky square button, which just looks wrong and unconventional.

There must be some standard way to put the actual info button up there rather than just stick an image inside the normal button no?

[Dutch]

Originally Posted by doanelinde

Ok well that kind of works, but it's still not the standard info button, it's the info button inside a big chunky square button, which just looks wrong and unconventional.

There must be some standard way to put the actual info button up there rather than just stick an image inside the normal button no?

Here are the two images:

info44.png:

info44_glowing.png:

And this is the code I used.

	UIButton *btn=[[UIButton alloc] init];
	[btn setImage:[UIImage imageNamed:@"info44.png"] forState:UIControlStateNormal];
	[btn setImage:[UIImage imageNamed:@"info44_glowing.png"] forState:UIControlStateHighlighted];	
	[btn addTarget:self action:@selector(showAbout) forControlEvents:UIControlEventTouchUpInside];
	[btn setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 20)];
	UIBarButtonItem *b=[[UIBarButtonItem alloc] initWithCustomView:btn];	
	self.navigationItem.rightBarButtonItem=b;
	[b release];
	[btn release];

To Produce This (it glows red when you click it).

[doanelinde]

That's perfect, thanks for the extra effort!

[evanovic]

Originally Posted by doanelinde

Ok well that kind of works, but it's still not the standard info button, it's the info button inside a big chunky square button, which just looks wrong and unconventional.

There must be some standard way to put the actual info button up there rather than just stick an image inside the normal button no?

another way to do this using the standard info button is :

UIButton * infoDarkButtonType = [[UIButton buttonWithType:UIButtonTypeInfoLight] retain];
	infoDarkButtonType.frame = CGRectMake(0.0, 0.0, 25.0, 25.0);
	infoDarkButtonType.backgroundColor = [UIColor clearColor];
	[infoDarkButtonType addTarget:self action:@selector(infoButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
	UIBarButtonItem *infoButton = [[UIBarButtonItem alloc] initWithCustomView:infoDarkButtonType];
	self.navigationItem.rightBarButtonItem = infoButton;
	[infoDarkButtonType release];
	[infoButton release];

[doanelinde]

Aha! Even better, cheers. Knew there must be some standard way with an info button up there, thanks for the help lads!

[dsinc14]

Originally Posted by Dutch

Here are the two images:

info44.png:

info44_glowing.png:

And this is the code I used.

	UIButton *btn=[[UIButton alloc] init];
	[btn setImage:[UIImage imageNamed:@"info44.png"] forState:UIControlStateNormal];
	[btn setImage:[UIImage imageNamed:@"info44_glowing.png"] forState:UIControlStateHighlighted];	
	[btn addTarget:self action:@selector(showAbout) forControlEvents:UIControlEventTouchUpInside];
	[btn setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 20)];
	UIBarButtonItem *b=[[UIBarButtonItem alloc] initWithCustomView:btn];	
	self.navigationItem.rightBarButtonItem=b;
	[b release];
	[btn release];

To Produce This (it glows red when you click it).

I want to have a info button with out a toolbar, is there anyway to do that?

[Dutch]

Originally Posted by dsinc14

I want to have a info button with out a toolbar, is there anyway to do that?

You should be able to use the same exact code - except change this:

self.navigationItem.rightBarButtonItem=b;

to this

[whateverUIView addSubview:b];

[emin3m]

UIButton *aboutButton = [UIButton buttonWithType:UIButtonTypeInfoLight];
[aboutButton addTarget:self action:@selector(aboutFoo:) forControlEvents:UIControlEventTouchUpInside];

[aboutButton setImage:[UIImage imageNamed:@"about.png"] forState:UIControlStateNormal];
	
UIBarButtonItem *iButton = [[UIBarButtonItem alloc] initWithCustomView: aboutButton];
    self.navigationItem.leftBarButtonItem = iButton;

dont tell me am leaking memory

[Dutch]

Originally Posted by emin3m

UIButton *aboutButton = [UIButton buttonWithType:UIButtonTypeInfoLight];
[aboutButton addTarget:self action:@selector(aboutFoo:) forControlEvents:UIControlEventTouchUpInside];

[aboutButton setImage:[UIImage imageNamed:@"about.png"] forState:UIControlStateNormal];
	
UIBarButtonItem *iButton = [[UIBarButtonItem alloc] initWithCustomView: aboutButton];
    self.navigationItem.leftBarButtonItem = iButton;

dont tell me am leaking memory

Is this a question, comment, or other?

[alyanm]

Originally Posted by Dutch

Is this a question, comment, or other?

Hey, thanks for this code, its been great for me. Unfortunately, since iOS4 it has stopped working for me -- the button is no longer visible, although tapping on the spot where it used to be does actually work. I don't suppose you have a fix for iOS4 perchance?

Thanks,
Alan

[dustbyter]

For this to work on iOS4.x you need to make a small change to the above code.
In short, you need to specify when creating the UIButton the frame to use, and to remove the image edge inset command.

My changes are below in red.

Hope this helps someone out

UIButton *btn=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
	[btn setImage:[[ImageCache sharedManager] loadImage:@"info.png"] forState:UIControlStateNormal];
	[btn setImage:[[ImageCache sharedManager] loadImage:@"info_glowing.png"] forState:UIControlStateHighlighted];	
	[btn addTarget:self action:@selector(showInfo:) forControlEvents:UIControlEventTouchUpInside];
	//[btn setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 20)];

[Objective Zero]

If your trying to get an info button into a UINavigationBar, just follow this tutorial. Best thing is, no code required!
http://www.youtube.com/watch?v=ejbTc5f-w4c

[chriskraus]

I have found another easy solution:

UIButton *btn = [UIButton buttonWithType:UIButtonTypeInfoLight];
btn.frame = CGRectMake(0.0, 00, 25.0, 25.0);
[btn addTarget:self action:@selector(showabout:) forControlEvents:UIControlEventTouchUpInside];
        
UIBarButtonItem *aboutButton = [[UIBarButtonItem alloc] initWithCustomView:btn];        
        
self.navigationItem.rightBarButtonItem = aboutButton;

It is short and you do not need any images.

[neerajNeeru]

thank u so much dutch,, i also searching for ths solution..

[MozyMac]

Thanks for sharing !