I need to create a UIToolbar object that uses an image for the background. Most of the buttons are images as well, and rectangular. One button, however, is round and overlaps the toolbar like the Start button on the Windows task bar. See below.
I know that I will need to subclass the UIToolbar to paint the image for the toolbar -- I think. If so, does anyone have example code showing how to do this?
Furthermore, does anyone have any ideas on how to implement the larger round button? I'm thinking of another custom subclass for this, but not sure if there might be an easier way.
I can have the art guys chop the image anyway needed, which I'm sure the round button will need to be chopped some how.
Any ideas or sample code?
alt text http://iphone.sophtware.com/toolbar.png
Maybe you'll find some inspiration at this tutorial : Recreating The Raised Center Tab Bar Button of Instagram, DailyBooth & Path
For the color, you can experiment with the tintColor property.
As for the rest, UIToolbar is not designed for this. You will need a custom component (probably based on UIView).
I think it is possible but hard.
Override the drawRect method of the toolbar to draw the whole image. Then add left and right buttons.
For the round button you can add one invisible button on the bottom middle of the View and another invisible button in the middle of toolbar. Of course, you can try to use the views instead of the buttons and track the user interaction manually.
Related
Typically, the UIBarButtonItem will be highlighted when we tap it.
However, I intend to show the users that the action is automatically done for them when the view is loaded after 4 sec.
So I want to highlight the Button without tapping it.
How can I achieve that?
For a UIVIew object such as a UIButton, you can either use the following code Glow category on UIView that adds support for making views glow or use this example.
If you are using the first one, you can just call startGlowing and stopGlowing. When you call startGlowing, the view will start to pulse with a soft light, this effect is removed when stopGlowing is called. Check this.
For UIBarButtonItem, you might have to use the solution provided here.
I added a UIToolBar from Interface builder, then dragged 2 UIBarButtonItem's. Now i need to add an image to it. So i selected the barButtonItem and selected the image using Interfacebuilder.
I only get a White image, with no curvy edge. My image is as follows. I don't see that image, but instead i see a white rectangle.
How do i prevent this. Can someone tell me whats wrong, and provide me with a working solution.
my bar button
If you go to iOS Human Interface Guidelines you will see the specifications for icons and buttons. This is my experience, for the best result you'd better create a specific icon (image) for UIBarButtonItem. If you still want to use an image, that doesn't follow the UIBarButtonItem guide, my approach is:
Add a generic UIButton instance to your view. Drag it from the list on the right to the view, not to the ToolBar or navBar.
Customize it with the image, i.e. from the Inspector, set the image or background image, or set it to custom style, bordered, etc.
Drag it to the toolBar, and XCode will adjust it. Again, it does not always guarantee the best result, but it does what you want.
I hope it helps.
You should drag an "Image View" on to your layout and specify the image in that - that worked for me, but I'm no xcode guru.
Hope that helps, Paul
So I want to change the UIPickerView background to add a black rectangle next to the white part of the scroller, a la the Convert app.
However I'm not sure how to go about doing that. I know there's no direct way to do it, but I've also looked at trying to write my own UIPickerView from scratch using UIScrollView. This didn't seem very promising.
Do you have any suggestions or tips? Really appreciate it.
Just create a UIImageView that contains the left portion of your graphic above. Add that UIImageView to the same view that contains your UIPickerView-- so it will draw on top of your UIPickerView.
Just curious if the tab bar UI element in screenshots is some built in class or customized.
If it is customized, then please give me a hint on what classes I might check to have something like that.
The first screenshot is initial tab bar. When I tap on the last icon the tab bar smoothly(animated) resize itself as on second screenshot. If I press the edit button the icons are shaking(as on iPhone home) and I'm able to arrange them.
first
tab bar http://img686.imageshack.us/img686/3899/photo2aw.jpg
second
more buttons http://img38.imageshack.us/img38/5673/photo3kq.jpg
The tabbar in the top image could just be a standard tabbar with a non-standard color scheme.
The bottom image is a custom element most likely implemented in an UIActionSheet.
Gotta say, this is a butt ugly UI using non-standard (and therefore confusing) elements. I wouldn't suggest trying to emulate it.
Looks like it's custom. You might just want to look at subclassing UIView and putting a bunch of buttons it stored in a NSArray. That way, when you re-arange them, you just have to move the objects to a new position in the array.
You should be able to achieve the shaking by using simple UIView animations.
I'm trying to figure out a best way to implement the picture-editing capability shown in the native address book app on iPhone.
On the built-in address book, this is how the picture looks like before editing:
qkpic.com/2f7d4 http://qkpic.com/2f7d4
And after clicking edit, notice how "Edit" overlay is added and the image becomes clickable:
qkpic.com/fb2f4 http://qkpic.com/fb2f4
What would be the best way to implement something like this? Should I make the image a button from the beginning and have tapping disabled at first? If so, what steps are required to add an overlay/label to the image (in above example, gray border + the text "Edit" is added)
The easiest way is to use Interface Builder, create a container view, then add a UIImageView and UILabel as subviews to it. You would position and style the text and the image but set the UILabel to hidden. Make the whole container view respond to touches. It's easy to do since UIView is derived from UIResponder so all you have to do is override touchesEnded. Whenever you want to change the text label, just set the UILabel to hidden=NO.
There's more to it, however. Notice how the image has rounded corners? You'll want to override the UIImageView's drawRect method to implement a custom drawing routine to do that. There's lots of sample code around and it wasn't part of your original question so I'll stop here.