If I have an animation which can play with an array of images.
How Do I set this to play on a button? I want the buttons image to display the animation?
Thanks
If you need an actual button, then the choice is clear: You will need to build your own custom UIControl object to achieve this. Quite possibly you can just subclass UIButton, and handle animating the images that way. I do something similar in one of my apps using core animation to fade between a series of 6 images. It works quite well.
I will point you at the UIControl class reference. Please read the intro material on the page, it links to other pages, like event handling. As well, I will also point you at the CABasicAnimation class reference, with the same caveat applied.
Remember, a UIControl is just a UIView, except that it handles events a particular way.
Simplest way is just to place a custom UIButton (ie invisible to the user) above your UIImageView. Then it will appear that the button is animated but in reality it will be the images underneath the button that are animated.
Create an array, eg. myArray with the filenames of your images.
assign this array to a UIImage with myImage.animationImages = myArray;
then use setImage:forState to assign this animation to the button.
Related
I've got a subclass of UIControl which represents a slider switch, with a variable 'percent' which stores the current position of the slider, i.e. 0.0 means the slider is on the left, 1.0 means the slider is on the right. I have two images which look like speech bubbles, and when the user clicks the slider I want to display one of these images (they are the same size but look different, designed so one is displayed if percent <= 0.5 and the other one if percent > 0.5) and have the 'tail' of the speech bubble follow the slider (i.e. the frame is set as a function of the percentage).
I have created a custom UIView for the image which changes the image to display via a boolean parameter. I have tried creating a parameter in the UIControl subclass that draws the UIView along with all the other drawing, but I need to draw it outside the UIControl's rect, which can't be done from inside the UIControl's drawRect: method. What would be a good way of managing these two views and making sure the speech bubble always updates when the percentage value of the UIControl changes?
Sounds like your UIControl should simply be:
Tall enough to contain the bar and bubble view
Transparent (so that you can see behind the part of the view where the bubble "slides")
Or am I missing something?
First off, make sure the continuous property is set to TRUE in your UISlider.
Then, make sure you have an IBAction in place to receive update events from your UISlider. You can make the connection easily in Interface Builder (built into XCode 4) or you can do it programatically using UIControl's addTarget:action:forControlEvents: method.
And lastly, inside that IBAction you can now change the frame of your "speech bubble" UIView (make sure to link that up to your parent view controller as a member in your #interface .h file). Where it appears in relation to the slider is left to you as a homework assignment (cause it's really implementation specific -- or, to put it another way, how it appears is up to each individual app & programmer).
I hope this information helps you out!
Thanks for the answers - it turned out the best way to do it was to declare a delegate protocol for my custom UIControl, and assign the speech bubble view as the delegate. Then I made a method that tells the speech bubble to update location (passing in the location) and called that from the UIControl whenever the position of the control updated.
Probably the simplier way is to add to the UIControl a property pointing to the UIView and move it around in the method(s) where you change the control state. Of course to do that you need to create a class like MyCustomControl that extends UIControl.
I want to make a small area to present some information in the middle of a UIToolbar and was wondering what the best way to do this is.
I need to show some text and a graphic, both of which need to be updated (around every 3 seconds) as new information arrives. The graphic is similar to the iPhone signal strength indicator, so it can be either custom drawn or selected from one of 3 graphics (low, medium, high strength).
I'll probably use initWithCustomView: to create a UIBarButtonItem, although I would like the view to be clickable (to allow the user to change the information shown).
What's the best way to make that view? Can I use a NIB, or do I need to do custom drawing in the view? What's the best way to update the buttons? I'm assuming that I'll have to remake the toolbarItems array each time and set it when the information changes. Is there a cleaner way to do this? Thanks.
Using initWithCustomView: sounds like a good way to go. You can create your custom view any way you want: with a NIB, by drawing it, even using images. It can also have its own subviews. It can be any object that inherits from UIView. (So, if you wanted, you could even make it actionable by using a UIButton, a custom UIControl, or a custom UIView with a gesture recognizer attached.)
You shouldn't have to remake toolbarItems (or, for that matter, do anything with it after you've added all your button items) if you just keep a pointer to your custom view UIBarButtonItem. It could be an instance variable. Then, to update the custom view, you could access it as you would any other view. I've never actually tried this, but I can't see any problem with doing it.
You sound like you had it mostly figured out. Hope this is helpful.
I needed the same solution and was hoping for some code examples from you. So I ended up doing it all in IB and the steps are here as follows:
Create UItoolbar in IB with no Items. (A Bar Button Item will be added again once you add the UIView)
Add UIView as subview of UIToolbar
Add UILabels to subview of UIView that is already a subview of the UIToolbar.
Create IBOutlets from UIToolbar, UIView and each UILabel and then you can reference the labels in your app.
I did set the backgrounds to clearColor so the text appears on top of UIToolbar without any box or borders.
And the text updates dynamically which was the desired outcome.
Hope this helps someone as this has been eluding me for a while.
I would like to put thumbnails in the toolbar like the Photos app. Like the screenshot on the left:
(source: apple.com)
Is there is a built-in control to do this, or do I have to implement it from scratch?
If the answer is from scratch, any tips?
This would be a control you'd have to write yourself. I'm not what the best approach would be, but I think I'd go with subclassing a UISlider, drawing the array of images next to each other to create the track, and then using the current image as the handle.
From scratch, is the answer, unfortunately.
You create a custom view and add your array of images as subviews using UIImageView objects incrementing your x position by the the thumbnail width you've determined to use.
Then override the touch events for you custom view. Determine which image view the touch is currently over in -touchesMoved and use Core Animation to animate the current view's scale making it larger than the rest. Add the custom view to your toolbar wrapping your custom view in a UIBarButtonItem using -initWithCustomView.
Remember to enable user interaction on your custom view or you won't receive any touch events. If you need help with the code, update your question with some code specific questions.
Should anyone still need it, I made an effort of coming up with ThumbnailPickerView - a simple UI control resembling Photos.app thumbnail slider.
I am almost at the end of coding my kids educational application, woohoo!.
But... Im stuck on something.
When app loads i have my main view. It has 4 buttons for flipviews(each with ten views of content) and 4 buttons for character selection(an image that will follow you through every screen of content).
Problem is im unsure on how to link UIButton selection to UIImage display in multiple views. I want the user to choose a character button and then continue to the flipviews and in the views the image displayed should be the one that they have selected on the main view. So everytime they return to the main view they can change the character that will follow them around the app.
Any thoughts, help or code would be much appreciated!
Thank You
Alex
Make a new object, a subclass of UIImageView, which has a -setImage method. Once you set the image, then where ever you embed that object, it will display the same image. You could even have that subclass view have a score displayed next to it, or a name or other stats, so as you go from one screen to another, you have all that info follow you around with the image. No need to create labels in all the screens for global info like that.
In summary:
make a new subclass of UIView or UIImageView in Xcode using the New File... menu. You would do new UIView if you will have other items than just an image.
add methods that allow you to set the image, update text stats etc.
BONUS: you can make the class handle taps, so if a user taps the image, you could do something like provide help or run a cute little animation
embed that object in any screens you wish. Keep in mind that you can have that view be sized differently in each screen using transforms. Cool, no?
that's pretty much it!
Good luck!
I have programmatically added a UIImageView. How do I make it send a message to my controller when the users clicks it, sending itself as the only parameter?
I wouldn't use a UIImageView unless there was some other compelling reason. I'd just use a custom UIButton and use the UIImage as its background.
Create a new class that extends UIImageView and use that.
In your class, override the touch events - touchesBegan, touchesEnded and/or touchesMoved as appropriate
From those methods, call back to a method on the controller.
I'd just put a custom button over the UIImage view, and use normally - buttons with Custom style are invisible and so will not obscure the image. It's also a great way to turn regions of text into clickable areas as well.
Or, you could assign the custom image as a graphic background for the button.
just put a button over the imageview, with the Alpha attribute set to 0.10 or less.
you can capture the button's tap event but almost cannot see it.