April 16
Custom UISlider Images Tutorial
Continuing on from the previous tutorial i’ll show you how to implement your own themed ui elements, in this case a themed UISlider. Adding some themed controls to a game really helps the user be immersed in the game and gives it some polish.
Here are the images were going to use as our custom sliders(our newest game has a metallic theme). Add these images to the Game Resources image group in the Xcode project.
|
|
|
Ok lets get started, lets add some items to the SettingsViewController header file, so it should look like this:
#import#import "Director.h" #import "SoundManager.h" @interface SettingsViewController : UIViewController { // The shared director Director *sharedDirector; // The sound manager SoundManager *sharedSoundManager; // The sliders IBOutlet UISlider *fxVolumeSlider; IBOutlet UISlider *musicVolumeSlider; } @property(retain, nonatomic) IBOutlet UISlider *fxVolumeSlider; @property(retain, nonatomic) IBOutlet UISlider *musicVolumeSlider; - (IBAction)wowButtonPressed:(id)sender; @end
Basically were adding a SoundManager object(we want our sliders to adjust sound) and 2 UISlider objects that we now have to tie up with Interface Builder. So open Interface Builder now.
Open our Settings.xib file, in Game Resources, and add 2 UISliders to the scene. To help in telling which slider is which, i also added a label above each slider – one for music and once for fx. The scene should then look like so:
Now to connect up the IBOutlets, we added in the header file, to the UISliders in the xib file. Control-click on the File’s Owner(SettingsViewController) and drag it to one of the sliders, like so:
A popup box will then appear and select which ever slider represents the outlet, so for example, i’ve dragged over to the music slider – i should click on the _musicVolumeSlider outlet shown in the popup. Heres the popup next to the fx slider:
Ok so the sliders have been connected from the Settins.xib file to the SettingsViewController.
Now to actually theme our sliders. Implement this in the SettingsViewController class:
- (void)viewDidLoad {
[super viewDidLoad];
// Setup custom slider images
UIImage *minImage = [UIImage imageNamed:@"grey_track.png"];
UIImage *maxImage = [UIImage imageNamed:@"white_track.png"];
UIImage *tumbImage= [UIImage imageNamed:@"metal_screw.png"];
minImage=[minImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
maxImage=[maxImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
// Setup the FX slider
[fxVolumeSlider setMinimumTrackImage:minImage forState:UIControlStateNormal];
[fxVolumeSlider setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[fxVolumeSlider setThumbImage:tumbImage forState:UIControlStateNormal];
fxVolumeSlider.minimumValue = 0.0;
fxVolumeSlider.maximumValue = 1.0;
fxVolumeSlider.continuous = YES;
fxVolumeSlider.value = [sharedSoundManager fxVolume];
// Attach an action to sliding
[fxVolumeSlider addTarget:self action:@selector(fxSliderAction:) forControlEvents:UIControlEventValueChanged];
// Setup the Music slider
[musicVolumeSlider setMinimumTrackImage:minImage forState:UIControlStateNormal];
[musicVolumeSlider setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[musicVolumeSlider setThumbImage:tumbImage forState:UIControlStateNormal];
musicVolumeSlider.minimumValue = 0.0;
musicVolumeSlider.maximumValue = 1.0;
musicVolumeSlider.continuous = YES;
musicVolumeSlider.value = [sharedSoundManager musicVolume];
// Attach an action to sliding
[musicVolumeSlider addTarget:self action:@selector(musicSliderAction:) forControlEvents:UIControlEventValueChanged];
// Cleanup
minImage = nil;
maxImage = nil;
tumbImage = nil;
}
This loads the images that we added to the project earlier and sets them as the different images that make up a slider widget. It also sets the sliders min and max values, which is useful to give the sliders movement change some limits we can work with. Finally it adds a event for when the slider value is changed, this specifies the callback method for the event. You’ll need to add these new methods as follows, to handle the sliders change events:
- (void) fxSliderAction:(id)sender {
[sharedSoundManager setFxVolume:fxVolumeSlider.value];
}
- (void) musicSliderAction:(id)sender {
[sharedSoundManager setMusicVolume:musicVolumeSlider.value];
}
Also don’t forget to add the init of the sound manager to the init of the view controller, so in the initWithNibName method add this line:
// Setup the sound manager sharedSoundManager = [SoundManager sharedSoundManager];
And thats it! I’ve added some music to the menu scene and its playing by default.
Heres the project folderThemedSliderExample
[...] Creating a document centric iPhone/iPad application with own file format using ZipArchive Custom UISlider Images Tutorial [...]
Thanks for the great tutorial. Tried this and works perfectly. Only issue I came across was the clean up part – My app would crash with the releases you specify there – I got around that by doing:
minImage=nil;
maxImage=nil;
tumbImage=nil;
and then doing the releases. Am I doing the releases correctly with this additional code?
If you nil them before releasing them you are doing this incorrectly. There is actually an error in the code above, there doesn’t need to be the three release calls as the images are being created on the stack. Their scope is local and they are automatically cleared up and memory freed when they go out of scope at the end of the function viewDidLoad. You only need to call release if you allocate memory to an object using alloc, otherwise the scope will handle the cleanup. I’ll get Jeff to check this and update the source…
Hi Sean,
Yeah your right, there was an incorrect decrement of the reference count of the image objects and is not owned at this point by the caller. The autorelease pool in the game loop helps with the cleanup of locally declared variables. I’ve changed this code now.
Glad your enjoying the blog and stay tuned for more tutorials!
Jeff
[...] article was the jumping off point for me to customize the slider: http://www.applausible.com/blog/?p=250 No Comments by Jason on July 13, 2010 filed in Uncategorized tagged developement, iphone, [...]
Eddie wrote: “there doesn’t need to be the three release calls as the images are being created on the stack. Their scope is local and they are automatically cleared up and memory freed when they go out of scope at the end of the function viewDidLoad.”
This is incorrect. They are NOT created on the stack. They are autorelease objects and they will be released when the autorelease pool is emptied, which is guaranteed to be after this method returns. So you can assign nil to the vars if you want but it is not necessary.
Re: Ben, you are right, in fact my background is C++ and by looking at this I couldn’t tell that the images were autorelease and so I made my statement (wrongly). The fact that I didn’t know that there were autorelease is a problem that I always have with obj-c, in fact I have an issue with memory management in obj-c in general, mainly because I like managing my own memory and don’t like the management that happens under the hood in obj-c (much like Java). That said it is very powerful but not something I’m used to(hence the silly comment) :)
Actually looking again, the fact that were are pointers at all along with the fact that obj-c seems to perform a lot of object allocation in static methods should hve been clues enough
Thanks for your great tutorial, that saved a lot of time!!!!!!!!
Hi, I actually like your blog. It is quite engrossing
relaxation city music relaxing download free…
[...]Custom UISlider Images Tutorial | Applausible Blog[...]…
With AMOLED?
I was very happy to seek out this net-site.I wanted to thanks for your time for this excellent learn!! I undoubtedly having fun with every little bit of it and I’ve you bookmarked to check out new stuff you blog post.
I used to be more than happy to search out this web-site.I needed to thanks for your time for this wonderful read!! I undoubtedly enjoying every little little bit of it and I’ve you bookmarked to check out new stuff you blog post.
Fantastic blog I am just taking in on motorcycles and this post really helped me out! I really appreciate the effort.
Good web site! I really love how it is simple on my eyes and the data are well written. I’m wondering how I might be notified when a new post has been made. I have subscribed to your RSS feed which must do the trick! Have a nice day! http://www.profesjonalne.logo-projektowanie.com/11114-artykul-Jak.ubezpieczyc.spiesznie.samochod
I and also my guys were following the good tips located on your site and then unexpectedly I got a horrible suspicion I had not expressed respect to the website owner for those tips. The men had been stimulated to study them and have pretty much been enjoying these things. I appreciate you for being so helpful and then for selecting this form of excellent subject areas millions of individuals are really needing to be informed on. Our honest apologies for not saying thanks to sooner.
The Twitter application page will open. This is very good if you’ve got some thousand followers, but as you get far more and much more the usefulness of this tool is downgraded.
Thanks for the recommendations shared in your blog. Something else I would like to say is that fat reduction is not information on going on a fad diet and trying to shed as much weight as possible in a few months. The most effective way in losing weight is by taking it slowly and gradually and following some basic points which can enable you to make the most out of your attempt to lose fat. You may be aware and already be following some of these tips, nevertheless reinforcing awareness never damages.
Hi….
You are NOT using custom sliders… You are using Cocoa Sliders. Which arent custom.
Wrong title for a nice tutorial