I have a UITableViewController. I want a "toolbar-ish" component at the bottom.
I started by using a background image and a button. In interface builder, I added them to the bottom of the iPhone screen. The problem I ran into was that the background image and button scrolled with the table. I obviously need this fixed at the bottom.
Not finding too much direction online, I decided to customize a UIToolbar to look how I want since the position is fixed by default. In my initWithNibName for my UITableViewController, I have:
UIImage *shuffleButtonImage = [UIImage imageNamed:#"shuffle_button.png"];
NSArray* toolbarItems = [NSArray arrayWithObjects:
[[UIBarButtonItem alloc] initWithImage:shuffleButtonImage
style:UIBarButtonItemStylePlain
target:self
action:#selector(push:)],
nil];
[toolbarItems makeObjectsPerformSelector:#selector(release)];
self.toolbarItems = toolbarItems;
The problem I am running into now is that the "shuffleButtonImage" is not showing up properly. The shape of the button shows up fine but it is colored white and therefore does not look like the image.
Does anyone know why a "white image" would be showing instead of the actual image?
Also does it sound like a good idea to customize a UIToolbar or is there a simple way to ensure a fixed position "toolbar-ish" component.
To reiterate - my "toolbar-ish" component only needs to be one button at the button of my UITableView. The single button has a gradient color background that I create with an image.
From the description of the "image" parameter in the documentation for the initWithImage:style:target:action: method of the UIBarButtonItem class:
The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points. The alpha values in the source image are used to create the images—opaque values are ignored.
Basically, the image you provide is used as a mask to create an outline/shadow for the actual button image. I do not believe you can change this behavior for a UIBarButtonItem.
As an alternative, you can create a UIButton (with your color image) and then set it as the custom view for your UIBarButtonItem, as suggested here. If you go that route, setting the bounds of the UIButton to match the bounds of the UIBarButtonItem might also be necessary (see this discussion).
Your image may be showing up blank because it's not being found in your resources. Put a breakpoint after your definition of shuffleButtonImage and check it's not nil.
Related
I am trying to achieve this look for my back button:
But no matter where I sample the shade of green in photoshop, it never comes out correct. For example:
Any suggestions on how I can achieve the exact same look?
The tint color is exactly that—a tint. iOS uses that color as a base to create a nice-looking button in the style of normal navigation bars.
If you want to control your button's appearance more precisely than tinting allows, your best bet is to create a set of images and use -setBackButtonBackgroundImage:forState:barMetrics: to use them. If you want this look for all bar button items in your app, use that method on +[UIBarButtonItem appearance], rather than a specific bar button item.
In order to produce the BackBarButtonItem's gradient, iOS does the following:
Applies the tint color that you specify
Applies a transparent overlay on top of the back button
Here are the retina-display overlays it uses for iPhone (these were obtained using UIKit-Artwork-Extractor):
Default Back Button Overlay
Pressed Back Button Overalay
Unfortunately, there is no way to tell iOS / UIBarButtonItem NOT to render these overlays on the back button (thereby, this gives the default navigation bar and buttons a pretty consistent look across all apps).
If you don't want to have this overlay applied (it will darken the button in both states), you have to create your own back button images - for the default and pressed states, portrait and landscape orientations, and retina and non-retina displays (8 total images).
As Brent Royal-Gordon mentions in his answer, you can apply these images using the appearance proxy for UIBarButtonItem to have them used throughout the app. In example, you'd set the default background image state like this for portrait orientation:
UIImage *defaultBackImage = [UIImage imageNamed:#"My-Default-Back-Button"];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:defaultBackImage forState: UIControlStateNormal barMetrics:UIBarMetricsDefault];
It looks like the button is adding another semi-transparent gray layer over the button. I can't check right now but I would look for settings to disable the semi-transparent layer effect or try different button style/states.
I'm presenting a popover from a bar button item, and the arrow of the popover is not centred horizontally beneath the item:
I'd like to budge that over to the left by a few pixels.
It doesn't occur on all UIBarButtonItem instances, just once I create with custom images. So for instance, the rightmost button item has a perfectly centred arrow and it's instantiated using a system item:
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:#selector(shareButtonWasPressed:)]
But if I use a custom image,
[[UIBarButtonItem alloc] initWithImage:slideshowImage style:UIBarButtonItemStylePlain target:self action:#selector(slideshowButtonWasPressed:)]
... it's off-centre. I've tried adjusting the imageInsets of the button item, but it stretches the image. Any suggestions?
Turns out the easiest way to do this is implement your own subclass of UIPopoverBackgroundView and use it to adjust where it displays the arrow. This involves a lot of custom drawing code and I couldn't have done it without a designer, but we wanted a custom background anyway, so it was worth it.
Still no idea how I'd fix this without what's arguable a work around.
I'm trying to change the appearance of my UIButtons int the view as well as UIBarButtonItems in the NaviBar or toolBar or SegControl.
And here are 2 questions.
NO.1. How can I set customed background pictures to the buttons I mentioned while I can change their titles programmaticly? I mean I found that if I set the background of a button, the title seems to be concealed by the background image?
NO.2. I tried to add the text of the title directly on the png, ( which is actually a imperfect way since I need to change the title during the runtime). Anyway it works out both the image and the text, but the resolution seems to be reduced because the text became sort of blurred.
Can anyone give me some advices how to achieve it? Thanks a lot!
NO.1 The button title should not be obscured by the background image. Are you setting the button's image in code like this:
[btn setBackgroundImage:image forState:UIControlStateNormal];
? You may be instead setting the button's image property (which is different from its background image).
NO.2 You really don't want to be adding text to the button PNG, for the exact reason you mention. Buttons in iOS are designed to display images and text the way you want - put your energy into getting the built-in buttons working the way they should. There are umpteen billion tutorials out there about how to do this.
What effects does iOS add to UIBarButtonItem images? I want to put three of my "buttons" in a UISegmentControl segment to visually group them. However, UISegmentControl does not add the same effects that UIBarButtonItem does.
There seems to be a black shadow just above the image in the UIBarButtonItem, but I haven't been able to match it through experimentation.
I don't mind doing this in code or in a graphic editor, though I'd prefer code. :)
Apple's docs say this, which I assume is the same basic approach:
Toolbar images that represent normal and highlighted states of an item derive from the image you set using the inherited image property from the UIBarItem class. For example, the image is converted to white and then bevelled by adding a shadow for the normal state.
My main concern is matching the shadow; the base colour is not black, and I don't know the opacity.
I'm trying to put a UIBarButtonItem with a custom image on a UINavigationBar. When I do however, the image doesn't look right. I want the button on the navigation bar to look like the one below it.
(This is a screenshot from the simulator, by the way, not Interface Builder)
I created the custom UIBarButtonItem by creating a UIButton, using the cog-wheel image as a background, and then simply dragging it to the the right bar button item place in Interface Builder. Seeing as creating a UIBarButtonItem programmatically with the aforementioned UIButton as its 'custom view' (-initWithCustomView) has the same result, I believe this is what is happening as well.
What I don't understand is why the button image lost its nice edges and color gradient when I added it to the navigation bar wrapped in a bar button item. Can anyone tell me?
Thanks in advance.
The image hasn't changed. It is the same. Its just that when put on different backgrounds, it is showing differently. You should consider increasing the contrast.