So i'm doing something a little different on the blog, what you say, actually blogging? Well yes that; but also I'm going to talk about some programming stuff, I've fallen in love with the awesome MonoTouch SDK for the iPhone. It brings C# to the iPhone. The thing that I think I like so much is that now wiring controls to events isn't a huge pain in the ass. That is really what kept me from learning or getting excited about Objective-C, I just hated all the "extra" code need to wire up controls to events. I know the Cocoa fan boys are gonna say that i'm over reacting; but that's just the way I feel :)
So enough of the ranting, I'm just going to get to the meat and potatoes of this thing. The UrbanSpoon animated UIPickerView is probably one of the coolest effects on the iPhone, not only is it a great visual effect; but also adds a level of interactivity to your app. Something that is a must on the iPhone. A feature such as this can really set you apart from your competitors.
When I was working on my iFindTudors app (still not in the iTunes Store yet; but check soon =P) I wanted to incorporate the effect, at the time I was developing it in the Titanium Mobile SDK so I had to recreate the effect (and for that matter the entire UIPickerView control, at the time the version I was using didn't support that API - additional note the UIPickers are coming in Titanium Mobile SDK 0.70 which is just around the corner =P ) in HTML/CSS/JS. Which had it's challenges but prepared me for doing it in MonoTouch.
I can't believe how incredibly easy this effect is to actually achieve. First you will need a set of images of the UIPickerView with various items selected. You can just drag an UIPickerView onto a window in Interface Builder and take screen shots, you can use a iPhone UI PSD or you can make a quick little app that has your data in the UIPickerView and run it in the simulator. I opted for the last option. Take 5-10 screenshots each with a different value selected. open these in photoshop or your favorite photo editor and blur the text.
Lather, rinse, repeat for all the images, and save them with sequential names (well you don't really have to use sequential names, but that's easier). I went with blur01-blur09.
So now it's time to fire up MonoDevelop, choose the iPhone project, not the empty one - cause that's just more work :) you will see Main.cs (this is where your main code lives) and MainWindow.xib (this is where your GUI lives). First thing we are going to do is add the images to the project. First right click on your project name Add -> New Folder . Name this folder "images". Now right click this folder and goto Add Files, Select all your images, before hitting open goto "Override default build action" and set it to content.
Now it's time to set up our user interface in Interface Builder. So double click MainWindow.xib, this will open up Interface Builder. Then we drag a UIPickerView, UIImageView and two UIButtons onto the window. When dragging the UIImageView onto the window place it ontop of the UIPickerView, so that when we show it, that it hides the wheel of the real UIPickerView.
Make sure that you add the outlets for these items, then save the XIB and we can exit interface builder.
Now it's time for some code! There are only a few things that we need to really make this work. A Picker with our data, a UIImageView with the array of our images setup to perform our animation and the code to fire the animation and stop it.
So we want to first setup our UIImageView with our images.
// We need to start the app with the imageViewPicker Hidden
imageViewPicker.Hidden = true;
// Create an array of UIImages that the imageViewPicker will use for the "spinning" animation
// Make sure when you add these images to your solution that you change their build action to "content"
// So that they will be included in the App bundle.
// I choose 9 images; but I am sure it will work ok with more or less :)
// BTW, I really roughly cut these out that's why the animation looks a little rough, if you take your time
// you will have a much better result, this was just quick n dirty :)
imageViewPicker.AnimationImages = new UIImage [] {
UIImage.FromFile ("images/blur01.png"),
UIImage.FromFile ("images/blur02.png"),
UIImage.FromFile ("images/blur03.png"),
UIImage.FromFile ("images/blur04.png"),
UIImage.FromFile ("images/blur05.png"),
UIImage.FromFile ("images/blur06.png"),
UIImage.FromFile ("images/blur07.png"),
UIImage.FromFile ("images/blur08.png"),
UIImage.FromFile ("images/blur09.png")
};
// Set the animation duration, I used half a second so we get that real "spinning" feeling, ticker with this as needed
imageViewPicker.AnimationDuration = .5;
// Start the program with the animation turned off.
imageViewPicker.StopAnimating ();
We are half way home now! Next let's wire up the buttons so they before their jobs. First the button to start the spinning.
// buttonSpin TouchDown Event
buttonSpin.TouchDown += delegate {
// Show the imageViewPicker & Start the Animation
imageViewPicker.Hidden = false;
imageViewPicker.StartAnimating ();
};
Basically all we are doing is make sure the UIImageView is visible and then kicking off the animation that we setup in our array of images. And we we want it to stop we just do the inverse, and we also have to set the selected index to a random number that way it performs just like a slot machine :)
// buttonStop TouchDown Event
buttonStop.TouchDown += delegate {
// Hide the imageViewPicker & Stop the Animation
imageViewPicker.Hidden = true;
imageViewPicker.StopAnimating ();
// Get A random number from 0 - 9
// in a real world scenario you would want to call the GetRowsInComponent method of the UIPickerView
int n = _r.Next(9);
// Lets select our random index and set the animation to true so that it looks "cool" :)
pickerChoices.Select(n,0,true);
};
So that's it! That awesome effect can be yours with just a few lines of code and a couple of pngs! Drop me a note in the comments if you would like me to do a screencast explaining this further or if there are other effects you'd like to see ported to
MonoTouch.
So grab the
MonoTouch UrbanSpoon Animated UIPickerView Demo solution and get cranking in MonoDevelop :) Btw, feel free to use this code in any project in any way however you feel :)
If you have any suggestions on improvement or anything please let me know.
Added a video of the finished product too