I have created a flexible navigation bar in my app that will show custom buttons on the left, right, and in the middle. So far I have got working:
Right/Left/Middle - Custom Image and/or Text
Right/Left - Normal looking button with custom Image in it
Right/Left - Normal looking button with custom Text in it
By 'normal looking' I mean the default UIBarButtonItemStyle- just a nice shiny button.
My question is, how can I achieve the same look in the MIDDLE of the nav bar? I can do custom/text images by just creating a custom UIButton, and on the right / left I create a UIBarButtonItem from it, but in the middle I just add the UIButton view as a subview of the navbar.
I can't add a UIBarButtonItem to the navbar as a subview, and any UIButton I create doesn't look like a UIBarButtonItem.
The only workaround I can think of is to use a stretchable custom image that I steal from a screenshot. I'd rather avoid doing it this way. Am I missing something?
*********** UPDATE **************
The open source library Three20 will allow you to create UIButtons that look like UIBarButtonItems. Then you can add them to the bar view either by placing manually as a subview or by setting the title view.
I never understood why they didn't make UIBarButtonItems derive from UIViews (or even better, UIButtons) so they could be used elsewhere.
Sounds like you're on the right track, but need better artwork :-) You can get a large number of iPhone UI components in a Photoshop .PSD file from here. They have pre-rendered bar buttons which you can use as a base for a standard UIButton image. If you have Photoshop (or a decent drawing program) you can stretch the buttons from the middle to fit your size without getting the corners distorted. Just add the label and you should be good to go.
Put a flexible region on the left and right, they will offset each other causing anything between them to be centered
Related
I am wondering if anyone knows how to customize a UISlider to give the progress bar rounded corners (without Thumb Image) as shown in the following image:
What I want:
What I have now:
Thanks!
That isn't how a UISlider works, so can't customize in that way. Instead, you would have to build your own custom view from scratch in order to get that display. The drawing part is trivially easy; getting your view to act like a slider (that is, if you want it to respond to touches and dragging) is pretty easy too.
Well I have a problem,
I'm doing the reverse for my iPad app, but I want my tabbar is exactly like this:
I'll put the volume controls, play and pause on the left and right side of the tabbar icons ....
how can I change the position of them?
For alligning the elements, you should take a look at this question:
Aligning UIToolBar items
I'm not sure how to add custom controls to a UIToolbar, but I'd expect you could do this by setting their frame to overlap the UIToolbar.
Is it possible do something like this ?
When I click on the button I need the following animation: button to set some alpha filter and starts to fall down as indicated by the arrow, it will disappear on tab.
Can you tell me how to do this ? Thanks a lot ...
Here is image url: http://img534.imageshack.us/img534/8149/screenqx.jpg
It's definitely possible, but there are some issues you have to overcome. One is that UIBarButtonItem isn't a UIView. One way is to loop through the subviews of the UIToolbar or UINavigationBar. Another way is to figure out the position of the button. Another is to get the view using private api if you're not submitting to the AppStore.
Once you have the view, you can move it to the superview of the UIToolbar or UINavigationBar or you can create a view on top of that (and hide the real UIBarButtonItem since you're done with that). The latter is more difficult because mimicking the look of the default bordered UIBarButtonItem isn't easy.
Now you need to get the center of the UITabBarItem somehow. You can either use private api or you can loop through the subviews.
Create a CGPath using Quartz functions or using UIBezierPath. The start point will be the center of the button and the end point will be the center of the UITabBarItem.
Create a CAKeyFrameAnimation and attach said CGPath.
Create a CABasicAnimation to animate the opacity.
Add both to a CAAnimationGroup.
Attach the animation group to your button view's CALayer.
Make sure to also set the position and the alpha in order to prevent the view from jumping back to its original position after the animation.
Once you attach the animation group, the animation should start, so make sure you're doing all of this in the button's selector method.
You can't really move it from view to view, as your views could clip and then you'd get frames with only a partial image. Probably the best thing to do is to create a view on the fly which covers the whole screen, copy the button image into the view at the original point, remove the button from the original view, then animate that image to where you want it to go, then add the button to the final destination.
I have a UIToolbar with a UIBarButtonItem that I created in Interface Builder. The UIBarButtonItem is a bordered button that contains a custom image.
The button takes up the entire length of the toolbar. I have tried using different images, changing the width of the button... I don't know what else to do. It stretches across the entire toolbar.
If I use one the provided "Identifiers" (camera, trash, compose...) the button appears a normal size.
How it looks in Interface Builder
How it looks when I run it on the iPhone
SOLUTION
After some more tinkering, here is what I found: if I create a new UIToolbar and add custom image to the UIBarButtonItem, it works fine - but as soon as I connect the UIBarButtonItem to an IBOutlet, it goes large. I had to then specify the UIBarButtonItem's width in the code, via the IBOutlet.
Try adding a UIBarButtonSystemItemFlexibleSpace on the right of the camera bordered item.
I'm not an expert, but I think it might have to do with how the frame is defined in the "sizing inspector", could you maybe show a screenshot of the settings?
When a new view controller is pushed onto the navigation stack, there is standard support for a back button with the title of the previous view controller. This button "points" to the left rather than having a rounded rectanglar shape.
Is there a standard way to create a UIBarButtonItem that "points" to the right? This button would be used as the rightBarButtonItem.
Using the Three20 library you can do it easily without creating an image yourself (and it will size up correctly depending on your text):
This screenshot comes from the example application that comes with Three20.
You could use one of the PNG files floating around with iPhone UI widgets (example). Take the left-pointing button and flip it horizontally in Photoshop or another image editing tool to make it point right-wards.
Then insert a UIButton into the rightBarButtonItem view, using the horizontally-flipped widget as its image property.